SVG最適化完全ガイド:100KBから10KBへ削減するテクニック

ユーティリティ

SVG最適化の必要性

最適化されていないSVGには、エディターのメタデータ、デフォルト属性、過剰な精度、空白文字など、大量の冗長な情報が含まれています。

出力元 典型的なサイズ 最適化後 削減率
Figmaから書き出し 45KB 5KB 89%
Illustratorから書き出し 80KB 8KB 90%
Inkscapeから書き出し 120KB 12KB 90%
手書きSVG 15KB 3KB 80%

一、冗長な情報のクリーンアップ

エディターのメタデータ

<!-- Illustratorが生成した冗長な情報 -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:serif="http://www.serif.com/"
     id="Artboard1"
     serif:id="Artboard 1"
     viewBox="0 0 800 600">
  <!-- serif:id、xmlns:serif などはすべて不要 -->
</svg>

<!-- 最適化後 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
</svg>

デフォルト属性

<!-- デフォルト値は明示的に宣言する必要がない -->
<rect x="0" y="0" width="100" height="100" fill="black" stroke="none" opacity="1"/>

<!-- 最適化後 -->
<rect width="100" height="100"/>
属性 デフォルト値 削除可能な条件
fill black 親要素から継承
stroke none ストロークなし
opacity 1 完全不透明
x / y 0 原点に配置
stroke-width 1 デフォルト幅
font-size 継承 親要素と同じ

二、パスの最適化

精度の削減

<!-- 小数点以下6桁は過剰な精度 -->
<path d="M12.345678 23.456789 L34.567890 45.678901"/>

<!-- 通常は2桁で十分(SVG座標系の単位) -->
<path d="M12.35 23.46L34.57 45.68"/>
精度 サイズ 見た目の差
6桁 100% なし
3桁 60% なし(1000pxのビューポート内では不可視)
2桁 50% ごくわずか
1桁 40% 小さなアイコンなら許容範囲

コマンドの統合

<!-- 複数のLコマンドは統合可能 -->
<path d="M10 20 L30 40 L50 60 L70 80"/>

<!-- 統合後(暗黙のL) -->
<path d="M10 20 30 40 50 60 70 80"/>

曲線の簡略化

<!-- 複雑なベジェ曲線 -->
<path d="M0 0C0.12 0.34 0.45 0.67 1 1C1.34 1.23 1.56 1.78 2 2"/>

<!-- 直線に近い曲率ならLに簡略化可能 -->
<path d="M0 0L1 1 2 2"/>

三、シェイプの統合

同じスタイルの要素を統合

<!-- 同じスタイルの3つの円 -->
<circle cx="10" cy="10" r="5" fill="red"/>
<circle cx="30" cy="10" r="5" fill="red"/>
<circle cx="50" cy="10" r="5" fill="red"/>

<!-- 1つのpathに統合 -->
<path d="M5 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M25 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M45 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0" fill="red"/>

<use>による再利用

<!-- 繰り返しの要素は<use>で参照 -->
<defs>
  <circle id="dot" r="5" fill="red"/>
</defs>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="30" y="10"/>
<use href="#dot" x="50" y="10"/>

四、SVGOで自動最適化

インストール

npm install -g svgo

コマンドラインでの使用

# 単一ファイルの最適化
svgo input.svg

# 出力先を指定
svgo input.svg -o output.svg

# 一括最適化
svgo -f ./icons/

# 最適化結果を表示
svgo input.svg --show-results

設定ファイル

// svgo.config.js
module.exports = {
  multipass: true,  // 複数回の最適化パス
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergePaths',
    'convertShapeToPath',
    'convertTransform',
    'removeUnusedNS',
    'minifyStyles',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'removeHiddenElems',
    'cleanupNumericValues',
    {
      name: 'cleanupNumericValues',
      params: { floatPrecision: 2 },
    },
    {
      name: 'convertPathData',
      params: {
        floatPrecision: 2,
        transformPrecision: 2,
        makeArcs: true,
      },
    },
    'removeDimensions',  // width/heightを削除してviewBoxに任せる
    'removeViewBox',     // またはviewBoxを残してdimensionsを削除
  ],
};

Node.js API

const { optimize } = require('svgo');

const result = optimize(svgString, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    { name: 'cleanupNumericValues', params: { floatPrecision: 2 } },
  ],
});

console.log(result.data); // 最適化後のSVG

五、ToolsKuでSVGを最適化する

操作手順

  1. SVGフォーマッターを開く
  2. SVGコードを貼り付けるかアップロード
  3. 「最適化」ボタンをクリック
  4. 最適化前後の比較を確認:
    • 元のサイズ → 最適化後のサイズ
    • 削減率
  5. 最適化結果をコピーまたはダウンロード

六、SVGスプライトの最適化

インラインスプライト

<!-- 非表示のSVG定義 -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
  </symbol>
</svg>

<!-- 使用 -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-search"/></svg>

スプライトの自動生成

// svg-spriteで自動生成
const SVGSprite = require('svg-sprite');

const config = {
  mode: {
    symbol: true,  // <symbol>モードで生成
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
  },
};

const spriter = new SVGSprite(config);
// SVGファイルを追加してコンパイル

七、パフォーマンス最適化チェックリスト

最適化項目 効果 優先度
エディターのメタデータを削除 -20〜40% P0
数値の精度を削減 -10〜30% P0
パスコマンドを統合 -5〜15% P1
デフォルト属性を削除 -5〜10% P1
シェイプをパスに変換 -5〜10% P2
空白/コメントを削除 -2〜5% P2
Gzip/Brotli圧縮 -50〜70% P0

注意:SVGはテキスト形式のため、Gzip/Brotliの圧縮効果が非常に高くなります。必ずサーバー側で有効にしてください。

#SVG#图片优化#图标#压缩#前端