더 나은 이미지 처리를 제공하는 SVG 도구 요약

SVG는 웹 디자인 세계에서 점점 더 대중화되고 있습니다. Illustrator 또는 Inkscape를 사용하여 SVG 이미지를 만들 수 있습니다. 하지만 웹 디자인을 할 때 SVG를 더 가볍게 만들기 위해 여전히 몇 가지 최적화를 수행해야 합니다.

아래에 소개된 20가지 도구를 사용하면 SVG 이미지를 빠르고 효과적으로 생성할 수 있습니다. 기존 온라인 도구는 이미 최적화, 변환, 새 모델 생성 등에 도움을 줄 수 있습니다.

자세한 소개는 CSS를 사용하여 SVG 애니메이션을 만드는 방법

을 참조하세요. ​대화형 SVG 좌표계

SVG 디자인은 좌표계와 분리될 수 없습니다. 이것은 Sara Souiden이 작성한 멋진 대화형 도구로, SVG 좌표계가 무엇인지 이해하는 데 도움이 됩니다. 아래 그림에 표시된 분홍색과 주황색 선인 SVG의 viewBox와 PreserveAspectRatio와 그 옆의 눈금자를 사용하면 던지는 과정에서 SVG 좌표가 어떻게 작동하는지 배울 수 있습니다.

b64

b64는 이미지 형식을 base64로 변환하여 최적화하는 작은 도구입니다. SVG 이미지(또는 JPG 및 PNG도 포함)를 삽입하고 결과를 CSS로 사이트에 직접 가져올 수 있습니다.

SVGO

기본 SVG에는 삭제할 수 있는 불필요한 정보가 많이 포함되어 있습니다. 이러한 정보를 삭제해도 이미지 자체에는 영향을 미치지 않습니다. 편집기 메타데이터, 주석 또는 숨겨진 노드를 제거하려면 SVGO를 사용하면 됩니다.

​npm을 통해 SVGO를 설치할 수 있습니다

​$ [sudo] npm install -g svgo

GUI 버전도 사용할 수 있어 즐겁게 드래그 앤 드래그할 수 있습니다.

SVG 세상에

SVG OMG는 SVGO 명령줄을 GUI 버전으로 패키징하여 간단히 버튼을 클릭하여 기능을 켜고 끌 수 있으며 마지막으로 이미지나 코드를 내보낼 수 있습니다.

현재 SVG

Illustrator에서 작업할 때 출력 SVG에는 불필요한 정보가 많이 포함되어 있습니다. 이 도구를 사용하면 Illustrator에서 바로 내보낸 SVG의 최적화된 버전을 얻을 수 있습니다. 이 도구는 패널에 최적화된 SVG 옵션을 추가합니다. 이제 Creative Cloud Add-ons 페이지에서 SVG를 다운로드할 수 있습니다.

SVG-PNG 변환기

출력 SVG 파일을 PNG 형식으로 변환하고 싶으십니까? 일러스트레이터 같은 앱을 열지 않고도 할 수 있나요? 이 SVG를 PNG로 변환 도구를 사용하면 PNG 형식의 출력 이미지를 얻을 수 있고 필요한 경우 PNG의 Base64 데이터 URI도 얻을 수 있습니다.

SVG 서커스

애니메이션 로딩이 멋지다고 생각했다면 이제 SVG Circus를 사용하여 SVG를 사용하여 쉽게 애니메이션을 로딩할 수 있습니다. 이 도구를 사용하면 자신만의 로더, 스피너 또는 유사한 반복 애니메이션을 만들 수 있습니다. '역할', 위치, 크기, 색상 및 기타 양식 패널을 설정한 다음 내보내서 결과를 얻습니다.

SVG 스프라이트

SVG Sprite는 여러 SVG 파일을 최적화하고 이를 전통적인 배경 CSS 스프라이트 또는 전경 이미지, SVG 스택 등을 사용하여 SVG 스프라이트 유형으로 구울 수 있는 Node.js 모듈입니다.

준

quasi를 이용하면 아래와 같이 Quasicrystal 이미지를 생성할 수 있습니다. 이 생성기는 실험적일 뿐이지만 결과는 꽤 멋집니다. 옵션 값을 변경하여 사용해보신 후 'SVG 저장' 버튼을 이용해 다운로드하실 수 있습니다.

단순한 패턴

SVG를 사용하여 패턴을 만드는 것은 결코 간단하고 재미있지 않았습니다. 이미지를 업로드하고 크기를 줄이거나 간격을 변경하고 멋진 패턴이 나올 때까지 회전하고 다시 칠해 보세요. 다운로드하기 전에 결과를 미리 볼 수 있습니다.

삼각측량 생성기

Trianglify 생성기를 사용하여 아름다운 SVG 기하학적 패턴을 만드세요. 색상, 세분성에 대한 설정을 자유롭게/변경할 수 있으며 작업할 색상 팔레트를 선택할 수 있습니다. 이 도구는 Trianglify의 GUI 버전입니다.

SVG 그라디언트

CSS를 사용하여 그라디언트를 만들 수 있다는 것을 알고 있지만 SVG를 사용하여 동일한 효과를 얻을 수도 있다는 것을 알고 계셨습니까? SVG로 그라디언트를 만드는 가장 쉬운 방법은 이 도구를 사용하는 것입니다. 시작 색상과 중지 색상을 입력하기만 하면 효과를 생성하는 코드를 얻을 수 있습니다. CSS 대체도 포함됩니다.

PSD를 SVG로 내보내기

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

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

SVG 필터

​SVG를 사용하여 이미지에 효과를 추가할 수 있다는 것을 알고 계셨나요? 색조, 채도, 흐림, 선형 색상 오버레이 및 기타 효과 등이 있습니다. 이는 이러한 효과를 시각화한 다음 프로젝트에 효과를 쉽게 삽입할 수 있는 작은 조각을 제공하는 도구입니다.

SVG 형태

SVG Morpheous는 SVG 아이콘을 한 모양에서 다른 모양으로 변경할 수 있는 JavaScript 라이브러리입니다. 느슨해짐 효과, 전환 애니메이션 지속 시간, 회전 방향을 설정할 수 있습니다.

클립 경로 생성기

SVG를 사용하면 이미지 모양을 클릭하여 다듬을 수 있습니다. 모양이 정사각형이나 원형 안에 있으면 꽤 간단합니다. 하지만 그 모양이 많은 상점이나 다각형으로 이루어진 모양이라면 어떨까요? 이것이 바로 클립 경로 생성기 도구를 찾아야 하는 이유입니다.

​Chartist.js

Chartist.js는 고도로 사용자 정의 가능한 반응형 차트를 생성하기 위한 라이브러리입니다. SVG를 활용하여 차트를 표시하고 SMIL 애니메이션도 사용할 수 있습니다. 이 라이브러리를 사용하면 선형 차트, 원형 차트, 히스토그램 및 기타 유형의 차트를 만들고 차트에 애니메이션을 추가할 수도 있습니다.

SVG 스트로크 대시 생성기

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

Method Draw: 간단한 SVG 편집기

Method draw는 도구 옆에 직관적인 인터페이스를 갖춘 웹 기반 SVG 편집기입니다. 선, 도형을 그리고 텍스트를 입력하거나 내장된 도형을 사용한 다음 그림의 속성을 편집할 수 있습니다. 이미지를 SVG 형식으로 내보내거나(SVG base64 형식으로 변환 가능) PNG로 직접 저장하세요.

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

더 이상 인기가 없어도 플래시를 놓기 어려울 때가 있습니다. 그렇다면 플래시 애니메이션을 SVG로 만들어 최신 기술로 계속 작업할 수 있습니다. 이 도구는 확장 가능한 형태로 Flash 애플리케이션을 구성하고 CS5, CS5 및 CC에서 작동합니다.

모양, 비트맵 기호, 클래식 모션 트윈, 모양 트윈이 되면 SVG로 내보낼 수 있습니다(다른 경우 성공 여부는 논쟁의 여지가 있음).

위 내용은 더 나은 이미지 처리를 제공하는 SVG 도구 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!