使い方
- SVGコードを入力
テキストエリアにSVGコードを貼り付けるか、ツールバーから.svgファイルを読み込みます。
- プレビューを確認
「変換」をクリックすると、SVGのレンダリングプレビューと最適化されたコードが表示されます。
- 最適化コードを利用
最適化されたSVGコードをコピーしてWebサイトに埋め込むか、ファイルとしてダウンロードできます。
SVGビューアー & 最適化ツール の具体例
SVGプレビュー
入力
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>出力
（青い円のプレビュー表示 + 最適化されたSVGコード）SVGコードを入力するとリアルタイムにプレビューが表示されます。
SVG最適化
入力
<!-- コメント -->
<svg xmlns="http://www.w3.org/2000/svg" >
<rect width="50" height="50" fill="" />
</svg>出力
<svg xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50"/></svg>コメント、余分な空白、空の属性が除去されます。
特長
- SVGコードのリアルタイムプレビュー表示
- コメント削除による最適化
- 余分な空白・改行の圧縮
- 空属性（fill=""など）の除去
- 最適化前後のファイルサイズ比較
- .svgファイルの読み込み対応
- すべてブラウザ内処理（サーバー送信なし）
よくある質問
SVGOのような高度な最適化はできますか？
このツールはコメント削除、空白圧縮、空属性除去などの基本的な最適化を行います。パスの最適化やシンボルの統合などの高度な処理にはSVGOの使用を推奨します。
どのようなSVGでもプレビューできますか？
ブラウザがレンダリングできるSVGであればプレビュー可能です。外部リソース（画像やフォント）を参照するSVGは、セキュリティ制限により一部表示されない場合があります。
データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内で完結し、データが外部に送信されることはありません。