SVGビューアー＆最適化
この SVG ビューア・最適化ツールは、貼り付けた SVG をライブプレビューで表示し、XML 宣言、コメント、title・desc・metadata 要素、余分な空白を取り除いて圧縮し、削減できたサイズを表示します。
このツールについて
この SVG ビューア・最適化ツールは、貼り付けた SVG をライブプレビューで表示し、XML 宣言、コメント、title・desc・metadata 要素、余分な空白を取り除いて圧縮し、削減できたサイズを表示します。
使い方
- 入力欄に SVG コードを貼り付けます。
- ライブプレビューを確認します。
- 「SVG を最適化」をクリックして圧縮し、削減されたサイズを確認します。
- 出力をコピーするか、.svg ファイルとしてダウンロードします。
知っておきたいこと
- Illustrator や Inkscape などのエディタは、ブラウザには不要なコメント、メタデータ、空白を追加することがよくあります。
- これらのマークアップを取り除くと、見た目を変えずに SVG をはっきり小さくできることが多いです。
- この最適化ツールは title と desc 要素を削除します。SVG にアクセシブルな名前が必要な場合は title を残してください。
- プレビューは SVG を画像として表示するため、ファイル内のスクリプトは実行されません。
- SVG ファイルは、Web サーバーの gzip や Brotli でよく圧縮されます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
SVG ファイルを表示するには？
最新のブラウザで開くか、ここにコードを貼り付ければすぐにプレビューを確認できます。
SVG のファイルサイズを減らすには？
エディタのメタデータ、コメント、不要な空白を取り除きます。「SVG を最適化」はこれを行います。さらに削減したい場合は、SVGO のようなツールでパスを単純化することもできます。
ここに SVG コードを貼り付けても安全ですか？
はい。SVG はブラウザ内だけで処理・プレビューされ、画像として表示されるため、埋め込まれたスクリプトは実行されません。
最適化すると SVG の見た目が変わりますか？
いいえ。削除されるのはコメント、メタデータ、空白など見た目に関係しない部分だけで、図形や色はそのままです。