SVG 圧縮・最適化ツール

最適化で壊れていないかを確かめる

SVGO の処理が終わると、元のファイルと結果を長辺 400 ピクセルでブラウザに描かせ、1 ピクセルずつ比べます。色かアルファの差が 24/255 を超えるピクセルを「変化あり」と数え、全体の 0.1% 以下ならアンチエイリアスの誤差として「描画結果は同じです」と表示します。それを超えると、変わった場所を赤で示した差分画像が出ます。

HTML からコピーした SVG には xmlns=“http://www.w3.org/2000/svg” がないことがよくあります。インラインなら表示されますが、.svg ファイルとしては画像として開けません。このツールは最適化の前に補い、注意として表示します。

例：レイヤー名が ID に残った SVG

Illustrator はレイヤー名やグループ名を SVG の ID として書き出します（ASCII.jp「基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法」）。次は、レイヤー名「レイヤー 1」がルートの id と data-name に残り、色が .cls-1 などのクラスで指定された 373 バイトのボタン背景です。

<svg id="_レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
  <defs>
    <style>
      .cls-1 {
        fill: #e60012;
      }

      .cls-2 {
        fill: #fff;
      }
    </style>
  </defs>
  <rect class="cls-1" x="0" y="0" width="120" height="40" rx="8" ry="8"/>
  <circle class="cls-2" cx="20" cy="20" r="8"/>
</svg>

既定の設定では 209 バイトになり、描画は同じです。

<svg xmlns="http://www.w3.org/2000/svg" data-name="レイヤー 1" viewBox="0 0 120 40"><rect width="120" height="40" rx="8" ry="8" style="fill:#e60012"/><circle cx="20" cy="20" r="8" style="fill:#fff"/></svg>

注意は 2 件です。#_レイヤー_1 はファイル内で参照されていないので削除され、.cls-1 と .cls-2 は 1 回しか使われていないので style 属性に書き込まれました（inlineStyles）。サイトの CSS で .cls-1 の色を変えていた場合、見た目は同じでもその指定は効かなくなります。一方、data-* 属性は SVGO の既定では消えないため、data-name=“レイヤー 1” は残ります。消したい場合は Illustrator 側の書き出し設定を見直すか、出力を手で直してください。

例：小さくならないファイル

Wikimedia Commons の大韓民国の国旗（589 バイト）は、すでに手作業で最適化されています。SVGO にかけると 816 バイトに増えます。卦の rotate(33.69006752598) を convertTransform がパスの座標に書き込み、回転後の座標は桁数が多いためです。このツールは「元のファイルより大きい」と表示します。小数点以下を 1 桁にしても 603 バイトで、描画比較では卦の線の位置にわずかな差が出ます。

壊れやすい設定

スクリプトと出所のわからない SVG

既定の SVGO は <script> や onclick などのイベント属性を残します。このツールはその数を注意に表示します。「スクリプトとイベント属性を削除」をオンにすると removeScripts が動き、SVGO 4.1.0 では <foreignObject> 内の HTML のイベント属性も削除されます。ブラウザは画像として使われた SVG（<img> や CSS 背景）ではスクリプトも外部ファイルも読み込みませんが、直接開いたとき、インラインで置いたとき、<object> や <iframe> で埋め込んだときは実行されます（MDN「画像としての SVG」）。このページのプレビューは画像なので、貼り付けた SVG のスクリプトはここでは動きません。SVGO は最適化ツールで、ユーザーがアップロードした SVG を無害化する専用の仕組みの代わりにはなりません。

複数ファイルとビルドへの組み込み

アイコンのフォルダをまとめてドロップすると、ファイルごとに最適化前後のサイズ、削減率、描画比較の結果が 1 行ずつ並び、「すべてダウンロード（.zip）」で元のファイル名のまま保存できます（.svgz は展開して .svg で保存）。設定が決まったら設定パネルの svgo.config.mjs をコピーし、プロジェクトで npx svgo@4.1.0 —config svgo.config.mjs -f icons -o icons-min を実行すれば、同じ結果が得られます。

ほかのツールとの違い

2026 年 10 月 2 日、同じファイルで試しました。MiniWebtool の SVG 最適化ツール（Bing「svg 最適化」1 位）は、貼り付けた SVG コードをフォームで自社サーバーに送信します。xmlns のない SVG は 119 → 119 バイトのまま、コメントも残って返ってきましたが、何のメッセージも出ませんでした。iLoveIMG（Bing「svg 圧縮」1 位）はファイルを api11.iloveimg.com/v1/upload にアップロードします。SVGOMG は SVGO 4.0.0 をローカルで動かしますが、1 ファイルずつで、ID の削除やファイルの増加を知らせません。いずれも最適化前後の描画比較はありません。

制限

• 1 ファイル 50 MB まで。10 MB を超えるファイルは最適化しますが、描画は比較しません。
• XML のエラーは、入力したテキストでの行と列（文字単位）と、ページの言語での理由を表示します。xmlns のない <svg><rect></svg> は 1 行 17 列で、終了タグ </svg> が最後に開いた要素と対応していないと表示します。ツールが補う xmlns は列に数えません。
• アニメーションは最初のフレームだけを比較します。外部の画像・フォント・<use href=“other.svg#id”> は画像として読み込まれないため、比較の対象外です。
• ファイル外の CSS や JavaScript がどの ID・class を使っているかは SVGO にはわかりません。注意には消えたものだけが出ます。
• 埋め込まれた PNG・JPEG は再圧縮されません。パラメーターが必要な 5 つのプラグイン（removeAttrs など）にはスイッチがありません。
• 「React コンポーネント（JSX）」形式のコピーでは、コメント・<style> ブロック・style 属性を SVG → JSX コンバーターと同じ方法で変換します。React のスタイルオブジェクトで保持できない style（SVGO が残す fill:red!important など）は変換せず、ボタンの下に理由を表示してそのファイルのコピーを無効にします。ダウンロード、一覧の行ごとのダウンロード、ZIP は最適化した SVG をそのまま保存し、ほかのコピー形式にも影響しません。

最適化した SVG をビットマップにするなら SVG PNG 変換ツール、TypeScript や forwardRef 付きの React コンポーネントにするなら SVG → JSX コンバーター、Data URI で埋め込むなら 画像 Base64 変換ツールが使えます。