[개발 | 디자인 Tool] 웹 디자이너, 개발자들이 더 좋은 그래픽을 만들기 위한 15가지 무료 SVG 도구

 

 

SVG는 요즘 웹 디자인에서 인기를 얻고 있으며 Illustrator 또는 Inkscape와 같은 도구를 사용하여 SVG 그래픽을 만들 수 있습니다. 그러나 웹 디자인에 관해서는 항상 더 가벼운 결과를 위해 최적화해야합니다.

SVG를 빠르고 효율적으로 사용하는 데 사용할 수있는 20 가지 도구가 있습니다. 우리는 대부분 최적화, 변환, 패턴 제작 등에 도움이되는 온라인 도구를 가지고 있습니다.

대화 형 SVG 좌표계 12

SVG로 작업 할 때 좌표를 떠날 수 없습니다. 이것은 Sara Souiden의 훌륭한 대화 형 도구로 SVG 좌표의 작동 방식 을 배우는 데 도움이 됩니다. 은 Using viewBox와 preserveAspectRatioSVG 기능을 조정하는 방법을 배우면서 오렌지와 보라색 라인과 편리한 통치자에 의해 인도, SVG에, 당신은 재생할 수 있습니다.

b64 9

b64 는 이미지 를 최적화 한 다음 base64 형식으로 변환 하는 간단한 도구 입니다 . SVG 이미지 (JPG 및 PNG와 같은 다른 형식도 작동)를 드롭 한 다음 결과로 base64 배경 이미지가있는 CSS를 가져올 수 있습니다.

SVGO 6

내보내는 SVG 에는 렌더링 결과에 영향을주지 않고 제거 할 수있는 불필요한 정보 가 포함될 수 있습니다. 편집기 메타 데이터, 댓글 또는 숨겨진 요소 를 제거 하려는 경우 SVGO를 사용할 수 있습니다.

npm을 통해 SVGO를 설치 $ [sudo] npm install -g svgo하거나 드래그 앤 드롭을 제공 하는 GUI 버전 을 사용 하여 SVG 최적화를 진행할 수 있습니다 .

SVG OMG 4

SVG OMG 는 SVGO (이전 도구) 의 명령 줄 을보다 직관적이고 사용하기 쉬운 GUI 버전 으로 전환합니다. 그냥 버튼 토글 활성화하거나 각 기능을 비활성화합니다. 결국 결과를 이미지 파일 및 코드로 가져올 수도 있습니다.

지금 SVG 삼

Illustrator에서 작업 할 때 내 보낸 SVG에는 필요하지 않은 일부 정보가 포함됩니다. 이 도구를 사용하면 Illustrator 작업 영역에서 바로 내 보낸 SVG의 최적화 된 버전을 얻을 수 있습니다. 이 도구는 SVG를 최적화하는 몇 가지 옵션이있는 패널을 추가합니다.

SVG에서 PNG로 변환하는 컨버터 1

SVG 파일을 PNG 형식 으로 내보내 시겠습니까? 이렇게하려면 Illustrator와 같은 응용 프로그램을 열지 않고 계십니까? 이 SVG to PNG 변환기 도구를 사용하여 PNG 형식으로 이미지 출력을 얻고 필요한 경우 PNG Base64 데이터 URI도 가져옵니다.

SVG 서커스 1

로더 애니메이션이 멋지다고 생각한다면 이제 SVG Circus 와 함께 SVG 를 활용하여 쉽게 만들 수 있습니다 . 이 도구를 사용하면 루프 애니메이션을 사용하여 고유 한 로더, ​​스피너 또는 이와 유사한 것을 만들 수 있습니다 . 패널에서 '배우', 위치, 크기, 색상 등을 설정 한 다음 내 보내서 결과를 얻습니다.

SVG 스프라이트

SVG 스프라이트는이다 Node.js를의 최적화 모듈, SVG 파일의 무리, 그리고 SVG 스프라이트-유형에 굽는다을 배경 및 / 또는 전경 이미지, SVG 스택 등을위한 기존의 CSS 스프라이트를 포함합니다.

준 2

준결정을 사용하면 아래와 같은 준결정 이미지를 생성 할 수 있습니다. 이 생성기는 실험적이지만 결과는 확실히 멋집니다. 옵션 값을 변경하여 작업 한 다음 'SVG 저장'버튼으로 결과를 다운로드 할 수 있습니다.

일반 패턴 2

SVG로 패턴을 만드는 것이 그 어느 때보 다 쉽고 재미 있습니다. 이미지를 업로드하고, 크기를 줄이거 나, 간격을 변경하고, 아름다운 패턴을 얻을 때까지 회전하고 다시 칠하십시오. 다운로드하기 전에 결과를 미리 볼 수 있습니다.

삼각 화 생성기 2

Trianglify Generator로 아름다운 SVG 기하학적 패턴 을 만듭니다 . 색상 임의성 / 변형, 세분성 크기를 설정하고 작업 할 색상 팔레트를 선택할 수 있습니다. 이 도구는 Trianglify 의 GUI 버전입니다 .

PSD를 SVG로 내보내기 1

Photoshop을 작업의 이미지 편집기로 사용 하는 경우 Photoshop 작업 영역의 디자인을 Photoshop 에서 지원되지 않는 형식 인 SVG로 변환 해야 할 수도 있습니다 . 이 도구에 스크립트를 다운로드 한 다음 Adobe Photoshop/presets/scripts폴더에 복사 합니다.

SVG 확장자를 사용하여 벡터 레이어 이름의 이름을 바꾸면 (예 : layer1이 layer1.svg가 됨) 이제 File> Scripts> PS에서 SVG로 스크립트를 실행할 수 있습니다 .

SVG 필터 1

SVG를 사용하면 색조, 채도, 흐림, 선형 색상 오버레이 등의 효과를 이미지에 추가 할 수 있다는 것을 알고 있습니까? 다음은 이러한 효과 를 시각화 한 다음 프로젝트에 효과 를 쉽게 포함 할 수 있도록 스 니펫 을 제공 하는 도구입니다 .

SVG Morpheous

SVG Morpheous 는 SVG 아이콘을 한 모양에서 다른 모양으로 변형 할 수있는 JavaScript 라이브러리입니다 . 여유 효과, 전환 애니메이션 기간 및 회전 방향을 설정할 수 있습니다.

클립 경로 생성기 2

SVG를 사용하면 Shape가있는 이미지 클립을 클릭 할 수 있습니다. 모양이 정사각형이나 원형 인 경우 매우 쉽습니다. 그러나 모양이 점이 많은 모양이거나 다각형 모양이면 어떻게 될까요? 이 클립 경로 생성기 도구가 필요한 곳입니다.

Chartist.js 1

Chartist.js는 고도로 사용자 정의 가능한 반응 형 차트 를 만드는 라이브러리 입니다. SVG를 사용하여 차트를 표시하며 SMIL을 사용하여 애니메이션 할 수도 있습니다. 이 라이브러리를 사용하면 꺾은 선형 차트, 파이 차트, 막대 차트 및 기타 유형의 차트를 만들고 애니메이션 을 추가 할 수도 있습니다.

SVG 스트로크 대시 생성기

이것은 SVG를 사용하여 점선 을 생성 하는 간단한 도구 stroke-dasharray입니다. 먼저 목록에서 대시 유형을 하나 선택한 다음 너비, 높이, 회전 또는 색상을 사용자 지정합니다. 그런 다음 HTML 코드와 CSS를 가져 와서이 대 시선을 프로젝트에 적용 할 수 있습니다.

방법 그리기 : 간단한 SVG 편집기 삼

Method Draw는 캔버스 양쪽에 도구와 함께 제공 되는 직관적 인 인터페이스를 갖춘 웹 기반 SVG 편집기 입니다. 선, 도형을 그리거나 텍스트를 입력하거나 기본 제공 도형을 사용한 다음 그려진 개체의 속성을 편집 할 수 있습니다. 이미지를 SVG 형식으로 내보내거나 (SVG base64 형식으로도 제공됨) PNG로 직접 저장합니다.

Flash를 애니메이션 SVG로 내보내기 5

더 이상 그다지 인기가 없지만 Flash를 놓치는 데 어려움을 겪을 가능성이 있습니다. 그렇다면 플래시 애니메이션을 SVG로 전환하여 최신 기술과 호환되도록 유지할 수 있습니다 . 이 도구는 Flash 응용 프로그램의 확장을 구성하며 CS5, CS6 및 CC에서 작동 할 수 있습니다.

모양, 비트 맵 심볼, 클래식 모션 트윈, 모양 트윈에 관해서는 SVG로 내보낼 수 있습니다 (다른 사람의 경우 성공 가능성이 있음). (Source: hongkiat)