SVG 最適化ツール

SVG 最適化ツールとは？

SVG 最適化ツールは、手書きや書き出しの SVG を公開前に軽くしたいウェブデザイナー・アイコン作者・フロントエンド開発者向けの無料のブラウザツールです。ベクターエディタは見えない重さを加えます：XML コメント、メタデータ、Inkscape/Sodipodi/Illustrator 属性、余分な小数、無意味な transform、ラッパーグループ、どこからも参照されない ID や defs。「設定」で各クリーンアップを切り替え、マークアップを貼るか .svg をドロップすると、元と最適化後の描画が並んで更新され、最適化前・後・削減・Gzip・Brotli の統計で効果を確認できます。結果をコピーするか .min.svg として保存します。インラインアイコン・スプライト・ロゴ・イラストの軽量化に使えます。

SVG 最適化ツールの使い方

1. SVG を貼り付けるか、.svg ファイルをドロップ／アップロードすると、マークアップが入力欄に入ります。
2. 「設定」を開き、必要なクリーンアップだけを切り替えます：座標の丸め、コメント・メタデータ・エディタ属性の除去、空グループ、未使用の ID・defs、transform のまとめ、インラインスタイルの最小化、16 進カラーの短縮、既定値の削除、空白の最小化。
3. 座標の丸めが有効なら精度（小数 0〜5 桁）を設定します。
4. 元と最適化後の描画を並べて比較し、絵柄が保たれているか確認します。
5. 最適化前・後・削減・Gzip・Brotli の統計で実際のサイズ削減を確認します。
6. 最適化された SVG をコピーするか、.min.svg として保存します。

使用例

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

よくある質問

この最適化ツールは具体的に何を除去しますか？

対応するトグルを有効にすると：XML コメント、<metadata>・<title>・<desc> 要素、エディタの名前空間属性（Inkscape・Sodipodi・Illustrator）、空グループ、どこからも参照されない ID、参照されない <defs>。さらに数値属性やパスデータの丸め、無意味な transform のまとめ、style 属性と <style> CSS の最小化、16 進カラーの短縮（#ffffff→#fff）、fill-opacity="1" などの既定表現属性の削除も行います。

座標を丸めると SVG の見た目は変わりますか？

低い精度に丸めると点がごくわずかにずれることがありますが、通常は見えず、ファイルは小さくなります。正確な形状が必要なら精度を上げ（最大 5 桁）、数値をそのまま保ちたいなら座標の丸めをオフにしてください。

ファイルを読み込んで結果をプレビューできますか？

はい。.svg ファイルをドロップ・アップロードするか、マークアップを貼り付けると、元と最適化後の描画が並んで表示され、崩れをすぐに見つけられます。あとは出力をコピーするか、最適化された .min.svg をダウンロードします — アップロードはなく、ファイルはローカルで読み込まれます。

Gzip と Brotli の数値は何ですか？

Gzip サイズは最適化後の SVG をブラウザ内で実際に圧縮して測るため、gzip 接続で流れる実バイトを反映します。Brotli の数値はその gzip サイズから推定した値です（brotli は通常テキストをやや小さく圧縮）。本物の brotli エンコーダはバンドルには重すぎるため、チルダ（≈）で示します。

私の SVG はどこかにアップロードされますか？

いいえ。解析・クリーンアップ・サイズ測定・シリアライズはすべてブラウザ内蔵の DOMParser でローカルに行われます。サーバーへは何も送信されないため、オフラインでも動作し、作品のプライバシーが保たれます。