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を削除しないでください。フィル、マスク、フィルターのurl(#...)やCSSから参照されているIDが対象です。アグレッシブモードではグラデーションが壊れることがあります。
• viewBoxを残してください。これがないと、SVGはレスポンシブに拡大縮小されません。
• <title>を残してください。アクセシビリティのために利用している場合です（スクリーンリーダーがこれを読み上げます）。
• <use>インスタンスの展開は避けてください。オプティマイザがそれらをインライン化すると、元となる定義パターンが失われることがあります。

圧縮が実際にバイト数を節約できる場合

SVGはテキストなので、サーバー側のgzip圧縮だけでも冗長な部分の多くはすでに取り除かれます。非圧縮で4KBから1KBに減ったSVGでも、転送時には1.2KBから0.7KBにしか減らないこともあります。それでも価値はあり、ソースが小さくなることで読みやすさも増します。