SVGファイルを圧縮

SVGはピクセルではなくコード

SVG（Scalable Vector Graphics）ファイルは、パス、円、グラデーション、テキストといった図形を記述したXML形式のテキスト文書です。ピクセルではなく描画の命令が書かれているため、16ピクセルのファビコンから屋外広告まで、どのサイズでも鮮明に表示されます。ウェブ上のアイコン、ロゴ、イラスト、グラフ、地図にはSVGがよく使われており、2001年からW3Cの標準規格になっています。

テキストであることには副作用もあります。ファイルサイズは、画像の表示サイズではなく、編集ソフトがどれだけ冗長に書き出したかで決まるのです。表示がまったく同じ2つのSVGでも、サイズが数倍違うことがあります。

SVGファイルを必要以上に重くするもの

• 編集ソフトのメタデータ。Illustrator、Inkscape、Figma、Sketchは、独自の名前空間、レイヤー名、書き出し時のコメント、ときには編集用ドキュメントの埋め込みコピーまで追加します。
• 過剰な精度。12.48で現実的などのサイズでもまったく同じに表示されるのに、12.483920174のような座標が使われています。
• 冗長な構造。空のグループ、非表示のレイヤー、既定値と同じ属性、使われていない定義、もっと短く書けるスタイルなどです。
• 長いパス記法。相対コマンドのほうが短いのに絶対コマンドを使っている、同じコマンド文字の繰り返し、不要な空白などです。
• 埋め込まれたビットマップ。イラストに貼り付けた写真はSVG内にBase64のテキストとして保存され、元の画像ファイルより約3分の1大きくなります。

ツールによるSVGの最適化

このツールは、広く使われているオープンソースのSVG最適化ツールSVGOをブラウザ内で実行します。メタデータとコメントを削除し、不要なグループをまとめ、パスデータを短くし、数値を初期設定で小数点以下3桁（0〜6桁から選択可能）に丸め、スタイルを統合します。この処理を、変化がなくなるまで繰り返します。結果は普通のSVGのままなので、どの編集ソフトでも開け、HTMLに貼り付けることもできます。手作業で最適化したアイコンから編集データだらけのInkscapeの書き出しまで、8つのSVGでの私たちのテストでは、削減率は8〜42％でした。

厳密に言えば、最適化はごく限られた意味で非可逆です。丸めによって座標がごくわずかに変わり、編集ソフト固有のデータも消えるため、元のレイヤー構成のままファイルを開き直すことはできなくなります。デザインツールの元ファイルは保管しておき、最適化したSVGは公開用として扱ってください。

サーバーは通常、SVGをgzipやBrotliで圧縮して送るため、ブラウザに届くまでにテキストはさらに小さくなります。最適化とサーバー側の圧縮の効果は足し合わされます。削除したデータは、そもそも圧縮する必要がなくなるからです。

最適化したSVGが正しく動かなくなるとき

• CSSやJavaScriptが要素を見つけられなくなる。最適化ツールは、ファイル内で使われていないように見えるIDやクラス名を短くしたり削除したりします。ページのスタイルやスクリプトがそれらを参照している場合は、公開前に結果を確認してください。
• アイコンが拡大縮小しなくなった。SVGを正しくリサイズするにはviewBox属性が必要です。ツールはこの属性を残すので、元のファイルにあったかどうかを確認してください。固定の幅と高さしかないSVGは、もともときれいに拡大縮小できません。
• 小さな図形がゆがんで見える。大きなキャンバスに描かれたごく小さなアイコンは、丸めの影響を受けることがあります。初期設定の精度ではまれです。
• ファイルの大半が埋め込み写真である。写真を別のJPGやWebPとして書き出してリンクするか、グラフィック全体をビットマップに変換してください。

SVGに関する質問

関連ページ

ビットマップ画像は画像圧縮ツールで扱えます。何がどのような理由で端末内で動くのかについては、仕組みのページをご覧ください。