SVG 파일의 변환·최적화·편집·애니메이션과 SVG 아이콘·일러스트·배경 리소스를 다루는 웹 서비스와 개발 도구를 모았습니다. 확대해도 선명한 벡터를 웹에서 쓰고 다듬을 때 골라 쓰도록 정리했습니다.
← 모음
SVG 도구 모음: 변환, 최적화, 편집, 아이콘
URL-encoder for SVG를 비롯해 SVG 최적화, 변환, 편집, 애니메이션 도구와 SVG 아이콘·배경 리소스를 작업 순서대로 모았다.
소스
- URL-encoder for SVGURL-encoder for SVG는 SVG 코드를 CSS background-image 등에서 인라인으로 쓸 수 있도록 URL-safe 문자열로 인코딩하는 온라인 도구이다.
- SVGOMGSVGOMG는 SVG 파일의 불필요한 정보를 제거해 용량을 줄이는 SVGO 기반 웹 도구이다.
- SVGOSVGO는 SVG 파일의 메타데이터와 불필요한 코드를 제거해 최적화하는 Node.js 기반 도구이다.
CloudConvertCloudConvert는 다양한 파일 형식을 온라인에서 변환할 수 있는 파일 변환 서비스이다.- Vectorizer.AIVectorizer.AI는 PNG와 JPG 같은 래스터 이미지를 SVG 벡터 이미지로 변환하는 온라인 서비스이다.
- SVGRSVGR은 SVG 파일을 React 컴포넌트로 변환하는 도구이다.
- Boxy SVGBoxy SVG는 브라우저에서 SVG 파일을 편집하는 벡터 편집기이다.
- SVG-EditSVG-Edit은 브라우저에서 동작하는 오픈소스 SVG 편집기이다.
FigmaFigma는 웹 기반으로 화면 디자인과 협업을 하는 디자인 도구이며, 커뮤니티에서 템플릿과 UI 키트를 공유한다.- SVGatorSVGator는 SVG에 애니메이션을 만들어 내보내는 온라인 SVG 애니메이션 도구이다.
- SVG RepoSVG Repo는 SVG 아이콘과 벡터 이미지를 검색하고 내려받는 SVG 리소스 사이트이다.
- IconifyIconify는 여러 아이콘 세트를 통합 검색하고 SVG로 사용할 수 있게 하는 아이콘 프레임워크이다.
HeroiconsHeroicons는 Tailwind CSS 팀이 제작한 오픈소스 SVG 아이콘 라이브러리로, Outline·Solid·Mini·Micro 네 가지 스타일의 아이콘을 제공한다.- unDrawunDraw는 색상을 바꿔 쓸 수 있는 오픈소스 SVG 일러스트를 제공하는 사이트이다.
- Hero PatternsHero Patterns는 반복 가능한 SVG 배경 패턴을 CSS 코드로 제공하는 사이트이다.
- HaikeiHaikei는 웨이브, 블롭, 그라데이션 같은 SVG 배경 이미지를 생성하는 웹 도구이다.
SVG와 웹에서의 사용 방식
SVG 파일을 웹에서 바로 활용하기 위해 변환이 필요한 경우가 있습니다. 확대해도 선명한 벡터를 XML 코드로 표현하며, 삽입 방식에 따라 쓰는 도구가 달라집니다.
| 방식 | 설명 |
|---|---|
| 이미지 파일 | img 태그나 CSS에서 .svg 파일을 불러와 사용 |
| 인라인 SVG | HTML 안에 SVG 코드를 직접 삽입, CSS와 자바스크립트로 제어 |
| CSS 배경 이미지 | background-image에 SVG를 인코딩한 문자열(data URI)로 삽입 |
SVG를 URL-safe 문자열로 변환
URL-encoder for SVG는 SVG 파일의 코드를 URL-safe 문자열로 변환하는 도구입니다. 인코딩한 결과는 CSS background-image 등에서 직접 사용할 수 있습니다.
- SVG 파일의 코드를 도구에 붙여 넣는다
- URL-safe 문자열로 인코딩된 결과를 복사한다
- CSS background-image 등에 복사한 문자열을 넣어 사용한다
URL-encoder for SVG는 SVG 코드를 CSS background-image 등에서 인라인으로 쓸 수 있도록 URL-safe 문자열로 인코딩하는 온라인 도구이다.
SVG 최적화
불필요한 메타데이터와 코드를 줄여 용량을 낮출 때 씁니다. 웹 화면에서는 SVGOMG, 빌드·명령줄에서는 SVGO가 맞습니다. SVGOMG는 온라인 이미지 편집 도구 모음과도 공유합니다.
| 도구 | 용도 |
|---|---|
| SVGOMG | 웹 화면에서 SVG 용량 축소 |
| SVGO | 명령줄·빌드 도구에서 SVG 최적화 |
형식 변환과 벡터화
다른 이미지 형식과 SVG를 주고받거나, 래스터를 벡터로 바꾸고, React에서 컴포넌트로 쓸 때 쓰는 도구입니다.
| 도구 | 용도 |
|---|---|
| CloudConvert | SVG와 다른 이미지 형식 상호 변환 |
| Vectorizer.AI | 래스터 이미지를 SVG로 변환 |
| SVGR | SVG를 React 컴포넌트로 변환 |
SVG 편집과 애니메이션
브라우저나 디자인 도구에서 SVG를 고치고, 애니메이션을 붙일 때 씁니다.
| 도구 | 용도 |
|---|---|
| Boxy SVG | 브라우저에서 SVG 편집 |
| SVG-Edit | 오픈소스 브라우저 SVG 편집기 |
| Figma | 벡터 디자인 후 SVG 내보내기 |
| SVGator | SVG 애니메이션 제작 |
SVG 아이콘·일러스트·배경
아이콘·일러스트를 찾거나 패턴·배경을 만들 때 쓰는 리소스입니다. unDraw는 무료 이미지 서비스 모음과도 공유합니다.
| 분류 | 도구 | 용도 |
|---|---|---|
| 아이콘·일러스트 | SVG Repo, Iconify, Heroicons, unDraw | SVG 아이콘·일러스트 검색·사용 |
| 배경 | Hero Patterns, Haikei | SVG 패턴·배경 생성 |
작업별 도구와 선택 기준
필요한 작업과 결과물 형태를 먼저 고른 뒤, 무료 범위와 라이선스를 확인합니다.
| 작업 | 도구 |
|---|---|
| URL 인코딩 | URL-encoder for SVG |
| 최적화 | SVGOMG, SVGO |
| 형식 변환·벡터화 | CloudConvert, Vectorizer.AI, SVGR |
| 편집·애니메이션 | Boxy SVG, SVG-Edit, Figma, SVGator |
| 아이콘·배경 | SVG Repo, Iconify, Heroicons, unDraw, Hero Patterns, Haikei |
| 기준 | 확인 항목 |
|---|---|
| 작업 | 인코딩, 최적화, 형식 변환, 편집, 애니메이션 |
| 사용 환경 | 웹 화면, 명령줄·빌드 도구, 프레임워크 |
| 결과물 | SVG 코드, 파일, 컴포넌트, CSS 코드 |
| 이용 조건 | 무료 범위, 아이콘·일러스트의 라이선스 조건 |
등록조회0