HTMLにSVGを挿入する方法（4つ）
ウェブ向けガイド
ページにSVGを表示する方法はいくつかあり、用途で使い分けます。代表的な4つを紹介します。
1. インラインSVG（HTML内）
<svg>...</svg> のコードをHTMLに直接貼り付けます。
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#6c8cff"/></svg>
利点：CSSやJSで制御（色変更・アニメーション）。アイコンやインタラクティブな図に最適。
2. img タグ
<img src="icon.svg" alt="アイコン" width="64">
利点：シンプル、キャッシュ可、再利用可。制限：自分のCSSで内部をスタイルできない。
3. object
<object data="graphic.svg" type="image/svg+xml"></object>
利点：独自のインタラクティブ/スクリプトを保つ外部ファイル。現在はあまり使われない。
4. CSS背景として
.box { background-image: url("background.svg"); }
利点：装飾、パターン、背景アイコン。制限：コンテンツではない（アクセシビリティに不利）。
どれを選ぶ？
- 色変更やアニメーションするアイコン → インライン。
- 単純で再利用する画像 → img。
- 装飾 / パターン → CSS背景。
SVGコードを入手
svgdeskのコードパネルから、インラインで貼れる <svg> が得られます。img 用にはファイルを書き出します。