📐 SVG 최적화 도구

소개

Inkscape·Adobe Illustrator·Figma 같은 툴에서 내보낸 SVG 파일에는 sodipodi:·inkscape: 같은 편집기 전용 네임스페이스, 메타데이터 블록, XML 주석, 불필요한 공백 등 눈에 보이지 않는 오버헤드가 많습니다. 이 도구는 브라우저 내장 DOM 엔진으로 SVG를 파싱하고 그 오버헤드만 보수적으로 제거합니다. 좌표·색상·패스 데이터는 절대 변경하지 않으므로 최적화 전후 그래픽이 동일하게 보입니다. 정리된 파일을 다운로드하기 전에 나란히 표시되는 크기 비교와 라이브 미리보기로 시각적 변화가 없음을 직접 확인할 수 있습니다.

사용 방법

1. SVG 마크업을 입력 상자에 붙여넣거나, 파일 불러오기를 클릭해 기기에서 .svg 파일을 여세요.
2. 최적화 버튼을 클릭하면 DOM 기반 정리기가 실행되어 주석, 메타데이터, Inkscape/Sodipodi 편집기 요소가 제거됩니다.
3. 최적화 전후 크기 비교를 확인하고 라이브 SVG 미리보기로 그래픽이 시각적으로 동일한지 검토하세요.
4. 최적화된 SVG 코드를 직접 복사하거나 다운로드를 클릭해 정리된 .svg 파일을 기기에 저장하세요.

자주 묻는 질문

최적화 후 SVG 모양이 바뀌나요?

아니요. 이 도구는 눈에 보이지 않는 오버헤드(주석, 메타데이터, 편집기 전용 요소)만 제거하고 공백을 정리합니다. 패스, 도형, 색상, 변환은 절대 변경되지 않습니다.

어떤 편집기 전용 잔재를 제거하나요?

Inkscape·Sodipodi 네임스페이스 요소 및 속성, RDF/더블린 코어 메타데이터, XML 주석, 태그 사이의 불필요한 공백을 제거합니다. 내보낸 SVG에서 가장 흔히 발생하는 용량 낭비 원인들입니다.

SVG 코드가 서버로 전송되나요?

아니요. 모든 파싱과 정리는 브라우저 내부의 DOM API를 사용해 완전히 처리됩니다. SVG 코드가 기기 밖으로 전송되지 않습니다.

파일 크기를 얼마나 줄일 수 있나요?

절약량은 소스에 따라 다릅니다. 메타데이터가 가득한 Inkscape 파일은 보통 10~40% 줄어듭니다. 이미 최적화된 파일은 2~5% 정도만 줄 수 있습니다. 도구는 매 실행 후 정확한 바이트 수와 절약 비율을 표시합니다.

Figma나 Adobe Illustrator에서 내보낸 SVG에도 사용할 수 있나요?

네. 이 최적화 도구는 어떤 소스의 SVG에도 사용할 수 있습니다. Figma 내보내기는 이미 꽤 깔끔해 절약량이 적습니다. Illustrator 내보내기에는 임베디드 폰트나 ICC 프로파일이 포함되는 경우가 많은데, 보수적인 이 도구는 이를 의도적으로 그대로 유지합니다.