디자인 툴에서 내보낸 SVG는 필요한 것보다 5~10배 큰 경우가 많습니다. 그 무게는 에디터 메타데이터, 숨은 레이어, 말도 안 되는 좌표 정밀도 — 브라우저가 전혀 필요로 하지 않는 것들입니다.
빠른 해결: SVGO
SVGO는 표준 SVG 최적화 도구입니다. npx로 설치 없이 바로 실행할 수 있습니다:
# optimize a single file (overwrites it)
npx svgo icon.svg
# optimize a whole folder
npx svgo -f ./icons일반적인 에디터 출력물에서는 SVGO만으로도 눈에 띄는 변화 없이 파일 크기를 40~70% 줄이는 경우가 많습니다.
무엇이 파일을 무겁게 하나
- 에디터 메타데이터 —
<!-- Generator -->주석,sodipodi/inkscape네임스페이스, XML 선언. - 좌표 정밀도 —
d="M12.000001 …"같은 path; 소수점 2~3자리면 충분합니다. - 숨거나 빈 요소 — 보이지 않는 레이어, 빈 그룹, 사용하지 않는
<defs>. - 반복되는 인라인 스타일 — 종종 표현 속성 하나로 줄일 수 있습니다.
CSS/JS가 쓰는 id, 접근성에 필요한 <title>, viewBox를 자동 제거하지 않도록 주의하세요. SVGO는 설정 가능하니 의존하는 것을 제거하는 플러그인은 끄세요.
수동 정리
- 내보내기 전에 에디터에서 아트워크를 평탄화하세요(레이어 병합, 필요하면 선 확장).
- 캔버스를 아이콘에 딱 맞게 잘라 viewBox가 과하게 크지 않게 하세요.
- 사용하지 않는 그라디언트·필터·마스크를 제거하세요.
Icony의 아이콘은 원본 라이브러리에서 온 이미 깔끔하고 최소화된 SVG라, 복사하거나 내보낼 때 추가로 최적화할 것이 거의 없습니다.