SVGファイルは軽量であるべきです。ピクセルではなく数学的な命令として図形を格納するため、小さく保たれるはずです。しかし、デザインツールからエクスポートされた多くのSVGファイルは、メタデータ、エディタのコメント、冗長なパスデータ、そして可視のグラフィックに貢献しながらキロバイトを追加するインラインスタイルで膨れ上がっています。SVGを最適化すると、視覚的な変化なしにファイルサイズを30〜70%削減でき、ページの読み込みが速くなり帯域幅コストが下がります。
SVGファイルが大きい理由
Adobe Illustrator、Figma、Inkscape、Sketchなどのツールからエクスポートすると、出力ファイルには描画命令以上のものが含まれます。不必要な肥大化の一般的な原因は次のとおりです：
エディタメタデータ — デザインツールはソフトウェア名とバージョン、作成日、複数の単位系でのドキュメント寸法、時には編集履歴全体などの情報をファイルに埋め込みます。このデータは閲覧者には完全に見えず、デプロイされたファイルでは何の目的も果たしません。
冗長な属性 — ツールはスタイル情報をインライン属性と別のCSSクラスの両方として出力し、重複を生み出すことがよくあります。明示的に記述する必要のないデフォルト値も一般的に含まれます。
過度に単純化または詳細すぎるパス — Illustratorや類似のツールは、形状を正確に記述するために必要以上の制御点を持つパスデータを生成することがあります。逆に、スキャンや写真から自動トレースされた画像は、視覚的な変化なしに単純化できる過剰な詳細のパスデータを生成します。
未使用の定義 — 編集中に作成されたが最終的なアートワークから削除されたグラデーション、フィルター、マスク、シンボルがファイルのdefsセクションにまだ参照されている場合があります。
コメントと処理命令 — ツール固有のXMLコメントと処理命令は数百バイトを占める可能性があります。
SVGO：標準的なコマンドライン最適化ツール
SVGO（SVG Optimizer）は自動化されたSVG最適化のために最も広く使われているツールです。ファイルサイズを削減するために設定可能な変換セットを適用するNode.jsコマンドラインツールです。ほとんどのオンラインSVG最適化ツールは内部的にSVGOを使用しています。
SVGOのデフォルト設定はほとんどの一般的な最適化を処理します：エディタメタデータの削除、グループの折りたたみ、色を短い16進数コードへの変換、コメントの削除、冗長なパスのマージなど。デザインツールからエクスポートされたほとんどのSVGでは、デフォルト設定は視覚的な品質変化なしにファイルサイズを30〜50%削減します。
一部の変換はより積極的で、外観に影響を与える可能性があります。viewBoxの削除やパスの積極的なマージはアニメーションやインタラクティブなSVGを壊す可能性があります。デプロイ前に常に最適化されたファイルを視覚的に比較してください。
SVG最適化にInkscapeを使う
Inkscapeは「ドキュメントのクリーンアップ」機能と「最適化されたSVGとして保存」エクスポートオプションを含む無料のオープンソースベクターグラフィックエディタです。InkscapeでのSVG最適化エクスポートは、SVGOが削除するのと同じメタデータの多くを取り除きます。
Inkscapeは最適化前にSVGを視覚的に検査して手動で調整する必要がある場合に特に便利です。特定のレイヤーを削除し、ノードエディタを使って対話的にパスを単純化してから、クリーンアップされた結果をエクスポートできます。視覚的なコントロールが必要な一回きりのファイルには、Inkscapeが良い選択です。
手動クリーンアップのヒント
SVGはプレーンテキスト（XML）なので、任意のテキストエディタで開いて直接肥大化を取り除くことができます。効果的な手動クリーンアップ手順は次のとおりです：
エディタネームスペースの削除 — ファイルの先頭でxmlns:inkscape、xmlns:sodipodi、またはxmlns:illustratorのようなネームスペース宣言を探してください。これらのネームスペースを使用するすべての要素と属性とともに削除してください。
コメントの削除 — <!-- -->で囲まれたXMLコメントはレンダリングに貢献せずにサイズを追加します。すべて削除してください。
パスデータの単純化 — d="M 42.382731,10.54827"のような小数点6桁のパス座標は、通常の表示サイズでは視覚的な変化なしに小数点2桁に丸めることができます。
未使用のdefsの削除 — ファイルの他の場所で参照されていないグラデーション、フィルター、またはシンボルがないか<defs>セクションを確認してください。
スタイルの統合 — スタイルがインラインstyle属性と<style>ブロックの間に散在している場合は、一つのアプローチを選んで重複した宣言を削除してください。
ウェブでのSVGのGzipとBrotli圧縮
SVGはテキストであり、gzipまたはBrotliで非常によく圧縮されます。ウェブサーバーが圧縮レスポンスを送る場合、100 KBのSVGファイルが通信中に15〜25 KBに圧縮される可能性があります。これは上記で説明したファイルサイズ最適化とは別のもので、両方の利点を得ることができます。
サーバーがSVGファイルをgzipまたはBrotliエンコーディングで提供するように設定されていることを確認してください。ほとんどのホスティング環境ではデフォルトで有効になっていますが、レスポンスにContent-Encoding: gzipまたはContent-Encoding: brヘッダーが含まれているかブラウザのネットワークパネルで確認する価値があります。
SVGが適切なフォーマットの場合
SVGはすべての画像に適したフォーマットではありません。特定のユースケースで優れています：
SVGを使用する場合：ロゴ、アイコン、イラスト、チャート、ダイアグラム、幾何学的な形状、線、フラットまたはグラデーションカラーで構成されたアートワーク。SVGは品質を失わずに無限にスケールできるため、同じ画像が複数のサイズで表示されるレスポンシブウェブデザインに最適です。
ラスターフォーマット（JPEG、WebP、PNG）を使用する場合：写真、写真的な複雑さを持つ詳細なイラスト、または何百万もの色と細かいテクスチャを持つ画像。SVGとして保存された写真はピクセルデータを近似するために何千もの小さなパス要素が必要となり、巨大で低速のレンダリングファイルになります。
アイコンについては特に、HTMLのインラインコードとしてのSVGが最善のアプローチであることが多いです。HTTPリクエストを完全に排除し、CSSスタイリングとアニメーションを可能にし、ブラウザがどんなサイズでも鮮明にレンダリングします。
必要なときにSVGをラスターフォーマットに変換する
ソーシャルメディアのプロフィール画像、メール署名、またはSVGのアップロードをサポートしていないプラットフォームのために、SVGのラスターバージョンが必要な場合があります。SVGをPNGまたはJPEGに変換すると、十分な解像度でレンダリングする限り品質が維持されます。
複数のサイズで表示する必要があるロゴの場合、必要な最大サイズ（例えば幅1200ピクセル）でSVGをレンダリングし、それをPNGとして保存してください。次にウェブ使用のためにPNGを圧縮してください。