SVGオプティマイザー

SVGを貼り付けるかドロップして、コメント、メタデータ、エディタ由来のゴミ、余分な空白を取り除きます。サイズの縮小をリアルタイムに確認できます。

クリックして.svgファイルを選択するか、ここにドラッグ&ドロップしてください

または下のボックスにSVGマークアップを直接貼り付けてください。端末内に留まります。

width/heightを削除(viewBoxのみ残す)

プレビューはここに表示されます。


          

仕組み

クリーンアップ処理では、XML/DOCTYPE宣言、<!-- comments -->、エディタ専用の名前空間やメタデータ(Inkscape、Sketch、Illustratorのエクスポート属性、デザインツールが残す<metadata><title>ブロック)を削除し、タグ間の冗長な空白を圧縮します。これらはいずれもSVGの描画結果に影響しません。任意で、ルート要素の明示的なwidth/height属性を削除し、SVGが純粋にviewBoxに基づいてスケーリングされるようにすることもできます。レスポンシブに埋め込む際に便利です。

すべての処理は入力した文字列に対するテキスト処理で、結果が有効なXMLのままであることを保証するために、ブラウザ自身のDOMパーサーを使って行われます。アップロードは一切行われません。

よくある質問

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

いいえ、削除されるのはすべて目に見えないメタデータ(コメント、XML宣言、エディタ固有の属性)やタグ間の意味のない空白だけです。描画される図形は同一で、変わるのはファイルのバイトサイズだけです。

最適化してもファイルサイズがあまり小さくならないのはなぜですか?

サイズの大部分が実際のパスデータ(複雑な図形の多数のポイント)や埋め込みラスター画像から来ている場合、そのデータは表示コンテンツの一部であるため、クリーンアップだけでは大きくは縮小しません。このツールは、図形をわずかに変えてしまう可能性のあるパスの簡略化ではなく、安全で無損失なクリーンアップに重点を置いています。

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

いいえ。最適化はすべてブラウザのJavaScriptで完結します。アップロードは一切行われません。