HTMLにSVGを埋め込むにはいくつかの方法があり、最良の方法は、相互作用、応答性、または単純なディスプレイが必要かなど、ユースケースに依存します。ここに最も一般的で効果的なアプローチがあります：

1。 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175364741525491.jpeg" class="lazy" alt="HTMLにSVGを埋め込む方法は？" >タグを使用します

これは、SVGを親文書からJavaScriptまたはCSSで操作する必要がない場合に、SVGを埋め込む最も簡単な方法です。

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175364741525491.jpeg"  class="lazy"  src = "image.svg" alt = "description" width = "200" height = "200">

長所：

• 使いやすい
• 静的画像に適しています
• キャッシュはうまく機能します

短所：

• SVG内部をCSSでスタイリングできません
• JavaScriptでSVG内の要素を操作することはできません
• 限られたアクセシビリティオプション

svgがロゴやアイコンのようなグラフィックである場合にこれを使用します。

2。 <svg>要素を備えたインラインSVG

SVGコードをHTMLに直接貼り付けることができます。これにより、スタイリングとスクリプトを完全に制御できます。

 <svg width = "200" height = "200" viewbox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg">
  <circle cx = "50" cy = "50" r = "40" fill = "blue" />
</svg>

長所：

• CSS（内部要素でさえ）で完全に熟成可能
• JavaScriptでスクリプト可能
• レスポンシブデザインフレンドリー
• アクセス可能（ARIAラベル、タイトルなどを追加できます）

短所：

• HTMLサイズを増やします
• 複数のページで使用されている場合、ブラウザキャッシュはありません
• 頻繁に再利用すると維持が難しくなります

interactionivity、アニメーション、またはダイナミックなスタイリングが必要な場合は、これを使用します。

3。 <object>タグを使用します

この方法は、インタラクションとスクリプトを保持しながら、SVGを外部ファイルとして埋め込みます。

 <Object Type = "image/svg xml" data = "image.svg" width = "200" height = "200">
  ブラウザはSVGをサポートしていません。
</object>

長所：

• SVGを別のファイルに保持します（キャッシュ）
• SVG内のスクリプトとCSSをサポートします
• 可能なフォールバックコンテンツ

短所：

• 親ページのスタイルを少し複雑にします
• クロスドメインの問題が発生する可能性があります

reusable再利用可能なインタラクティブなSVG（チャート、マップなど）に最適です。

4。 <iframe>または<embed>を使用（あまり一般的ではない）

これらは機能しますが、特定の理由がない限り、通常はお勧めしません。

 <embed src = "image.svg" type = "image/svg xml" width = "200" height = "200">

⚠⚠️ <embed>は時代遅れです。 <object>が望ましい。

5。CSS背景の使用（装飾的なSVG用）

SVGが純粋に装飾的である場合（背景画像のように）、CSSを使用してください。

 。要素 {
  背景：url（ 'image.svg'）繰り返しセンター。
  幅：200px;
  高さ：200px;
  バックグラウンドサイズ：contains;
}

長所：

• 視覚的なデザイン要素に適しています
• HTMLを乱雑ではありません

短所：

• アクセスできない
• スタイルやスクリプト化することはできません
• セマンティックではありません

olsentive本質以外のビジュアルにのみ使用します。

ボーナス：SVGSを応答します

インラインSVGを使用する場合、それをきれいにスケーリングします。

 <svg Viewbox = "0 0 100 100" preserveaspectratio = "xmidymid Meet" style = "width：100％; height：auto;">
  <！ -  svgコンテンツ - >
</svg>

widthとheight属性を削除するか、CSSに設定してスケーリングを可能にします。

クイック決定ガイド：

• 相互作用やアニメーションが必要ですか？ →インラインSVG
• アイコン/ロゴを表示するだけですか？ → <img src="/static/imghw/default1.png" data-src="icon.svg" class="lazy" alt="HTMLにSVGを埋め込む方法は？" >
• 再利用可能でインタラクティブ？ → <object data="chart.svg"></object>
• 純粋に装飾？ → CSSの背景

基本的に、コントロールとシンプルさに基づいて選択します。インラインは最大の力を与えます。 <img alt="HTMLにSVGを埋め込む方法は？" >は最も面倒を与えます。

以上がHTMLにSVGを埋め込む方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。