SVG 최적화 도구

Illustrator, Inkscape, Figma, Sketch에서 내보낸 SVG 파일에는 브라우저가 쓰지 않는 내용이 많습니다. 편집기 설정, 메타데이터, 주석, 긴 소수, 숨겨진 레이어, 빈 그룹 등입니다. 이 최적화 도구는 그것들을 제거하고 좌표를 고른 정밀도로 반올림합니다. 예를 들어 편집기 데이터와 소수 여섯 자리 좌표가 있는 Inkscape식 그림은 눈에 띄는 변화 없이 2.5 KB에서 1.0 KB(59%)로 줄어듭니다. 정리된 파일, HTML에 붙여 넣을 코드, 미리보기, 최적화 전후 크기를 받을 수 있습니다. 신중한 정리 도구이며 SVGO 전체 파이프라인은 아니고, 모두 브라우저 안에서 실행됩니다.

사용 방법

1. SVG 파일을 하나 이상 고르거나 SVG 코드를 붙여 넣습니다.
2. 좌표의 소수 자릿수를 정합니다(대부분의 아이콘에는 2가 적당합니다).
3. 정리 옵션은 켜 둡니다. 스크립트나 스타일시트가 ID를 쓴다면 “ID 제거”를 끄세요.
4. 미리보기를 원본과 비교합니다.
5. 최적화된 파일을 받거나 코드를 복사합니다.

계산식

절약 % = (1 − 최적화 후 바이트 ÷ 원본 바이트) × 100

숫자는 고른 소수 자릿수로 반올림합니다(변환 값은 두 자리 더 유지). 경로 데이터에서는 모든 상대 명령을 이미 반올림된 현재 점에서 실제 끝점까지 다시 측정하므로, 긴 경로를 따라 반올림 오차가 쌓이지 않습니다. 기본값은 상속되는 속성이므로 어느 부모 요소도 같은 속성을 지정하지 않을 때만 제거하며, <symbol>이나 <use>가 복사하는 내용(<use> 요소에서 상속받음) 안에서는 제거하지 않습니다. 파일에 <style> 시트가 있으면 기본값과 단순 그룹을 유지합니다. 무엇이든 참조하는 ID(url(#…), href, aria-labelledby, CSS, 스크립트)와 <symbol> 요소의 ID는 남겨 두므로 아이콘 스프라이트도 계속 작동합니다.

예시

경로 M 10.00001 10 L 20.12345 20.98765 l 5.55555 5.55555 z, fill="#FFFFFF", Inkscape 레이어 래퍼가 있는 내보낸 아이콘은 M10 10 20.12 20.99l5.56 5.55z와 fill="#fff"로 바뀌고, 래퍼, 메타데이터, 편집기 속성은 사라집니다. 이 예시의 686바이트 파일 전체가 215바이트로 68.7% 작아지고 렌더링 결과는 같습니다.