DevToolbox

無料オンライン SVG Optimizer

SVGファイルをオンラインで最適化・圧縮・クリーニング。Inkscape/Illustratorのメタデータ、コメント、空グループ、不要な属性を削除。結果をその場でプレビュー。無料、100% クライアントサイド。

100% クライアントサイド · データは一切外部に送信されません

Optimization Options

Optimized output will appear here

使い方 SVG Optimizer

SVG コードを 入力 SVG ペインに貼り付け、最適化オプションを選択して 最適化 をクリックするか Ctrl/Cmd+Enter を押します。

  • コメントを削除<!-- ... --> コメントブロックを除去します。
  • メタデータを削除 — Inkscape/Illustrator が埋め込んだ <metadata> 要素を削除します。
  • エディター属性を削除inkscape:*sodipodi:*data-name 属性と名前空間宣言を削除します。
  • 空白を圧縮 — 属性値内やタグ間の余分なスペースと改行を正規化します。
  • 空グループを削除 — 子要素を持たない <g></g> 要素を除去します。
  • 数値を丸める — パスの d 座標の小数精度を下げます(例:123.456789 → 123.46)。

統計バーに元のサイズと最適化後のサイズ、削減率が表示されます。フォーマット で圧縮済みSVGを整形表示できます。Ctrl/Cmd+K でクリアします。

よくある質問

SVG最適化は何をするのですか?

SVG最適化はレンダリングに不要なデータを削除します:エディターのメタデータ、XMLコメント、空のコンテナ要素、冗長な名前空間宣言、余分な空白。パスデータの過剰な小数点以下の桁数も丸めます。結果はすべてのブラウザで同じに表示されながらファイルサイズが小さくなります。

InkscapeやIllustratorのSVGにはなぜ余分なデータが多いのですか?

InkscapeとAdobe Illustratorはプライベートな名前空間属性(inkscape:*、sodipodi:*、ai:*)とメタデータブロックを埋め込み、編集状態を保持します:レイヤー名、グリッド設定、フォント情報、ドキュメントプロパティなど。これらはエディター内では必要ですが、ブラウザのレンダリングには無関係です。

最適化でSVGの見た目は変わりますか?

このツールのオプションは視覚的に無劣化になるよう設計されています。コメント、メタデータ、エディター属性の削除はレンダリング結果に影響しません。パス数値を小数点以下2桁に丸めることは、一般的な表示サイズでは目に見えません(誤差0.01px未満)。デプロイ前に必ず出力をプレビューしてください。

パスデータの精度がファイルサイズに関係するのはなぜですか?

描画ツールはパス座標を6〜10桁の小数で書き出すことが多いですが、Web表示には1〜2桁で十分です。複雑なイラストでは多数のパスセグメントがあるため、丸めによってファイルの文字数が大幅に減ります。

安全な最適化と安全でない最適化の違いは何ですか?

安全な最適化は視覚的な出力を保持します:コメント、メタデータ、エディター属性、空グループの削除。安全でない最適化は外観を変える可能性があります:viewBox属性の削除、CSSでオーバーライドされた色の変更、JavaScriptが参照するid属性の削除など。このツールは安全な最適化のみを適用します。

SVGOと比べてどうですか?

SVGOは高度なパスマージなど多数のプラグインを持つ業界標準のNode.jsオプティマイザーです。このブラウザツールはインストール不要で最も効果的な最適化をカバーします。本番ビルドパイプラインにはSVGOまたはsvgo Vite/webpackプラグインを推奨し、このツールは単発ファイルに最適です。

関連ツール