N2
NanToo
デザイン・Web制作

SVG 最適化ツール (サイズ削減・メタデータ除去)

SVG ファイルを最適化してファイルサイズを削減。SVGO v4 ベースで、Inkscape メタデータ除去・数値精度調整・基本形状の path 変換・不要な名前空間除去に対応。Before/After 比較と視覚プレビューで結果を確認。

🎯

SVG ファイルをドラッグ&ドロップ、またはクリックして選択

💬 または SVG コードを直接ペースト
このツールについて問い合わせる →

SVG 最適化ツール (サイズ削減・メタデータ除去)について

SVG 最適化ツールとは

Inkscape・Illustrator・Figma などのデザインツールで書き出した SVG には、エディタ固有のメタデータ・過剰な小数精度・未使用の名前空間・コメントなど、レンダリングには不要な要素が大量に含まれています。本ツールは SVGO v4 (MIT ライセンス) を基盤として、これらの冗長な要素を削除し、見た目を変えずに SVG ファイルサイズを削減します。

典型的な Inkscape 出力で 70〜80% のサイズ削減が見込めます。

最適化で削減される要素

削減対象 内容
メタデータ Inkscape sodipodi 設定、Adobe XMP、RDF、作者情報など
コメント <!-- --> のコメント (バージョン情報や編集メモ)
空白・改行 タグ間の余分な空白・インデント
過剰な小数桁 50.00000001 → 50 (人間に区別できない精度)
未使用名前空間 xmlns:xlink / xmlns:dc で参照されていないもの
空グループ 中身のない <g></g> や 属性のない包括要素
隠し要素 display:none / visibility:hidden / opacity:0 の要素
基本形状 → path 変換 <rect> <circle> <line> を短い path に
重複 path の統合 同属性の連続パスをマージ
カラー表記短縮 #ff0000 → red、#4f46e5 → 短縮形式 (3桁が可能なら)

見た目を変えないための工夫

本ツールは「ビジュアル識別不可能」を原則に、以下の設定をデフォルトで有効にしています。

  • viewBox を保持: レスポンシブ SVG の基盤となるので残す (これを消すと SVG が伸縮できなくなる)
  • title / desc を保持: スクリーンリーダー (アクセシビリティ) で読まれるため保持
  • 小数桁数 3 がデフォルト: 100×100 の SVG なら 1ピクセル = 0.01 単位なので 3 桁 (0.001 単位) は視覚的に区別不可能
  • multipass を有効: 収束するまで繰り返すので、どこまで圧縮可能かを最大化

Before / After のプレビュー比較でレンダリング結果が変わっていないかを必ず目視確認できます。

ID を保持するオプションの重要性

SVG に CSS や JavaScript から参照される ID (例: #circle1) がある場合、デフォルト設定では cleanupIds プラグインが短い ID に変換 (#a など) したり削除したりします。これは単独配布なら問題ありませんが、以下のケースでは「ID を保持」オプションを有効化してください:

  • HTML 側の CSS で #circle1 { fill: red; } のように参照している
  • JavaScript で document.getElementById("circle1") で取得している
  • SVG 内部で <use href="#circle1"> 参照している (これは gradient/symbol 等で頻出)
  • アニメーション目的で SMIL から参照している

不安な場合は「ID を保持」を有効のまま最適化するのが安全です。

典型的な削減実績

本ツールでのテスト結果 (デフォルト設定):

元SVGBeforeAfter削減率
Inkscape 出力 (アイコン)618 B136 B78.0%
小数精度過多207 B155 B25.1%
コメント・空白多数325 B200 B38.5%
基本形状多用251 B203 B19.1%
隠し要素・未使用 def364 B160 B56.0%

Web サイトで使う程度のアイコンなら 50〜80% 削減が実績値です。

こんなときに使う

  • デザイナーから受け取った Illustrator/Figma 出力 SVG をサイトに載せる前に
  • Inkscape で作ったアイコン・ロゴの最終工程
  • アイコンセットを一括配布する前の軽量化
  • Lighthouse / PageSpeed Insights の画像サイズ警告を減らす
  • インライン SVG として HTML に埋め込む前 (小さければインライン化可能)

よくある質問

Q. 見た目が変わることはありませんか?
デフォルト設定では、ピクセル単位で見分けのつかない精度の範囲内でのみ最適化します。Before/After プレビューで視覚的に確認できますので、万一違いが気になる場合は小数桁数を 4〜6 に上げてください。なお、「ID を保持」を無効のままだと CSS/JS から参照している SVG は動作が崩れる可能性があるため、外部参照がある場合はオプションを有効にしてください。
Q. SVGO って何ですか?
SVGO (SVG Optimizer) は svg.js / svg 関連ツールの開発者たちが作るデファクトスタンダードの SVG 最適化ライブラリです。MIT ライセンスで Node.js / Browser 両対応。本ツールは最新の v4 を使用しており、ブラウザ内で直接実行しています (サーバー送信なし)。
Q. 手書きの SVG でも最適化効果ありますか?
手書きでも、小数桁の丸め (例: 50.0 → 50)、空白・改行の削除、rect/circle/line の path への変換、未使用属性の除去などで 10〜30% の削減は見込めます。ただし Inkscape/Illustrator 出力ほど劇的には減りません (メタデータがもともと少ないため)。
Q. viewBox って削除してもいい?
SVG をレスポンシブに伸縮させる場合 viewBox は必須です。width/height の固定値のみで使う場合は削除しても動きますが、将来の変更を考えると保持を推奨します。デフォルト設定では viewBox を保持します。
Q. 処理に失敗することはありますか?
ごくまれに、壊れた SVG (閉じタグ不足、壊れたパスデータなど) でパースエラーが出ることがあります。その場合はエラーメッセージが表示されるので、元の SVG を修正してから再試行してください。正しく書かれた SVG ならほぼ 100% 成功します。
このツールを評価
—(0件)