svgtools
무료 · 100% 브라우저 처리 · 광고 없는 기능

SVG 최적화·변환 도구

SVG 파일을 브라우저에서 바로 최적화하고 React·Vue·Svelte 컴포넌트, PNG, WebP, 스프라이트로 변환하세요. 일괄 처리와 컬러 추출까지 한 화면에서 끝낼 수 있습니다.

  • SVGO 기반 최적화 — 플러그인을 토글하며 결과 즉시 확인
  • 한 번에 수백 개의 SVG를 일괄 처리하고 ZIP으로 다운로드
  • React(JSX/TSX), Vue SFC, Svelte 컴포넌트로 즉시 변환
  • PNG·WebP 변환, 스프라이트 생성, 컬러 팔레트 추출 지원
  • 파일은 절대 서버로 업로드되지 않습니다 — 100% 클라이언트 처리

svgtools 한 줄 요약

svgtools는 브라우저에서 바로 동작하는 SVG 종합 도구입니다. SVGO 기반의 무손실 최적화부터 React·Vue·Svelte 컴포넌트 변환, 컬러 팔레트 추출과 일괄 리컬러링, 스프라이트 생성, PNG·WebP 변환까지 한 페이지에서 처리할 수 있습니다. 모든 처리는 클라이언트(여러분의 브라우저) 안에서만 이루어지며, 파일은 어디에도 업로드되지 않습니다. 회원가입이나 결제 없이 모든 기능을 무료로 쓸 수 있습니다.

왜 SVG를 최적화해야 하나요?

SVG는 텍스트 기반 포맷이라 잘 정리되면 매우 가볍지만, Figma·Illustrator·Sketch 에서 그대로 내보낸 파일에는 에디터 메타데이터, 사용되지 않는 ID, 중복 네임스페이스, 주석, 사람이 읽을 일이 없는 고정밀 좌표가 잔뜩 들어 있습니다. SVGO는 이런 정보를 무손실로 제거하고 일반적으로 30~60%의 용량을 줄입니다. 아이콘이 수십 개 들어가는 마케팅 사이트라면 LCP(Largest Contentful Paint) 지표가 눈에 띄게 개선되며, 모바일·저속 네트워크 환경일수록 효과가 큽니다.

일반적인 사용 흐름

  1. 드래그 또는 붙여넣기. SVG 한 개, 폴더, 또는 수백 개의 파일을 한 번에 올릴 수 있습니다. 마크업을 직접 붙여넣어 일회성 편집을 하는 것도 지원합니다.
  2. SVGO 플러그인 조정. 각 플러그인을 개별적으로 켜고 끌 수 있고, 자주 쓰는 조합은 프리셋으로 저장해 다음 배치에서 그대로 재사용할 수 있습니다.
  3. 결과 확인. 파일별 원본 용량·최적화 후 용량·절감률을 보여주며, 드물게 결과 용량이 오히려 커진 파일은 따로 표시됩니다.
  4. 내보내기. 단일 SVG, 전체 배치 ZIP, React/Vue/Svelte 컴포넌트, 스프라이트, PNG/WebP 래스터 중 원하는 형태로 다운로드할 수 있습니다.

도구 한눈에 보기

  • 일괄 SVG 최적화 — 한 번에 수백 개의 파일을 동일한 SVGO 설정으로 처리하고, 파일별 절감률을 보여줍니다.
  • SVG to React — JSX/TSX 컴포넌트로 변환하며, 하이픈 속성을 카멜케이스로 바꾸고 타입이 적용된 props 스프레드를 자동으로 삽입합니다.
  • SVG to Vue — Vue 3 SFC를 생성합니다. Nuxt와 Composition API 코드베이스에서 그대로 사용할 수 있습니다.
  • SVG 컬러 추출 — SVG 내부의 모든 색상을 나열하고 시각적으로 리컬러링하거나, 하드코딩된 hex 값을 CSS 변수로 변환해 테마링을 적용할 수 있습니다.
  • SVG 스프라이트 생성 — 아이콘 세트를 하나의 최적화된 스프라이트로 묶고, 복사해서 바로 쓸 수 있는<use> 마크업을 함께 제공합니다.

프라이버시 우선 설계

svgtools에는 SVG 처리를 위한 백엔드 서버가 의도적으로 존재하지 않습니다. 최적화기, 변환기, 래스터라이저 모두 SVGO·@svgr/core·JSZip 같은 라이브러리의 WebAssembly 또는 JavaScript 포트를 사용해 브라우저에서 직접 실행됩니다. 파일은 절대 외부로 전송되지 않으며, 사용자 계정도 존재하지 않습니다. 영구 저장되는 항목은 SVGO 플러그인 설정·테마·언어 같은 사용자 환경 설정뿐이고, 모두 localStorage에 저장됩니다. 자세한 내용은 개인정보처리방침을 참고하세요.

SVGOMG와의 차이

SVGOMG는 SVGO의 공식 온라인 프런트엔드로, 단일 파일 최적화에는 매우 훌륭한 도구입니다. svgtools는 SVGOMG가 다루지 않는 영역을 보완합니다 — 폴더 단위의 일괄 처리, 빌드 도구 없이 React·Vue 컴포넌트 내보내기, 컬러 팔레트 편집, 스프라이트 생성 같은 작업이죠. 로고 한 장만 가볍게 줄이고 싶다면 SVGOMG가 더 빠른 선택이고, 아이콘 세트를 운영하거나 SVG를 프런트엔드 코드베이스에 통합하는 작업이 잦다면 svgtools가 그 워크플로에 맞춰져 있습니다.

비용과 라이선스

svgtools는 무료입니다. 회원가입, 사용량 제한, 유료 등급이 없습니다. 사이트 운영비는 광고로 충당하며 (자세한 쿠키·추적 정책은 개인정보처리방침에 정리되어 있습니다), 도구가 마음에 드신 분들의 후원으로도 일부 보전됩니다. 유료 결제로 잠겨 있는 기능은 단 하나도 없습니다.

자주 묻는 질문

내 SVG 파일이 서버로 업로드되나요?

아니요. 모든 처리는 브라우저 안에서만 일어납니다. 파일은 어디에도 전송되지 않으며, 탭을 닫으면 메모리에서 즉시 사라집니다.

한 번에 몇 개까지 처리할 수 있나요?

고정된 제한이 없습니다. 기기 성능에 따라 다르지만 일반적인 노트북에서 수백 개의 SVG를 한 번에 최적화하고 ZIP으로 받을 수 있습니다.

SVGOMG와 무엇이 다른가요?

SVGOMG는 단일 파일 처리만 지원하지만 svgtools는 일괄 처리, React·Vue·Svelte 컴포넌트 변환, PNG/WebP 변환, 컬러 추출, 스프라이트 생성까지 한 곳에서 제공합니다.

무료인가요?

네, 완전 무료입니다. 회원가입이나 로그인이 필요 없으며 광고 없이도 모든 기능을 사용할 수 있습니다.

오프라인에서 동작하나요?

처음 한 번 로드한 뒤에는 인터넷 연결이 끊겨도 최적화·변환 기능 모두 그대로 동작합니다.

관련 도구