SVG Optimizer — 本物の svgo をブラウザで
svgo の 45 個すべてのプラグインで SVG を軽量化し、各項目を自分でオン・オフし、実際に配信される gzip 後のサイズを確認できます。処理はお使いの端末のバックグラウンド Worker で実行。アップロードも順番待ちも登録も不要です。
使い方
3 ステップ。真ん中はあなたが決めます。
- 1
ファイルを置く
.svg か .svgz をドラッグ、コードを貼り付け、または別のツールから受け取ります。まだ何も実行されず、ファイルは待機するだけです。
- 2
処理内容を決める
プロファイルを選ぶか、設定を開いて 45 個のプラグインを自分で調整します。各項目には見た目を変えうるかどうかが示されます。
- 3
持ち出す
ダウンロードする、SVG・React コンポーネント・CSS データ URI としてコピーする、あるいはダウンロードフォルダを経由せず次のツールへ直接送れます。
できること
本物の svgo、45 個すべて
業界全体がビルドに使うのと同じエンジンを、ターミナルではなくブラウザで実行します。バランスプロファイルは `npx svgo` と完全に一致するため、ここで見た結果がそのままビルド結果になります。
他が弾くファイルも開ける
エディタは日常的に不正な XML を書き出します。未宣言の inkscape: 接頭辞、単独のアンパサンド、BOM など。厳密なパーサーは文書ごと拒否します。このツールは欠陥を修復し、最適化し、何を直したかを明示します。
目で確かめられる精度
4000% までズームし、ドラッグで移動し、Alt を押している間は同じ倍率で元画像に切り替わります。丸めによる劣化は、割合に現れるずっと前に「揺らぎ」として目に見えます。
実際に配信されるサイズ
生のバイト数と gzip 後のバイト数を並べて表示します。両者は別の話です。空白の除去は生では劇的に見えても、圧縮後はほとんど変わりません。gzip がすでに処理していたからです。
データは端末外に出ません
最適化はブラウザ内のバックグラウンド Worker で実行され、ファイルがアップロードされることはありません。プレビューはさらに踏み込み、スクリプト・イベントハンドラ・外部参照を除去します。悪意ある SVG が閲覧中にコードを実行したり外部通信したりすることはありません。
そのまま次のツールへ
最適化したファイルを、ダウンロードと再アップロードなしに favicon ジェネレータ、形式変換、QR 作成、ZIP 圧縮へ送れます。
よくある質問
SVG はどこかにアップロードされますか？
いいえ。svgo はブラウザ内の Worker スレッドで動作し、ファイルが端末を離れることはありません。プレビューはさらに踏み込み、描画前にスクリプト・イベントハンドラ・外部ファイルへの参照を除去します。送られてきたファイルを開いても安全です。
他のツールでは弾かれるファイルが、なぜここでは通るのですか？
エディタが日常的に不正な XML を書き出すからです。よくある原因は、宣言されていない名前空間の接頭辞です。たとえば xmlns:inkscape が無いのに <g inkscape:groupmode="layer"> と書かれている場合。svgo やブラウザを含む厳密なパーサーは、文書ごと拒否します。このツールは最適化の前にそれを修復し（BOM、単独のアンパサンド、DOCTYPE の内部サブセットも同様）、何を直したかを明示します。
精度はどこまで下げられますか？
図版によります。推測せず、実際に見て判断してください。精度を下げると座標が丸められ、大きな図版や細密な描画では、ファイルがさほど小さくなる前に曲線の「揺らぎ」として目に見えてきます。拡大したうえで Alt を押し続ければ、同じ倍率で結果と元画像を見比べられます。
生の圧縮率と gzip の圧縮率が大きく違うのはなぜですか？
測っているものが違うからです。空白の除去や属性名の短縮は生のバイト数では劇的に見えますが、gzip はもともとその繰り返しをまとめていたため、圧縮後のサイズはほとんど動きません。ジオメトリの変更、とりわけ convertPathData は両方を縮めます。サーバーが圧縮レスポンスを返すなら（ほぼすべてのサーバーがそうです）、意味を持つのは gzip の数字です。
結果はビルドの svgo と一致しますか？
バランスプロファイルなら一致します。svgo 自身の preset-default そのもので、プラグインの順序も既定値も同じです。スイッチを 1 つでも変えればそこから外れ、その旨は「手動」表示で分かります。
一部のプラグインにある「挙動が変わる」とは？
そのプラグインが単にファイルを小さくするのではなく、ファイルの振る舞い自体を変える、という意味です。removeViewBox は SVG の拡大縮小を止めます。removeDimensions は自身のサイズではなくコンテナいっぱいに広がるようにします。removeTitle はスクリーンリーダーが読み上げるアクセシブル名を消します。いずれも既定でオフで、「すべて有効」ボタンでも有効になりません。