あなたの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>

1つのpathを保持するために3つのネストされたグループ。各グループがバイトを追加。何かをしている（変換やスタイルを適用など）のでない限り削除しましょう。

IDも同様。すべての要素に id="XMLID_847_" があると積み重なります。CSSやJavaScriptで参照するIDは保持。残りは削除。

最適化すべきもの

メタデータを削除。 コメント、エディタ情報、使っていない名前空間。

精度を減らす。 2-3小数点が通常十分。

グループをフラット化。 不要なネストは目的がない。

IDをクリーン。 参照されているものは保持、自動生成されたゴミは削除。

パスを結合。 1つのパスになりえる複数のパスは結合すべき。

隠された要素を削除。 デザインツールで隠したが削除しなかったレイヤー。

ファイルサイズを保持すべき時

時には大きい方が正しい：

アニメーション。 IDやグループはしばしばアニメーションターゲットとして機能。盲目的に削除しない。

CSSスタイリング。 外部CSSでSVGをスタイリングしているなら、それらのIDとクラスが必要。

将来の編集。 超最適化されたSVGは編集が難しい。ソースファイルを保持、本番版を最適化。

比較

シンプルなアイコン、最適化前：

オリジナル: 24KB
メタデータ削除後: 8KB
精度削減後: 4KB
構造クリーン後: 2KB

12倍小さい。速く読み込まれる。速くパースされる。すべてのページ読み込み、すべてのユーザー。

インライン vs 外部

小さなSVG（最適化後1KB未満）はHTMLに直接インラインで最も良く機能することが多い。追加のHTTPリクエストなし。

より大きなSVGや再利用されるアイコンはキャッシュ可能な外部ファイルとして機能する方が良い。

損益分岐点は状況によります。一般的に：SVGを一度だけ使い、小さいなら、インライン化。繰り返し使うか複雑なら、外部ファイル。

---

SVG最適化は無料のパフォーマンス。出荷前にアイコンをオプティマイザーに通しましょう。数秒かかり、すべてのページ読み込みで、永遠にバイトを節約します。