SVG コードエディター（プレビュー付き）

機能

• 左にコード、右にその場で描画。1文字変えるたびに更新されます
• 背景はチェッカー / 明るい / 暗いを切り替え可能。チェッカーは透過の確認用です
• `xmlns` が無い場合はプレビュー用に補い、ご自身のファイルにも必要だと知らせます
• ダウンロードされるのは `xmlns` を補った版です（無いと他の場所では表示されません）
• チェック項目：xmlns の欠落、viewBox の欠落、外部リソースの参照、script / on* の有無、末尾の閉じ忘れ
• viewBox の寸法・幅高さ・バイト数を表示
• あなたのコードはページの DOM に入らず、スクリプトも実行されません
• すべてブラウザ内で完結し、送信はありません

使い方

1. 左に SVG コードを貼り付けます（「サンプル」でも可）
2. 右にすぐ描画され、編集すると図も変わります
3. 下の「チェック」に指摘が出ていないか確認します —— エラーを出さずに効かない書き方です
4. コピーするか `.svg` をダウンロードします（xmlns を補った版です）

よくある質問

プレビューが画像なのはなぜですか？

安全のためです。他人の SVG をページに埋め込む（`innerHTML`）と、任意のコードを当サイトのオリジンに入れることになります：`<svg onload="…">` も `<script>` も実行され、しかもそれは他所からコピーしてきたコードです。`<img src>` として描画すれば SVG は独立した文書になり、スクリプトは実行されず、外部リソースも読み込まれません（仕様どおり）。当サイトのものには一切触れられません。代償は SVG の DOM が見えないことですが、このツールには不要です。

貼り付けた SVG が何も表示されないのはなぜですか？

最も多いのは `xmlns` の欠落です：`xmlns="http://www.w3.org/2000/svg"` の無い `<svg>` は、HTML への埋め込みなら問題ありませんが（親文書の名前空間が引き継ぎます）、独立したファイルや画像としてはまったく表示されず、コンソールには素っ気ない読み込み失敗だけが出ます。このツールはプレビュー時に補い、チェック欄でご自身のファイルにも必要だと伝えます。他には、閉じていないタグ、外部の画像やフォントの参照（画像としては読み込まれません）が原因になります。

コードに誤りがあっても指摘されないのはなぜですか？

ブラウザは SVG に非常に寛容だからです：閉じていないタグ、綴り間違いの属性、誤った座標でも、たいていはそのまま描画され（一部が欠けるか位置がずれるだけ）、エラーになりません。このツールが報告するのは「まったく描画できない」場合、つまり `<img>` の読み込み失敗だけです。コードが正しいかを判断する最も確実な方法はプレビューを目で見ることで、チェック欄は「エラーは出ないが必ず効かない」書き方（xmlns 欠落・viewBox 欠落・外部参照）を並べます。

viewBox と width / height はどちらを書くべきですか？

両方、そして `viewBox` のほうが重要です。 `viewBox` は座標系（図形がどのようにサイズへ対応するか）を定義し、`width` / `height` は既定の表示サイズにすぎません。幅高さだけで viewBox が無いと拡大縮小できず、拡大すればビットマップのようにぼやけます。viewBox だけならレスポンシブな書き方で、コンテナいっぱいに広がりサイズは CSS が決めます（当サイトのアイコンはすべてこの形なので、チェックは何も言いません）。