📐 SVG最適化ツール

概要

InkscapeやAdobe Illustrator、FigmaなどのツールからエクスポートされたSVGファイルには、エディタ固有のネームスペース（sodipodi:、inkscape:）・メタデータブロック・XMLコメント・余分な空白など、大量の不可視のオーバーヘッドが含まれていることがよくあります。このツールはブラウザ独自のDOMエンジンでSVGをパースし、そのオーバーヘッドを保守的な方法で取り除きます。座標・色・パスデータは一切変更しないため、最適化後もグラフィックはまったく同じに見えます。クリーニング済みファイルをダウンロードする前に、横並びのサイズ比較とライブレンダリングプレビューで視覚的な変化がないことを確認できます。

使い方

1. SVGマークアップを入力ボックスに貼り付けるか、「ファイルを読み込む」をクリックしてデバイスから.svgファイルを開いてください。
2. 「最適化」をクリックして、コメント・メタデータ・Inkscape/Sodipediエディタ要素を取り除くDOMベースのクリーナーを実行します。
3. 最適化前後のサイズ比較を確認し、ライブSVGプレビューでグラフィックが視覚的に変わっていないことを確かめてください。
4. 最適化されたSVGコードを直接コピーするか、「ダウンロード」をクリックしてクリーニング済みの.svgファイルをデバイスに保存してください。

よくある質問

最適化するとSVGの見た目は変わりますか？

いいえ。このツールはコメント・メタデータ・エディタ固有の要素など不可視のオーバーヘッドを取り除き、空白を整理するだけです。パス・図形・色・変換は一切変更されません。

どのようなエディタ固有の不要データを削除しますか？

InkscapeおよびSodipediのネームスペース要素と属性、RDF/ダブリンコアのメタデータ、XMLコメント、タグ間の不要な空白を削除します。これらはエクスポートされたSVGで最も多く見られる肥大化の原因です。

SVGコードはサーバーに送信されますか？

いいえ。すべてのパースとクリーニングはDOM APIを使ってブラウザ内のみで行われます。SVGコードがデバイスの外に出ることはありません。

どれくらいファイルサイズを削減できますか？

削減量はソースによって異なります。メタデータが完全なInkscapeファイルは通常10〜40%縮小します。すでにスリムにエクスポートされたファイルは2〜5%程度にとどまることがあります。ツールは各実行後に正確なバイト数と節約パーセンテージを表示します。

FigmaやAdobe IllustratorからエクスポートされたSVGに使えますか？

はい。このオプティマイザーはあらゆるソースのSVGに対応します。Figmaのエクスポートはすでにかなりクリーンなので、削減量は控えめです。Illustratorのエクスポートには埋め込みフォントやICCプロファイルが含まれることが多く、この保守的なクリーナーは意図的にそれらをそのまま残します。