SVG 최적화기

SVG 최적화기란?

SVG 최적화기는 손으로 쓰거나 내보낸 SVG를 배포 전에 가볍게 만들려는 웹 디자이너·아이콘 제작자·프론트엔드 개발자를 위한 무료 브라우저 도구입니다. 벡터 에디터는 보이지 않는 무게를 붙입니다: XML 주석, 메타데이터, Inkscape/Sodipodi/Illustrator 속성, 불필요한 소수, 무의미한 transform, 래퍼 그룹, 아무 데서도 참조하지 않는 ID·defs. 설정에서 각 정리를 켜고 끈 뒤 마크업을 붙여 넣거나 .svg 파일을 드롭하면 원본과 최적화 렌더가 나란히 갱신되고, 이전·이후·절감·gzip·brotli 통계로 효과를 확인합니다. 결과를 복사하거나 .min.svg로 내려받으세요. 인라인 아이콘·스프라이트·로고·일러스트를 가볍게 하는 데 씁니다.

SVG 최적화기 사용법

1. SVG를 붙여 넣거나 .svg 파일을 드롭/업로드하면 마크업이 입력 칸에 채워집니다.
2. 설정을 열어 원하는 정리를 골라 켜세요: 좌표 반올림, 주석 제거, 메타데이터·에디터 속성, 빈 그룹, 미사용 ID·defs, transform 정리, 인라인 스타일 최소화, hex 축약, 기본값 제거, 공백 최소화.
3. 좌표 반올림이 켜져 있으면 정밀도(소수 0~5자리)를 설정합니다.
4. 원본과 최적화 렌더를 나란히 비교해 그림이 그대로인지 확인합니다.
5. 이전·이후·절감·gzip·brotli 통계로 실제 크기 절감을 확인합니다.
6. 최적화된 SVG를 복사하거나 .min.svg 파일로 내려받습니다.

예시

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

자주 묻는 질문

최적화기는 정확히 무엇을 제거하나요?

해당 토글을 켜면: XML 주석, <metadata>·<title>·<desc> 요소, 에디터 네임스페이스 속성(Inkscape·Sodipodi·Illustrator), 빈 그룹, 아무 데서도 참조하지 않는 ID, 참조되지 않는 <defs>를 제거합니다. 또한 수치 속성·path 데이터 반올림, 무의미한 transform 정리, style 속성·<style> CSS 최소화, hex 색상 축약(#ffffff→#fff), fill-opacity="1" 같은 기본 표현 속성 제거도 합니다.

좌표를 반올림하면 SVG 모양이 바뀌나요?

낮은 정밀도로 반올림하면 점이 아주 작은 단위만큼 이동할 수 있는데, 보통 눈에 띄지 않으면서 파일은 작아집니다. 정확한 형상이 필요하면 정밀도를 높이고(최대 5자리), 숫자를 그대로 두려면 좌표 반올림을 끄세요.

파일을 불러와 결과를 미리 볼 수 있나요?

네. .svg 파일을 드롭·업로드하거나 마크업을 붙여 넣으면 원본과 최적화 렌더가 나란히 표시돼 깨진 부분을 바로 알 수 있습니다. 그런 다음 결과를 복사하거나 최적화된 .min.svg로 내려받으세요 — 업로드 없이 파일은 로컬에서만 읽힙니다.

Gzip·Brotli 수치는 무엇인가요?

Gzip 크기는 최적화된 SVG를 브라우저에서 실제로 압축해 잰 값이라 gzip 연결에서 오가는 실제 바이트를 반영합니다. Brotli 수치는 그 gzip 크기에서 추정한 값입니다(brotli는 보통 텍스트를 조금 더 작게 압축). 실제 brotli 인코더는 번들에 넣기엔 무거워 물결표(≈)로 표시합니다.

제 SVG가 어딘가로 업로드되나요?

아니요. 파싱·정리·크기 측정·직렬화 모두 브라우저 내장 DOMParser로 로컬에서 이뤄집니다. 서버로 아무것도 전송되지 않아 오프라인에서도 작동하고 작업물이 비공개로 유지됩니다.