SVG最適化：品質を損なわずにファイルサイズを削減する

2026年3月31日 · 12分で読めます

SVG最適化を理解する

スケーラブル・ベクター・グラフィックス(SVG)は、JPGやPNGなどの従来のラスター画像とは根本的に異なる画像形式です。SVGはXMLベースのベクターデータを利用してグラフィックを表示し、品質を損なうことなく無限に拡大縮小できます。これにより、レスポンシブWebデザイン、高解像度ディスプレイ、あらゆるサイズで画像の鮮明さが最も重要なアプリケーションに最適です。

固有の利点があるにもかかわらず、Adobe Illustrator、Figma、Sketch、InkscapeなどのデザインツールからエクスポートされたSVGには、ファイルサイズを肥大化させる不要なデータが含まれていることがよくあります。この余剰データには、エディタ固有のメタデータ、冗長な属性、過度に正確な座標、本番環境では何の目的も果たさない構造的な非効率性が含まれます。

SVGを最適化することは、視覚的な品質を維持しながらWebページの読み込み時間を短縮するためにファイルサイズを削減するために不可欠です。適切に最適化されたSVGは、最適化されていないものと比較して40〜80%小さくなり、First Contentful Paint(FCP)やLargest Contentful Paint(LCP)などのページパフォーマンス指標に直接影響します。

SVGファイルの構造

最適化テクニックに入る前に、SVGファイルを構成するものを理解することが重要です。SVGファイルは本質的に、ブラウザが解釈してグラフィックとしてレンダリングできる特定の構造を持つXMLドキュメントです。

SVGのコアコンポーネント

典型的なSVGファイルには、いくつかの重要な要素が含まれています：

• ルートSVG要素：ビューポートと座標系を定義します
• 図形要素：視覚的なコンテンツを形成するパス、円、長方形、ポリゴン、線
• グループ化要素：関連する図形を整理する<g>タグ
• 定義：グラデーション、パターン、フィルターなどの再利用可能な要素を含む<defs>セクション
• スタイル情報：インラインスタイル、CSSクラス、またはプレゼンテーション属性
• メタデータ：ファイルの作成、著者、編集履歴に関する情報

SVGが肥大化する理由

デザインツールは、ファイルサイズよりも編集可能性と互換性を優先します。SVGをエクスポートすると、これらのツールには次のものが含まれることがよくあります：

• 座標の完全な小数精度(例：123.46の代わりに123.456789)
• ブラウザがすでに想定しているデフォルト値
• 空のグループと未使用の定義
• エディタ固有の名前空間とメタデータ
• 統合できるインラインスタイル
• 人間の可読性のためのコメントと空白

これらのコンポーネントを理解することで、最適化中に何を削除し、何を保持するかについて情報に基づいた決定を下すことができます。

削除可能な要素

すべてのSVGコンテンツが同じように作成されているわけではありません。多くの要素はデザイン段階で目的を果たしますが、本番環境では無駄になります。安全に削除できるものの包括的な内訳は次のとおりです。

不要なメタデータ

多くのデザインツールは、Web上でSVGをレンダリングするために必要のないメタデータを挿入します。sodipodi:やinkscape:などのタグは、多くの場合、Inkscape固有のエディタメタデータを示します。同様に、Illustratorは、ブラウザが無視するxmlns:xおよびxmlns:i名前空間を追加します。

削除する一般的なメタデータ要素には次のものがあります：

• RDFまたはDublin Core情報を含む<metadata>タグ
• ルートSVG要素のエディタ固有の名前空間
• Illustratorエクスポートからのdata-name属性
• Sketchファイルからのsketch:type属性

これらのタグを削除しても、グラフィックの外観には影響しませんが、場合によってはファイルサイズを10〜20%削減できます。

古いコメント

<!-- example comment -->のようなコメントは、SVGを文書化するための開発またはデザインプロセス中に役立ちますが、最終製品には不可欠ではありません。レイヤー名、デザインの決定、またはバージョン情報を説明するコメントは、エンドユーザーに価値を追加することなくバイトを追加します。

これらのコメントを削除すると、特に広範なドキュメントを含む複雑なSVGでファイルサイズを削減する簡単な方法が提供されます。

非表示のレイヤーと要素

編集目的で意図されたレイヤーや要素が非表示のままであるにもかかわらず、エクスポートされたファイルの一部である場合があります。display:none、visibility:hidden、またはopacity:0の属性を持つものを探し、これらの非表示要素を削除します。

SVGが複数レイヤーのデザインから作成された場合、このような精査によりファイルサイズを大幅に削減できます。非表示の要素には次のものが含まれる場合があります：

• 配置に使用される参照レイヤー
• 代替デザインバージョン
• 注釈レイヤー
• 無効化されたエフェクトまたはフィルター

未使用および冗長な定義

SVGファイルには、未使用のグラデーション、フィルター、パターン、クリップパスなどの残された定義が含まれていることがよくあります。これらの定義は<defs>セクションにありますが、表示される要素によって参照されることはありません。

これらの未使用の定義を見つけて削除すると、特にアイコンセットや複雑なデザインファイルからエクスポートされたグラフィックでファイルサイズを劇的に削減できます。次のものを探してください：

• fillまたはstroke属性で参照されていない一意のIDを持つグラデーション
• 作成されたが適用されなかったフィルター
• 定義されているが使用されていないクリップパス
• <use>要素でインスタンス化されないシンボル

デフォルト属性値

SVG要素には、多くの属性のデフォルト値があります。これらのデフォルトを明示的に記述すると、バイトが無駄になります。例えば：

• fill="black"は、黒がデフォルトの塗りつぶし色であるため不要です
• stroke="none"は、要素にデフォルトでストロークがないため削除できます
• opacity="1"は、完全な不透明度が想定されているため冗長です
• fill-rule="nonzero"は、デフォルトであるため省略できます

これらの明示的なデフォルトを削除すると、要素ごとに数バイト節約でき、複雑なグラフィックではすぐに積み重なります。

過度な小数精度

デザインツールは、過度な小数精度で座標と値をエクスポートすることがよくあります。123.456789123のような座標は、人間の目には知覚できず、レンダリングには不要な誤った精度を提供します。

座標を2〜3桁の小数点以下に丸めることは通常十分であり、視覚的な品質の損失なしにファイルサイズを15〜30%削減できます。123.456789と123.46の差は0.003ピクセル未満であり、実用的な表示サイズでは完全に見えません。

SVGOを使用した最適化

SVGO(SVG Optimizer)は、自動化されたSVG最適化の業界標準ツールです。プラグインアーキテクチャを通じて数十の最適化テクニックを適用するNode.jsベースのツールであり、強力でカスタマイズ可能です。

SVGOのインストールと使用

ワークフローに応じて、いくつかの方法でSVGOを使用できます：

コマンドラインインストール：

npm install -g svgo
svgo input.svg -o output.svg

バッチ処理：

svgo -f ./input-folder -o ./output-folder

ビルドツールとの統合：

SVGOは、専用プラグインを通じてwebpack、Gulp、Grunt、その他のビルドシステムとシームレスに統合されます。これにより、ビルドプロセス中にSVGを自動的に最適化できます。

SVGO設定オプション

SVGOの力は、その設定可能性にあります。svgo.config.jsファイルを作成して、適用される最適化をカスタマイズできます：

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: {
            minify: false
          }
        }
      }
    }
  ]
}

理解すべき主要なプラグイン：

• removeDoctype：XML doctype宣言を削除します
• removeComments：ファイルからすべてのコメントを削除します
• cleanupAttrs：属性内の不要な空白を削除します
• removeMetadata：エディタメタデータを削除します
• removeUselessDefs：未使用の定義を削除します
• cleanupNumericValues：精度を下げるために数値を丸めます
• convertPathData：より短い出力のためにパスコマンドを最適化します
• mergePaths：可能な場合は複数のパスを結合します

オンラインSVGOツール

コマンドラインツールを使用したくない場合は、いくつかのWebベースのインターフェイスがSVGO最適化を提供します：

• SVGOMG：リアルタイムプレビューとカスタマイズ可能な設定を備えたSVGOのWeb GUI
• ImgKit SVG Optimizer：一般的なユースケース向けのプリセット設定を備えた当社独自のSVG Optimizerツール
• Jake ArchibaldのSVGOMG：並べて比較できるオリジナルのWebインターフェイス

これらのツールは、1回限りの最適化や、ビルドプロセスを設定せずにいくつかのファイルをすばやく最適化する必要がある場合に最適です。

SVGO出力の理解

SVGOを実行した後、通常、ファイルサイズが大幅に削減されます。典型的な最適化レポートは次のようになります：

パスコマンドは変更されていないことに注意してください。SVGOはその表現を最適化しますが、実際の描画命令は変更せず、視覚的な忠実度を保持します。

手動最適化テクニック

自動化ツールはほとんどの最適化タスクを処理しますが、手動テクニックは、特にアイコンやシンプルなグラフィックに対してさらに良い結果を達成できます。これらのテクニックを理解することは、最初からより効率的なSVGを作成するのにも役立ちます。

パスの簡素化

パスデータは、多くの場合、SVGファイルの最大のコンポーネントです。視覚的な品質を失うことなくパスを簡素化することは、技術的な知識と視覚的な判断を組み合わせた芸術形式です。

パス簡素化のテクニック：

• エクスポート前にデザインツールで不要なアンカーポイントを削除する
• 複数の小さなセグメントの代わりに滑らかな曲線を使用する
• 可能な場合は複雑な図形をより単純なプリミティブに変換する
• 同一のスタイリングを持つ隣接するパスセグメントを結合する

たとえば、パスで描かれた円は<circle>要素に置き換えることができ、コードを数十文字からわずか数個の属性に削減できます。

相対パスコマンドの使用

SVGパスは、絶対コマンドと相対コマンドの両方をサポートしています。相対コマンド(小文字)は、現在の位置に対して相対的に小さい数値を使用するため、多くの場合、より短い出力を生成します。

これらの同等のパスを比較してください：

<!-- 絶対コマンド -->
<path d="M 10 10 L 100 10 L 100 100 L 10 100 Z"/>

<!-- 相対コマンド -->
<path d="M 10 10 h 90 v 90 h -90 Z"/>

相対バージョンは短く、多くの場合より読みやすいです。SVGOのconvertPathDataプラグインはこれを自動的に処理しますが、原理を理解することは、SVGを手動でコーディングする際に役立ちます。

スタイルの統合

複数の要素にわたってインラインスタイルを繰り返す代わりに、CSSクラスまたは親グループのプレゼンテーション属性を使用してそれらを統合します。

最適化前：

<circle cx="10" cy="10" r="5" fill="#4f46e5" stroke="#000" stroke-width="2"/>
<circle cx="30" cy="10" r="5" fill="#4f46e5" stroke="#000" stroke-width="2"/>
<circle c