SVGOで、書き出したままのSVGを軽量ファイルに変える

はじめに

Figma や Illustrator から書き出した SVG ファイルを、そのままプロジェクトに突っ込んでいませんか。実はそうしたファイルには、エディタが自動生成したメタデータやコメント、使われていない ID、冗長な数値精度など、描画結果には一切影響しない「贅肉」がたくさん含まれています。数十個のアイコンを扱うプロジェクトでは、これだけで数百KB単位の無駄が積み重なることも珍しくありません。

SVGO（SVG Optimizer）は、そうした不要な情報だけを取り除いて SVG を軽量化してくれるツールです。プラグインベースの設計になっているため、最適化のルールを自分のプロジェクトに合わせて細かく調整できるのも魅力です。

SVGOとは

SVGOは、Node.js製のSVGファイル最適化ツールです。CLIとしてもNode.js APIとしても利用でき、ベクターエディタが出力した冗長なコードを解析し、視覚的な結果を変えずにファイルサイズを削減します。svg/svgoリポジトリで開発が続けられており、2026年7月時点の最新版はv4.0.2です。

主な特徴

• プラグインアーキテクチャ - 最適化処理はすべてプラグイン単位で実装されており、必要なものだけを有効・無効にできる
• CLIとAPIの両対応 - コマンド一発でのバッチ処理から、ビルドツールに組み込むプログラマティックな利用まで幅広くカバー
• 豊富なエコシステム連携 - webpack・Vite・Rollup向けのプラグインが揃っており、ビルドパイプラインへの統合が容易

インストール

プロジェクト単位で使う場合はローカルインストールがおすすめです。

# npm
npm install --save-dev svgo

# yarn
yarn add -D svgo

# pnpm
pnpm add -D svgo

CLIとしてどこでも使いたい場合はグローバルインストールも可能です。

npm install -g svgo

基本的な使い方

CLIで最適化する

単一ファイルを最適化する最もシンプルな例です。

npx svgo input.svg -o output.svg

複数ファイルをまとめて処理することもできます。

npx svgo icon-1.svg icon-2.svg -o icon-1.min.svg icon-2.min.svg

ディレクトリ内のSVGを再帰的に処理したい場合は -f（フォルダ指定）と -r（再帰）を組み合わせます。

npx svgo -f ./src/icons -o ./dist/icons -r

Node.js APIで最適化する

ビルドスクリプトなどに組み込みたい場合は、optimize 関数を使います。

import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'node:fs';

const svgString = readFileSync('./src/icon.svg', 'utf-8');

const result = optimize(svgString, {
  path: 'icon.svg',
  multipass: true, // 複数回最適化パスを実行し、圧縮率を高める
});

writeFileSync('./dist/icon.svg', result.data, 'utf-8');

設定ファイルでルールをカスタマイズする

デフォルトのプリセットでは viewBox が削除されてしまうなど、プロジェクトによっては困る挙動もあります。そうした場合は svgo.config.mjs を用意してプラグインを個別に調整します。

// svgo.config.mjs
export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // アイコンとして拡大縮小したいのでviewBoxは残す
          removeViewBox: false,
        },
      },
    },
    // idを保持したいアイコンではremoveIDsを無効化
    'removeIDs',
  ],
};

実践的なユースケース

アイコンセットのビルド時最適化

デザイナーから受け取ったアイコン一式をリポジトリに取り込む際、CIやビルドスクリプトで自動的に最適化をかけておくと、レビュー時に人力でファイルサイズを気にする必要がなくなります。

// scripts/optimize-icons.mjs
import { optimize } from 'svgo';
import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
import { join } from 'node:path';

const iconsDir = './src/icons';

for (const file of readdirSync(iconsDir)) {
  if (!file.endsWith('.svg')) continue;

  const filePath = join(iconsDir, file);
  const svgString = readFileSync(filePath, 'utf-8');
  const result = optimize(svgString, { path: filePath, multipass: true });

  writeFileSync(filePath, result.data, 'utf-8');
  console.log(`optimized: ${file}`);
}

バンドラーに組み込んで自動最適化する

Viteを使っている場合は、vite-plugin-svgo のようなプラグインを介して、インポート時に自動でSVGOを適用できます。手作業での最適化を挟まずに済むため、デザインの差し替えが頻繁なプロジェクトでも運用がぶれません。

npm install --save-dev vite-plugin-svgo

// vite.config.js
import { defineConfig } from 'vite';
import svgo from 'vite-plugin-svgo';

export default defineConfig({
  plugins: [svgo()],
});

まとめ

SVGOを使うことで、エディタが吐き出した冗長なSVGを、プラグインベースのルールに従って安全に軽量化できます。CLIでの手軽な一括処理から、Node.js APIを使ったビルドパイプラインへの統合まで柔軟に対応できるのも大きな強みです。まずは手元のアイコンフォルダに npx svgo -f を試してみて、ファイルサイズがどれだけ変わるか体感してみてください。