SVGビューアー
生のSVGマークアップを貼り付けると、描画結果をすぐ確認できます。
スクリプトや外部参照を無効化した安全プレビューで、viewBoxやサイズ情報も確認できます。
SVGプレビュー: 生コードを貼るだけで即確認
viewBox / サイズ確認: 透過や危険要素の有無も把握
入力したSVGはサーバーへ送信されません。ブラウザ内だけで処理します。
危険要素や外部URL参照は無効化して表示します。
使い方
- SVGコードを貼り付けるか、`.svg` ファイルを読み込みます。
- 背景色や拡大率を切り替えて表示を確認します。
- viewBox やサイズ情報、警告内容を確認して必要ならSVGを保存します。
サンプル
シンプルなアイコンSVG
入力
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
出力
青い円形アイコンが描画され、viewBox が `0 0 120 120` と表示されます。
よくある質問
SVGはアップロードされますか？
いいえ。貼り付けたSVGや読み込んだファイルはサーバーへ送信せず、ブラウザ内だけで処理します。
script や foreignObject を含むSVGはどうなりますか？
安全プレビューでは該当要素を除去して表示し、情報欄に警告を出します。
外部画像や外部フォントを参照するSVGは再現されますか？
外部参照は無効化するため、元の環境とは見え方が変わる場合があります。ローカル確認向けに安全性を優先しています。
SVGが表示されないのはなぜですか？
タグの閉じ忘れ、属性値の不正、ルート要素が `svg` でないなどが主な原因です。エラー欄の文言を確認してください。
背景を変える意味は何ですか？
透過部分や白系アイコンの見え方は背景で大きく変わるため、市松・白・濃色を切り替えて確認できるようにしています。
注意事項
- 安全性のため、外部URL参照や危険要素は無効化して表示します。
- 外部フォントや外部画像に依存するSVGは、元の環境と同じ見え方にならないことがあります。
- 非常に大きいSVGはライブ更新を自動的に抑制し、手動更新を促します。