무료 온라인 SVG Optimizer
SVG 파일을 온라인으로 최적화, 압축, 정리합니다. Inkscape/Illustrator 메타데이터, 주석, 빈 그룹, 불필요한 속성을 제거하고 결과를 즉시 미리 봅니다. 무료, 100% 클라이언트 사이드.
100% 클라이언트 사이드 · 데이터는 브라우저를 절대 벗어나지 않습니다Optimization Options
사용 방법 SVG Optimizer
SVG 코드를 Input SVG 패널에 붙여넣고 최적화 옵션을 선택한 후 Optimize를 클릭하거나 Ctrl/Cmd+Enter를 누르세요.
- 주석 제거 —
<!-- ... -->주석 블록을 제거합니다. - 메타데이터 제거 — Inkscape/Illustrator가 삽입한
<metadata>요소를 제거합니다. - 편집기 속성 제거 —
inkscape:*,sodipodi:*,data-name속성과 네임스페이스 선언을 삭제합니다. - 공백 압축 — 속성값과 태그 사이의 여분 공백 및 줄바꿈을 정규화합니다.
- 빈 그룹 제거 — 자식 요소가 없는
<g></g>요소를 제거합니다. - 숫자 반올림 — 경로
d좌표의 소수 정밀도를 줄입니다(예: 123.456789 → 123.46).
통계 바에 원본 크기와 최적화 크기, 절감률이 표시됩니다. Format으로 압축된 SVG를 보기 좋게 정렬할 수 있습니다. Ctrl/Cmd+K로 초기화합니다.
자주 묻는 질문
SVG 최적화는 무엇을 하나요?
SVG 최적화는 렌더링에 불필요한 데이터를 제거합니다: 편집기 메타데이터, XML 주석, 빈 컨테이너 요소, 중복 네임스페이스 선언, 과도한 공백. 경로 데이터의 지나치게 정밀한 소수점 숫자도 반올림합니다. 결과는 모든 브라우저에서 동일하게 렌더링되지만 파일 크기가 작습니다.
Inkscape나 Illustrator의 SVG에 왜 불필요한 데이터가 많은가요?
Inkscape와 Adobe Illustrator는 편집 상태를 보존하기 위해 전용 네임스페이스 속성(inkscape:*, sodipodi:*, ai:*)과 메타데이터 블록을 삽입합니다: 레이어 이름, 그리드 설정, 폰트 정보, 문서 속성 등. 편집기에서는 필요하지만 브라우저 렌더링에는 무관합니다.
최적화하면 SVG 모양이 바뀌나요?
이 도구의 옵션은 시각적으로 무손실이 되도록 설계되었습니다. 주석, 메타데이터, 편집기 속성 제거는 렌더링 결과에 영향을 주지 않습니다. 경로 숫자를 소수점 2자리로 반올림하는 것은 일반 표시 크기에서는 식별할 수 없습니다(오차 0.01px 미만). 배포 전 항상 출력을 미리 보세요.
경로 데이터 정밀도가 왜 파일 크기에 영향을 주나요?
드로잉 도구는 보통 6~10자리 소수점으로 경로 좌표를 내보내지만, 웹 표시에는 1~2자리면 충분합니다. 복잡한 일러스트에서는 많은 경로 세그먼트를 반올림하면 문자 수가 크게 줄어듭니다.
안전한 최적화와 안전하지 않은 최적화의 차이는 무엇인가요?
안전한 최적화는 시각적 출력을 보존합니다: 주석, 메타데이터, 편집기 속성, 빈 그룹 제거. 안전하지 않은 최적화는 외관을 바꿀 수 있습니다: viewBox 속성 제거, CSS가 덮어쓰는 색상 변경, JavaScript가 참조하는 id 속성 제거. 이 도구는 안전한 최적화만 적용합니다.
SVGO와 비교하면 어떤가요?
SVGO는 고급 경로 병합 등 수십 개의 플러그인을 갖춘 업계 표준 Node.js 최적화 도구입니다. 이 브라우저 도구는 설치 없이 가장 효과적인 최적화를 제공합니다. 프로덕션 빌드 파이프라인에는 SVGO 또는 svgo Vite/webpack 플러그인을 권장하며, 이 도구는 단발성 파일에 이상적입니다.