SVG プレビューとインスペクター

SVG を貼り付けるかドロップすると即座に描画され、寸法、viewBox、要素の内訳、ユニークカラー、セキュリティフラグを含む統計パネルが表示されます。プレビューはスクリプトと same-origin アクセスが無効化された sandbox 付き iframe 内で動作するため、悪意のある SVG がコードを実行することはできません。画像を SVG または PNG としてエクスポートしたり、白・黒・透明チェッカー柄の背景を切り替えたり、ソースビューに切り替えてマークアップを確認できます。

仕様

• SVG 2 Specification
• MDN: SVG

よくあるユースケース

• SVG のアイコンやイラストを埋め込む前に素早く確認する
• 信頼できない SVG に埋め込まれたスクリプトやイベントハンドラーをチェックする
• SVG の viewBox と固有の寸法を確認する
• SVG のユニークカラー数を数える (パレット抽出や最適化に便利)
• SVG を色付きまたは透明背景の PNG に変換する
• 要素の内訳を確認して、予期しない <script> や <foreignObject> の使用を検出する

機能

• サンドボックス化されたライブプレビュー — SVG は sandbox="" 付き iframe 内で描画され、スクリプトやイベントハンドラーは実行されません
• 背景切り替え: 白・黒・透明チェッカー柄
• 統計パネル: 寸法、viewBox、アスペクト比、バイトサイズ、要素数、主要な要素、ユニークカラー
• セキュリティフラグで <script>、イベントハンドラー、外部参照、アニメーションを含む SVG を強調表示
• SVG または高解像度 (2×) PNG としてエクスポート — PNG エクスポートには選択した背景が焼き込まれます
• 詳細を確認するためのフルスクリーンプレビュー
• シンタックスハイライト付きソースビュー
• 正規化された SVG をクリップボードにコピー

例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

ヒント

• 画像がきれいにスケールするよう、固定の width/height よりも viewBox を優先してください
• Scripts や Event Handlers のバッジが点灯している場合、埋め込むとコードが実行されます — 信頼する前に削除してください
• チェッカー背景は意図しない透過を見つけるのに役立ちます。別ページでの見え方を確認するには白または黒に切り替えます
• PNG エクスポートは 2× 解像度で描画されます。ベクター品質を保つには SVG エクスポートを使ってください
• 外部参照 (http:// の href) はサンドボックスプレビューでは読み込まれません — これは意図的な動作です