더 나은 그래픽을위한 유용한 SVG 도구 20 개

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

여기에 SVG를 빠르고 효율적으로 사용하기 위해 사용할 수있는 20 가지 도구. Google에는 최적화, 전환, 패턴 만들기 등에 도움이되는 대부분 온라인 도구가 있습니다..

대화식 SVG 좌표계

SVG로 작업 할 때 좌표를 벗어날 수 없습니다. Sara Souiden이 제공하는 훌륭한 대화 형 도구입니다. SVG 좌표 작업 방법 배우기. 사용 뷰 박스 과 preserveAspectRatio SVG에서 주황색과 자주색 선과 편리한 자로 안내하여 SVG가 어떻게 기능하는지 배우면서 놀 수 있습니다..

b64

b64 간단한 도구로 이미지를 최적화 한 다음 base64 형식으로 변환하십시오.. SVG 이미지 (JPG 및 PNG와 같은 다른 형식도 가능)를 삭제 한 다음 결과로 Base64 배경 이미지를 사용하여 CSS를 가져올 수 있습니다.

SVGO

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

npm을 통해 SVGO를 도입 할 수 있습니다., $ [sudo] npm install -g svgo 끌어서 놓기 기능을 제공하는 GUI 버전을 사용하여 SVG 최적화를 처리하십시오..

SVG OMG

SVG OMG 명령 줄을 돌린다. SVGO (이전 도구)를 GUI 버전 더 직관적이고 사용하기 쉽습니다. 다만 버튼 토글 각 기능을 활성화하거나 비활성화 할 수 있습니다. 결국 이미지 파일과 코드로 결과를 얻을 수 있습니다..

지금 SVG

Illustrator에서 작업 할 때 내 보낸 SVG에는 필요하지 않은 정보가 포함되어 있습니다. 이 도구를 사용하면 내 보낸 SVG의 최적화 된 버전 가져 오기 Illustrator 작업 영역에서 바로 사용할 수 있습니다. 이 도구는 SVG를 최적화하는 몇 가지 옵션이있는 패널을 추가합니다. Creative Cloud Add-ons 페이지에서 SVG Now를 다운로드 할 수 있습니다..

SVG에서 PNG 로의 변환

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

SVG 서커스

로더 애니메이션이 멋지다고 생각한다면 SVG를 사용하여 로더 애니메이션을 쉽게 만들 수 있습니다. SVG 서커스. 도구를 사용하면 반복 애니메이션을 사용하여 자신의 로더, 스피너 또는 이와 유사한 것을 만드십시오.. 패널에서 'Actor', 위치, 크기, 색상 및 기타 항목을 설정 한 다음 결과를 가져 오기 위해 내 보냅니다..

SVG 스프라이트

SVG Sprite는 Node.js 모듈로서, 한 무리의 SVG 파일들, 과 그들을 SVG 스프라이트 유형으로 바꿔 준다. 배경 및 / 또는 전경 이미지, SVG 스택 및 그 이상을위한 전통적인 CSS 스프라이트 포함.

준

준을 사용하면 준결승 이미지 생성 아래에서 보는 것과 같습니다. 이 발전기는 실험적이지만 결과는 확실히 차갑습니다. 옵션 값을 변경하여 재생 한 다음 'SVG 저장'버튼을 사용하여 결과를 다운로드 할 수 있습니다..

일반 무늬

SVG로 패턴 만들기 더 쉽고 재미난 적이 없었습니다. 아름다운 패턴을 얻을 때까지 이미지를 업로드하고 크기를 줄이거 나 간격을 변경하고 회전하고 다시 칠하십시오. 다운로드하기 전에 결과를 미리 볼 수 있습니다..

삼각형 생성기

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

SVG 그라디언트

CSS로 그라데이션을 만들 수 있지만 SVG로 동일하게 할 수 있다는 것을 알고 있습니까? 가장 쉬운 방법은 SVG에서 그라데이션 생성 이 도구를 사용하는 것입니다. 시작 및 중지 색상을 입력하면 생성 된 결과에 대한 코드가 표시됩니다. CSS에 대한 대체도 포함됩니다..

PSD를 SVG로 내보내기

작업을 위해 이미지 편집기로 Photoshop을 사용하는 경우 때때로 Photoshop 작업 공간에서 디자인을 SVG로 변환, 포토샵에서는 지원되지 않는 형식입니다. 스크립트를이 도구로 다운로드 한 다음 Adobe Photoshop / 사전 설정 / 스크립트 폴더.

SVG 확장명을 사용하여 벡터 레이어 이름의 이름을 변경합니다 (예 : layer1이 layer1.svg이 됨). 이제 스크립트를 실행할 수 있습니다. 파일> 스크립트> PS to SVG.

SVG 필터

SVG를 사용하면 색조, 채도, 흐림, 선형 색상 오버레이 및 기타 많은 효과를 이미지에 추가 할 수 있다는 것을 알고 계십니까? 다음은 이러한 효과를 시각화 한 다음 스 니펫을 제공합니다. 쉽게하기 효과를 묻다. 귀하의 프로젝트에.

SVG Morpheous

SVG Morpheous 다음을 수행 할 수있는 자바 스크립트 라이브러리입니다. 한 모양에서 다른 모양으로 SVG 아이콘을 변형시키다.. 여유 효과, 전환 애니메이션 지속 시간 및 회전 방향을 설정할 수 있습니다..

클립 경로 생성기

SVG를 사용하면 Shape를 사용하여 이미지 클립을 클릭 할 수 있습니다. 모양이 정사각형 또는 원 모양 인 경우 이것은 매우 쉽습니다. 근데 뭐 모양이 많은 점 또는 다각형 모양 인 경우? 이것이 바로이 클립 경로 생성기 도구가 필요한 곳입니다..

Chartist.js

Chartist.js는 고도로 사용자 정의 할 수있는 반응 형 차트 작성. SVG를 사용하여 SMIL을 사용하여 애니메이션으로 표시 할 수있는 차트를 표시합니다. 이 라이브러리를 사용하면 꺾은 선형 차트, 원형 차트, 막 대형 차트 및 다른 유형의 차트를 만들 수 있으며 심지어 애니메이션을 추가 할 수도 있습니다..

SVG 획 행정 발전기

이것은 간단한 도구입니다. 점선을 만든다. SVG 활용 획 - 대시 배열. 먼저 목록에서 하나의 대시 유형을 선택한 다음 너비, 높이, 회전 또는 색상으로 사용자 정의하십시오. 그런 다음 HTML 코드와 CSS를 잡고 프로젝트에서이 대시 줄을 적용 할 수 있습니다..

메서드 그리기 : 간단한 SVG 편집기

Method Draw는 웹 기반 SVG 편집기로 캔버스의 양면에 도구와 함께 제공되는 직관적 인 인터페이스. 선, 도형, 텍스트 입력 또는 내장 된 도형을 그린 다음 그려진 객체의 속성을 편집 할 수 있습니다. 이미지를 SVG 형식으로 내보내거나 (SVG base64 형식으로 제공됨) 직접 PNG로 저장하십시오..

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

더 이상 인기가있는 것은 아니지만 일부 사용자에게는 Flash를 허용하지 않을 수있는 기회가 있습니다. 그렇다면 플래시 기술을 SVG로 전환하여 새로운 기술과의 호환성을 유지하십시오.. 이 도구는 Flash 응용 프로그램의 확장이며 CS5, CS6 및 CC에서 작동 할 수 있습니다..

셰이프, 비트 맵 심볼, 클래식 모션 트윈, 셰이프 트윈 (다른 경우에는 논란의 여지가있는 성공이 있습니다)과 관련하여 SVG로 내보낼 수 있습니다..