SVGファイルが大きすぎるとき：圧縮と最適化のための8つのコツ

数百KB、場合によっては数MBにもなるSVGは、たいていアンカーが多すぎる、パスが余分すぎる、エディタのメタデータが入っていて、小数の桁数が多いことが原因です。以下の8つの手法は、元のファイルから納品まで順に並べたもので、どれも実際に使えるものです。

1. パスの段階で：アンカーを減らし、パスをまとめる

コツ1：アンカーを減らす（パスを単純化する）

パスにアンカーが多いほどファイルは大きくなり、描画も遅くなります。変換時の滑らかさを上げれば、元の段階でアンカーを減らせます。すでにあるSVGなら、IllustratorのObject → Path → SimplifyやInkscapeのPath → Simplify（Ctrl+L）で不要なアンカーを取り除いてください。PolySVGの変換ツールで滑らかさと色数を調整すれば、品質と容量のつり合いをその場で確かめられます。

コツ2：パスとレイヤーをまとめる

塗り色が同じ複数のパスを1つにまとめ、繰り返しの属性を取り除き、不要なグループの入れ子を平坦化し、隠されたレイヤーと空の要素を削除します。デザインソフトならパスファインダーのunite操作やレイヤーの結合を使ってから書き出してください。

2. ファイルの中身を軽くする：メタデータを消す、精度を下げる

コツ3：エディタのメタデータを消す

IllustratorやInkscapeで書き出したSVGには、描画にまったく影響しないエディタの名前空間、<metadata>、コメント、書き出し設定が入っています。手作業で消すか、SVGOで自動的に片付けられます。ただし<title>と<desc>は残しましょう。アクセシビリティに役立ちます。

コツ4：小数点以下の桁数を下げる

パスの座標には6桁から8桁の小数が入っていることが多いのですが、画面表示には1桁か2桁あれば十分です。SVGOの設定でfloatPrecisionを1か2にすると、見た目の違いは出ないままファイルが確実に小さくなります。ごく小さなアイコンでは座標を圧縮しすぎると形が歪むので注意してください。

3. 自動化：SVGOコマンド一発

コツ5：SVGOで自動的に最適化する

SVGOはSVG最適化の事実上の標準ツールで、コメントとメタデータの削除、パスの統合、パスコマンドの最適化、数字の整理など、多数のプラグインを備えています。基本的な使い方は次のとおりです。

npx svgo input.svg -o output.svg

ふつうのファイルは30%から70%まで小さくなることがあります。注意点は2つ。viewBox属性を消すと拡大縮小が壊れるので残すこと、CSSで色を替える予定のアイコンでは、色をそのまま書き込まず継承させておくことです。

最適化の前後で、ファイル容量と実際の転送容量をブラウザの開発者ツールで見比べておくと、効果を確認できます。パラメータの種類を1つずつ変えると、問題を起こした工程を見つけやすくなります。

4. 構造と再利用：symbolと色レイヤー

コツ6：繰り返し形状はdefsとuseで使い回す

同じアイコンがページに複数回出てくるなら、<defs>で1度だけ定義して<use>で参照するか、SVGスプライトシートを作ります。ファイル容量とリクエスト数が一緒に減ります。

コツ7：色レイヤーを抑え、埋め込みラスターを避ける

ベクター化の色数を下げてレイヤー数を減らし、複雑なグラデーションの代わりに単色を使える場所では単色で済ませましょう。もっとも重要なのは、SVGの中にbase64のラスター画像を埋め込まないことです。ベクターフイルがラスターの入れ物になり、容量が見積もれなくなります。変換後に残ったパスはオンラインエディタでクリックして消せます。

5. 納品：転送圧縮とキャッシュ

コツ8：gzipとBrotliを有効にしてキャッシュする

SVGはテキストなので、サーバー側でgzipやBrotliを有効にすると転送容量をさらに60%から80%まで減らせます。静的なSVGファイルには長めのキャッシュヘッダーを付けます。ごく小さなアイコンはHTMLに直接埋め込むと、リクエストごと省けます。考え方はSVGの利点で解説しています。変換段階での容量管理は画像をSVGに変換する方法を読んでください。

順序が重要です。元でアンカーと色レイヤーを抑え、ファイルの中でメタデータと精度を片づけ、次にSVGOを走らせ、最後に転送圧縮を有効にします。この4段をすべて入れると、SVGファイルはたいてい1桁小さくなります。