SVG 최적화

Illustrator, Figma, Sketch 같은 디자인 툴에서 내보낸 아이콘과 로고에는 실제 그림과는 상관없는 군더더기가 잔뜩 붙어 있습니다. 에디터가 남긴 메타데이터, XML 주석, 불필요한 group 래퍼, 소수점 열다섯 자리까지 적힌 좌표값, 아무도 참조하지 않는 id 속성 같은 것들입니다. 이런 요소는 렌더링 결과에 전혀 영향을 주지 않지만 다운로드 용량은 그대로 부풀립니다. 사이트에서 수십 개의 SVG 아이콘을 사용한다면 이 오버헤드는 금방 눈덩이처럼 불어납니다.

이 도구는 SVGOMG를 지탱하는 것과 동일한 최적화 엔진인 svgo를 브라우저 안에서 그대로 실행합니다. SVG 마크업을 붙여넣거나 파일을 끌어다 놓으면, 주석과 에디터가 남긴 찌꺼기를 제거하고 가능한 경우 path를 병합하며 중복된 group을 접고 좌표를 지정한 정밀도로 반올림합니다 — 이 모든 과정이 기기 밖으로 나가는 일 없이 이루어집니다. 업로드 단계도 서버도 없기 때문에 공개용 아이콘은 물론 아직 공개되지 않은 클라이언트 로고를 처리할 때도 마찬가지로 안전합니다.

기본 설정은 의도적으로 보수적입니다. viewBox는 그대로 유지해서 아이콘이 어디에 배치되든 올바르게 스케일되도록 하고, width/height도 그대로 남겨둡니다. "width/height 제거" 옵션은 SVG를 인라인으로 삽입하고 크기를 CSS로 지정할 때 유용한데, 루트 요소에 고정된 크기 값이 남아 있으면 스타일시트와 충돌할 수 있기 때문입니다. Multipass는 최적화를 한 번이 아니라 여러 번 반복해서 첫 번째 패스가 마크업을 단순화한 뒤에야 드러나는 추가적인 절감분까지 잡아냅니다 — 켜둔다고 해서 손해 볼 일은 거의 없습니다.

정밀도(Precision)는 path 좌표에 남길 소수 자릿수를 조절합니다. 값을 낮추면 파일이 더 작아지지만 세밀한 그림에서는 아주 미세한 시각적 오차가 생길 수 있으므로, 값을 바꾼 뒤에는 실시간 미리보기로 확인해보는 것이 좋습니다. 대부분의 아이콘과 로고는 기본 설정만으로도 눈에 띄는 차이 없이 파일 크기를 40~60% 줄일 수 있습니다 — 다운로드하기 전에 미리보기와 전/후 용량 카운터로 결과를 확인하세요.