SVGプレビュー / エディター

SVG Preview / Editor の仕組み

このツールでできること

SVG Preview / Editor は、編集しながらSVGマークアップをライブでレンダリングし、メタデータ（width、height、viewBox、要素数）を抽出して素早く確認できます。トグルで市松模様の背景を追加し、透明領域をはっきり見えるようにできます。また、CSSの background-image やHTMLの src 属性で直接使える、URLエンコードされたdata URIも生成します。

開発者によくある利用シーン

アイコンデザイナーは、異なるサイズでのviewBoxの計算やstroke幅をテストします。フロントエンド開発者は、最適化（手動またはSVGO）後でも手編集したSVGアイコンが正しくレンダリングされるかを確認します。メール開発者は、HTMLにインライン化するためにブランドマークのコンパクトなdata URI版を生成します。教育者は、preserveAspectRatio や overflow といった属性がレンダリングに与える影響を示します。

データ形式、型、またはバリエーション

入力は生のSVG XMLマークアップです。出力は、サンドボックス化されたiframeでレンダリングされた同じSVGと、URLエンコードされたdata URI（data:image/svg+xml;charset=utf-8,…）です。要素数メトリクスは、すべての開始タグ（defs、g、グラデーションなどの入れ子要素を含む）を数え、複雑さの目安を提供します。抽出された属性値は生の形式で表示されます。

よくある落とし穴とエッジケース

href を持つ `use` 要素や `image` 要素が参照する外部リソースは、サンドボックス化されたiframe内では読み込まれません。script 要素内のインラインJavaScriptはサンドボックスによりブロックされるため、アニメーションはSMILまたはCSSキーフレームに依存する必要があります。システムにインストールされていない特定のフォントに依存するSVGは既定フォントにフォールバックします。プレビューではフォントを埋め込むか、システムフォントを使用してください。

コードではなくこのツールを使うべき場面

一度きりのアイコン制作、デバッグ、またはdata URIの生成にはブラウザツールを使ってください。本番アセットでは、調整した設定でSVGOに通してメタデータを削除しマークアップを最小化し、data URIをあちこちにインライン化するのではなく、スプライト方式や適切なバンドラー統合でアプリにアイコンを読み込ませてください。