SVG最適化ガイド — ファイルサイズ削減テクニック

SVGファイルのサイズを削減する最適化テクニックを解説。SVGO、手動最適化、CSSとの組み合わせなど、実践的なSVG軽量化の方法。

SVGとは

SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットです。ラスター画像（JPEG、PNG）と異なり、どれだけ拡大しても画質が劣化しません。

SVGが適している用途

用途	理由
ロゴ	拡大してもシャープ
アイコン	小さいファイルサイズで高品質
イラスト	色変更やアニメーションが容易
チャート・グラフ	テキストが検索可能
地図	インタラクティブな操作が可能

SVGが適さない用途

写真（JPEG/WebP/AVIFの方が圧倒的に効率的）
複雑なグラデーションや質感のある画像
大量のパスポイントを含む複雑なイラスト

なぜSVG最適化が必要なのか

デザインツール（Illustrator、Figma、Sketch等）から書き出したSVGには、多くの不要な情報が含まれています。

デザインツールが出力する不要なデータ

エディタ固有のメタデータ — Illustratorのレイヤー情報など
未使用のネームスペース — xmlns:xlink など
冗長な属性 — デフォルト値と同じ属性
不要な空白・改行 — 人間の可読性のためのインデント
精度過剰な座標値 — 12.345678 のような不要な小数点以下

最適化により、30〜70% のファイルサイズ削減が可能です。

SVGOによる自動最適化

SVGOとは

SVGO（SVG Optimizer）は、最も広く使われているSVG最適化ツールです。Node.jsベースのCLIツールで、多くのビルドツールやデザインツールに統合されています。

インストールと使い方

# インストール
npm install -g svgo

# 基本的な使い方
svgo input.svg -o output.svg

# ディレクトリ内の全SVGを最適化
svgo -f ./icons/ -o ./icons-optimized/

# 最適化結果を表示
svgo input.svg -o output.svg --pretty

SVGOのデフォルトプラグイン

SVGOはプラグインベースで動作し、デフォルトで以下の最適化が有効です。

プラグイン	効果
removeDoctype	DOCTYPE宣言を削除
removeXMLProcInst	XML処理命令を削除
removeComments	コメントを削除
removeMetadata	メタデータ要素を削除
removeEditorsNSData	エディタ固有のネームスペースを削除
cleanupAttrs	属性の空白を正規化
mergeStyles	スタイル要素をマージ
minifyStyles	CSSを最小化
removeUselessDefs	未使用のdefs要素を削除
cleanupNumericValues	数値の精度を最適化
convertColors	色を短縮形に変換
removeEmptyAttrs	空の属性を削除
removeEmptyContainers	空のコンテナ要素を削除
mergePaths	パスをマージ
convertPathData	パスデータを最適化
convertTransform	transform属性を最適化

SVGOの設定ファイル

プロジェクトルートに svgo.config.js を作成して設定をカスタマイズできます。

module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions',    // width/heightを削除してviewBoxのみにする
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-name']  // 特定の属性を削除
      }
    }
  ]
};

手動で行うSVG最適化テクニック

自動ツールだけでは対応しきれない最適化もあります。

1. viewBoxの設定

width / height 属性を削除し、viewBox のみにすると、CSSでサイズを制御でき、レスポンシブ対応が容易になります。

<!-- Before -->
<svg width="100" height="100" viewBox="0 0 100 100">

<!-- After -->
<svg viewBox="0 0 100 100">

2. 不要なグループの削除

単一の子要素しか持たない <g> タグは不要です。

<!-- Before -->
<g>
  <path d="M10 10 L90 90"/>
</g>

<!-- After -->
<path d="M10 10 L90 90"/>

3. パスの簡素化

デザインツールが出力するパスには、不要なアンカーポイントが含まれることがあります。Illustratorの「オブジェクト」→「パス」→「単純化」で削減できます。

4. シンボルの活用

同じ図形を複数回使う場合は <symbol> と <use> を活用します。

<svg>
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 2L15 8.5 22 9.3 17 14 18.2 21 12 17.5 5.8 21 7 14 2 9.3 9 8.5Z"/>
  </symbol>

  <use href="#icon-star" x="0" y="0" width="24" height="24"/>
  <use href="#icon-star" x="30" y="0" width="24" height="24"/>
  <use href="#icon-star" x="60" y="0" width="24" height="24"/>
</svg>

5. CSSクラスの活用

インラインスタイルをCSSクラスに置き換えると、同じスタイルを使い回せます。

<!-- Before -->
<circle cx="50" cy="50" r="40" fill="#F97316" stroke="#EA580C" stroke-width="2"/>
<circle cx="150" cy="50" r="40" fill="#F97316" stroke="#EA580C" stroke-width="2"/>

<!-- After -->
<style>.brand{fill:#F97316;stroke:#EA580C;stroke-width:2}</style>
<circle cx="50" cy="50" r="40" class="brand"/>
<circle cx="150" cy="50" r="40" class="brand"/>

SVGスプライトの作成

複数のアイコンを1つのSVGファイルにまとめる「SVGスプライト」は、HTTPリクエスト数を削減する効果的な手法です。

スプライトファイルの構成

<!-- icons.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

HTMLでの使用

<svg width="24" height="24">
  <use href="icons.svg#icon-home"/>
</svg>

Gzip / Brotli 圧縮との組み合わせ

SVGはXML（テキスト）ベースのため、Gzip/Brotli圧縮と非常に相性が良いです。

状態	ファイルサイズ（例）
元のSVG	50KB
SVGO最適化後	20KB（60%削減）
SVGO + Gzip	6KB（88%削減）
SVGO + Brotli	5KB（90%削減）

Webサーバー（Nginx、Apache、Cloudflare等）でSVGのGzip/Brotli圧縮を有効にしましょう。

SVG最適化のチェックリスト

SVGOで自動最適化を実行した
不要なメタデータ・コメントが削除されている
座標値の精度が必要最小限になっている
色が短縮形（#fff 等）になっている
未使用の要素・属性がない
viewBoxが正しく設定されている
同じ図形はsymbol/useで再利用している
サーバーでGzip/Brotli圧縮が有効になっている

よくある問題と対処法

最適化後に表示が崩れる

SVGOの一部プラグイン（convertPathData、mergePaths）が原因のことがあります。svgo.config.js で該当プラグインを無効にしましょう。

アニメーションが動かなくなる

SVGO がアニメーション関連の属性を削除することがあります。removeHiddenElems や removeUselessStrokeAndFill を無効にすると解決する場合があります。

テキストがアウトライン化されている

フォントのライセンス問題を避けるためにテキストをアウトライン化することがありますが、ファイルサイズが大幅に増えます。可能であればWebフォントを使い、テキスト要素のまま残しましょう。

まとめ

SVG最適化の基本は3ステップです。

SVGOで自動最適化 — まずはこれだけで30〜70%削減
手動で微調整 — viewBox設定、不要グループ削除
サーバーでGzip/Brotli圧縮 — テキストベースなので効果大

画像フォーマットの変換や最適化には Assistyの画像変換ツール をご活用ください。SVGからPNG/JPEGへの変換もブラウザ上で安全に行えます。