SVG 최적화 및 압축기

Illustrator, Inkscape, Figma, Sketch에서 내보낸 SVG에는 브라우저가 쓰지 않는 것이 많이 들어 있습니다. XML 선언, DOCTYPE, 편집기 주석, metadata 블록, 그리고 sodipodi나 inkscape처럼 원래 프로그램만 이해하는 네임스페이스 속성 등입니다. 아이콘 하나라면 몇 KB에 불과하지만, 사이트에 아이콘이 수십 개 있거나 SVG를 HTML에 직접 넣으면 이런 군더더기가 로딩을 늦추고 코드도 읽기 어렵게 만듭니다.

이 도구에는 하나씩 켜고 끌 수 있는 다섯 가지 정리 항목이 있습니다. 주석 제거, XML 선언과 DOCTYPE 제거, metadata와 sodipodi·inkscape 같은 에디터 전용 요소 제거, 에디터 속성과 사용하지 않는 네임스페이스 선언 제거, 태그 사이 공백과 연속 공백 압축입니다. 처리 후에는 원본과 최적화 결과 미리보기를 나란히 보여 주고 파일 크기와 절감 비율도 표시하므로, 확인한 뒤 코드를 복사하거나 새 .svg 파일을 내려받으면 됩니다.

이 도구는 보수적인 텍스트 정리 방식을 사용해 경로 데이터를 다시 쓰거나 좌표를 반올림하거나 도형을 합치지 않으므로 겉모습은 거의 바뀌지 않습니다. 대신 경로를 다시 쓰는 SVGO 같은 도구보다 줄어드는 양은 보통 작습니다. 네임스페이스 선언은 사용되지 않을 때만 제거합니다. 예를 들어 파일에 xlink:href가 남아 있으면 xmlns:xlink는 유지되므로 단독 .svg 파일도 정상적으로 표시됩니다. 공백 압축은 <text>(안의 <tspan> 포함), <style>, <script> 내용은 건드리지 않고 xml:space="preserve"도 남기므로 글자 간격과 CSS가 바뀌지 않습니다. 정규식으로 처리하므로 특이한 마크업을 쓰는 파일은 미리보기를 비교한 뒤 사용하세요.

모든 처리는 브라우저에서 이루어지며 파일은 업로드되지 않습니다. 일부 SNS나 Office 문서처럼 벡터를 받지 않는 곳에 쓰려면 이 사이트의 이미지 형식 변환 도구로 PNG로 바꾸세요.