네 SVG는 필요한 것보다 10배 커

Illustrator에서 아이콘을 내보내. 파일 크기 확인. 텍스트 에디터에서 열어.

찾을 거야: 아무도 필요 없는 메타데이터, 15자리 소수점, 빈 그룹, 에디터 전용 찌꺼기, 2019년 주석. 간단한 로고가 3KB일 수 있는데 50KB 무게.

SVG는 그냥 XML이야. 모든 불필요한 문자가 사용자가 다운로드하는 바이트야.

디자인 도구가 추가하는 것

Illustrator, Figma, Sketch—모두 추가 데이터를 임베드해:

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

렌더링에 필요한 건 하나도 없어. 디자인 도구가 파일을 제대로 다시 열기 위한 메타데이터야.

정밀도 문제

디자인 도구는 높은 정밀도 좌표를 써:

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

브라우저는 어차피 약 1-2 소수점으로 반올림해. 그 모든 자릿수는 낭비된 바이트야.

더 나은:

<path d="M12.37,45.29 L67.29,89.37"/>

같은 시각 결과, 크기의 일부.

빈 그룹과 ID

내보내기가 종종 이런 구조를 만들어:

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

하나의 path를 담으려고 세 개의 중첩된 그룹. 각 그룹이 바이트를 추가해. 뭔가 하지 않으면 제거해 (변환이나 스타일 적용처럼).

ID도 비슷해. 모든 요소의 id="XMLID_847_"가 쌓여. CSS나 JavaScript에서 참조하는 ID는 유지해. 나머지는 제거해.

최적화할 것

메타데이터 제거. 주석, 에디터 정보, 안 쓰는 네임스페이스.

정밀도 줄이기. 2-3 소수점이 보통 충분해.

그룹 평평하게. 불필요한 중첩은 목적이 없어.

ID 정리. 참조된 건 유지하고, 자동 생성된 쓰레기는 제거.

path 병합. 하나의 path일 수 있는 여러 path는 결합되어야 해.

숨겨진 요소 제거. 디자인 도구에서 숨겼지만 삭제하지 않은 레이어.

파일 크기를 유지할 때

때때로 더 큰 게 맞아:

애니메이션. ID랑 그룹이 종종 애니메이션 대상으로 쓰여. 맹목적으로 제거하지 마.

CSS 스타일링. 외부 CSS로 SVG를 스타일링하면 그 ID랑 클래스가 필요해.

미래 편집. 극도로 최적화된 SVG는 편집하기 어려워. 소스 파일 유지하고, 프로덕션 버전을 최적화해.

비교

간단한 아이콘, 최적화 전:

원본: 24KB
메타데이터 제거 후: 8KB
정밀도 줄인 후: 4KB
구조 정리 후: 2KB

12배 작아. 더 빨리 로드돼. 더 빨리 파싱돼. 모든 페이지 로드, 모든 사용자.

인라인 vs 외부

작은 SVG (최적화돼서 1KB 미만)는 종종 HTML에 직접 인라인하는 게 가장 잘 작동해. 추가 HTTP 요청 없음.

더 큰 SVG나 재사용되는 아이콘은 캐시될 수 있는 외부 파일로 더 잘 작동해.

균형점은 상황에 달렸어. 일반적으로: SVG를 한 번만 쓰고 작으면 인라인해. 반복적으로 쓰거나 복잡하면 외부 파일.

---

SVG 최적화는 무료 성능이야. 배송 전에 아이콘을 최적화기를 통과시켜. 초가 걸리고, 모든 페이지 로드에서 영원히 바이트를 절약해.