SVG가 커지는 이유
Illustrator·Inkscape·Figma 등에서 내보낸 SVG에는 그림과 무관한 정보가 붙습니다. 생성기 주석, XML 선언, 편집기 전용 네임스페이스 속성(inkscape:label, sodipodi:docname), RDF 메타데이터, 레이어를 감싸던 빈 <g>, 그리고 12.345678901처럼 화면에서 구분되지 않는 긴 소수점입니다. 아이콘 하나가 10KB를 넘는다면 대부분 이런 부분이며, 실제 패스는 1~2KB인 경우가 흔합니다. 이 도구는 그 군더더기를 정규식과 XML 파서로 걷어냅니다. 처리는 브라우저에서만 이루어집니다.
무엇을 지우고 무엇을 남기나
제거: 주석, XML 선언·DOCTYPE, <metadata>, 편집기 속성과 네임스페이스, version·baseProfile, 빈 그룹, 태그 사이 공백, 어디서도 참조되지 않는 id. 유지: xmlns(없으면 추가), viewBox, 모든 시각 속성, xlink:href·url(#…)·href="#…"로 참조되는 id, 그리고 기본 설정에서는 <title>·<desc>입니다. title과 desc는 스크린 리더가 읽는 대체 텍스트이므로 인라인 SVG로 쓸 때는 남기고, CSS 배경이나 <img>로 쓸 때만 지우는 것이 좋습니다.
소수점 반올림의 기준
viewBox가 0 0 24 24인 아이콘에서 소수 둘째 자리는 화면 픽셀의 1/100 미만이라 눈에 보이지 않습니다. 하지만 viewBox가 0 0 1 1처럼 아주 작거나, 좌표 대비 세밀한 곡선이 많으면 반올림이 모양을 바꿀 수 있습니다. 결과 미리보기 두 장을 비교해서 다르면 자리를 늘리세요. 숫자 뒤에 단위(px, %, em)가 붙은 값은 건드리지 않습니다.
전용 도구와의 차이
SVGO는 문서를 트리로 분석해 패스 명령을 상대좌표로 바꾸고, 겹치는 transform을 좌표에 적용하고, #ffffff를 #fff로 줄이는 등 수십 가지 최적화를 합니다. 이 도구는 그중 안전하고 되돌리기 쉬운 텍스트 수준 작업만 하므로 감소율은 보통 30~60% 선입니다. 빌드 파이프라인이 있다면 SVGO를, 파일 몇 개를 빨리 정리하려면 이 도구를 쓰면 됩니다.
자주 묻는 질문
정리 후 그림이 달라졌어요.
소수점 반올림이 원인일 가능성이 큽니다. "반올림 안 함"으로 바꿔 확인하고, 그래도 다르면 CSS 스타일 블록의 id 선택자가 제거된 id를 가리키는지 확인해 주세요. id 제거 옵션을 끄면 됩니다.
gzip으로 어차피 압축되는데 필요한가요?
공백은 gzip이 잘 줄이지만 메타데이터와 긴 소수점은 압축 후에도 남습니다. 인라인 SVG는 HTML 파싱 시간에도 영향이 있어 정리해 두는 편이 낫습니다.
애니메이션이나 스크립트가 든 SVG도 되나요?
태그는 그대로 두지만 CDATA 안의 코드 공백까지 줄이므로 스크립트가 깨질 수 있습니다. 그런 파일은 사용하지 않는 것이 안전합니다.