SVG 最適化ツール

SVG 最適化ツールとは？

SVG 最適化ツールは、手書きや書き出しの SVG を公開前に軽くしたいウェブデザイナー、アイコン作者、フロントエンド開発者向けの無料のブラウザ内ツールです。ベクターエディタは目に見えない重さを大量に付け足します：XML コメント、メタデータブロック、Inkscape／Sodipodi／Illustrator の名前空間属性、余分な小数桁、子要素のないラッパーグループなどです。本ツールはブラウザ自身の DOMParser でマークアップを解析し、有効にしたクリーンアップを適用して、より引き締まった SVG を再シリアライズします。「設定」で各ステップを切り替え、座標の丸め精度を決め、最適化前・最適化後・削減の統計で効果を確認してください。インライン SVG アイコン、スプライトシート、ロゴ、イラストを軽くしたり、コードに貼り付ける前に乱れたマークアップを整えるのに使えます。

SVG 最適化ツールの使い方

1. SVG ソースを入力欄に貼り付ける、または接続します。
2. 「設定」を開いて実行するクリーンアップを選びます：座標の丸め、コメント除去、メタデータとエディタ属性の除去、空グループの除去。
3. 座標の丸めが有効な場合、サイズと精度のバランスを取るために精度（小数 0〜5 桁）を設定します。
4. 最適化前・最適化後・削減のサイズ統計を見て、どれだけ小さくなったかを確認します。
5. 出力欄から最適化された 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"><g></g><circle cx="5" cy="5" r="3"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3"/></svg>

よくある質問

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

有効にしたトグルに応じて：XML コメント、<metadata>・<title>・<desc> 要素、エディタ固有の名前空間属性（Inkscape・Sodipodi・Illustrator など）、子要素のないグループ（<g>）を除去します。さらに数値属性とパスデータを指定した小数桁数に丸めることもできます。

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

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

可能な限り最小のファイルになりますか？

いいえ。安全な構造的クリーンアップ（コメント・メタデータ・エディタ属性・空グループ・座標の丸め）は行いますが、パスの結合やスタイルの圧縮、重量級ライブラリが行うすべての変換までは行いません。ほとんどのアイコンや書き出しでは、削減統計に表示される効果は十分大きいはずです。

SVG が無効な場合はどうなりますか？

マークアップを SVG として解析できない場合はエラーメッセージが表示され、出力は生成されません。マークアップを修正（例えばタグの対応を整える）すると結果は自動的に更新されます。

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

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