SVGの最適化

はじめに

SVGはテキストベースの形式です。変換ツールやデザインツールから書き出したファイルには、不要なメタデータ、過剰な小数精度、重複した属性、空白、使われていない定義が含まれることがあります。

最適化は、それらを整理して公開用のファイルを作る工程です。ただし変更が安全かどうかは、SVGの使い方によって異なります。見た目だけでなく、ID、CSS、アニメーション、アクセシビリティも確認します。

SVG最適化が変更するもの

どの最適化が安全ですか？

空白やエディター固有メタデータの除去は比較的安全です。一方、パスの結合、IDの変更、viewBoxの除去、titleやdescの削除は利用方法に影響する可能性があります。

「安全な最適化」は固定の一覧ではありません。SVGを画像ファイルとして表示するのか、Reactコンポーネントとして使うのか、CSSやARIAから参照するのかによって判断が変わります。

実際の最適化例: ロゴSVG

この例では保守的な設定でロゴを最適化し、パス形状と859個のパス命令を保ったまま、要素数を3個から2個へ減らしました。ファイルサイズは14,349バイトから11,716バイトになりました。

元のSVG

最適化後のSVG

元

14,349バイト

最適化後

11,716バイト

要素

3個 → 2個

パス

2個を維持

パス命令

859個を維持

よくある失敗

視覚確認せずに最適化する

小数精度やパス結合の変更は、細い線や小さな形を変えることがあります。処理前後を比較します。

アクセシビリティ情報を無条件に削除する

意味のある画像のtitle、desc、ARIA参照は必要な場合があります。利用文脈を確認します。

最適化後のSVGをデザイン原本にする

公開用の最適化ファイルは編集しやすさを失うことがあります。元データは別に保管します。

ファイルサイズだけを確認する

小さくなっても見た目、参照、アニメーションが壊れていれば成功ではありません。

ベストプラクティス

• -元のSVGを別ファイルとして保管します。
• -使用中のID、CSS、ARIA、アニメーションを確認します。
• -まず保守的な設定で最適化します。
• -小さい表示と大きい表示で処理前後を比較します。
• -ファイルサイズ、要素数、パス数を一緒に確認します。
• -実際のページまたはコンポーネントで動作確認します。

実務での手順

1. 1
   元のSVGを保管し、利用方法を確認します。
2. 2
   ID、CSS、ARIA、アニメーションの参照を洗い出します。
3. 3
   保守的な設定で最適化します。
4. 4
   サイズと構造の変化を記録します。
5. 5
   複数の表示サイズで見た目を比較します。
6. 6
   実際の製品環境で確認したファイルだけを公開します。

FAQ

SVG最適化は可逆ですか？

常に可逆とは限りません。メタデータや精度、編集情報が失われる場合があるため、元ファイルを保管してください。

すべてのSVGを最適化すべきですか？

公開用SVGは確認する価値がありますが、すでに小さく整理されたファイルでは削減がわずかな場合もあります。

最適化でSVGが壊れることはありますか？

あります。ID参照、CSS、viewBox、精度、アニメーションが変更されると表示や動作が変わる可能性があります。

最適化はパフォーマンスを改善しますか？

転送量と解析量を減らせる場合があります。ただし実際の効果はファイルサイズ、構造、再利用、描画方法によって異なります。