SVG 최적화기

SVG 최적화기란?

SVG 최적화기는 손으로 쓰거나 내보낸 SVG를 배포 전에 가볍게 만들고 싶은 웹 디자이너, 아이콘 제작자, 프론트엔드 개발자를 위한 무료 브라우저 내 도구입니다. 벡터 에디터는 보이지 않는 무게를 잔뜩 붙입니다: XML 주석, 메타데이터 블록, Inkscape·Sodipodi·Illustrator 네임스페이스 속성, 불필요한 소수 자릿수, 자식이 없는 래퍼 그룹 등입니다. 이 도구는 브라우저 자체의 DOMParser로 마크업을 파싱하고, 켜 둔 정리 단계를 적용한 뒤 더 짧은 SVG로 다시 직렬화합니다. 설정에서 각 단계를 켜고 끄고, 좌표 반올림 자릿수를 정하고, 전·후·절감 통계로 효과를 확인하세요. 인라인 SVG 아이콘, 스프라이트 시트, 로고, 일러스트를 가볍게 하거나 코드에 붙여 넣기 전에 지저분한 마크업을 정리하는 데 활용하세요.

SVG 최적화기 사용법

1. SVG 원문을 입력 칸에 붙여 넣거나 연결합니다.
2. 설정을 열어 실행할 정리 단계를 고릅니다: 좌표 반올림, 주석 제거, 메타데이터·에디터 속성 제거, 빈 그룹 제거.
3. 좌표 반올림이 켜져 있으면 정밀도(소수 0~5자리)를 설정해 크기와 정확도의 균형을 맞춥니다.
4. 전·후·절감 크기 통계를 보고 결과가 얼마나 작아졌는지 확인합니다.
5. 출력 칸에서 최적화된 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"><g></g><circle cx="5" cy="5" r="3"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3"/></svg>

자주 묻는 질문

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

켠 토글에 따라 다릅니다: XML 주석, <metadata>·<title>·<desc> 요소, 에디터 전용 네임스페이스 속성(Inkscape·Sodipodi·Illustrator 등), 자식이 없는 그룹(<g>)을 제거합니다. 또한 수치 속성과 path 데이터를 지정한 소수 자릿수로 반올림할 수도 있습니다.

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

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

가능한 가장 작은 파일을 보장하나요?

아니요. 안전한 구조적 정리(주석·메타데이터·에디터 속성·빈 그룹·좌표 반올림)는 수행하지만, path 병합이나 스타일 압축, 무거운 라이브러리가 하는 모든 변환까지는 하지 않습니다. 대부분의 아이콘과 내보내기에서는 절감 통계에 표시되는 효과가 상당합니다.

SVG가 유효하지 않으면 어떻게 되나요?

마크업을 SVG로 파싱할 수 없으면 오류 메시지가 표시되고 출력이 생성되지 않습니다. 마크업을 고치면(예: 태그 짝 맞추기) 결과가 자동으로 갱신됩니다.

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

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