SVG를 압축합니다

SVG를 부풀리는 요소들

Figma에서 내보낸 SVG 파일을 텍스트 편집기로 열면 일반적으로 다음과 같은 내용을 확인할 수 있습니다:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

거의 모든 줄을 제거할 수 있습니다. 렌더링 결과에는 svg, viewBox, path만 있으면 됩니다.

최적화 도구가 제거하는 항목

주의할 점

• ID를 삭제하지 마세요. 채우기(fill), 마스크, 필터의 url(#...)이나 CSS에서 참조하는 ID가 대상입니다. 강력 모드에서는 그라디언트가 깨질 수 있습니다.
• viewBox를 유지하세요. 이 항목이 없으면 SVG가 반응형으로 크기 조정되지 않습니다.
• <title>을 유지하세요. 접근성을 위해 사용하는 경우입니다(스크린 리더가 이를 읽어 줍니다).
• <use> 인스턴스 축약은 피하세요. 최적화 도구가 이를 인라인 처리하면 원본 기준이 되는 패턴이 사라질 수 있습니다.

압축이 실제로 바이트를 절약하는 경우

SVG는 텍스트이므로 서버의 gzip만으로도 이미 많은 중복이 제거됩니다. 압축하지 않았을 때 4KB에서 1KB로 줄어드는 SVG라도, 전송 시에는 1.2KB에서 0.7KB로만 줄어들 수 있습니다. 그래도 할 만한 가치가 있으며, 더 작은 원본은 읽기도 더 쉽습니다.