There are several ways to embed an SVG in HTML, and the best method depends on your use case—like whether you need interactivity, responsiveness, or simple display. Here are the most common and effective approaches:

1. Using the <img src="/static/imghw/default1.png" data-src="image.svg" class="lazy" alt="如何將SVG嵌入HTML中？" > tag

This is the simplest way to embed an SVG if you don't need to manipulate it with JavaScript or CSS from the parent document.

 <img src="/static/imghw/default1.png"  data-src="image.svg"  class="lazy" alt="如何將SVG嵌入HTML中？"    style="max-width:90%"  style="max-width:90%">

Pros:

• Easy to use
• Good for static images
• Caching works well

Cons:

• Can't style the SVG internals with CSS
• Can't manipulate elements inside the SVG with JavaScript
• Limited accessibility options

✅ Use this when the SVG is just a graphic, like a logo or icon.

2. Inline SVG with <svg> element

You can paste the SVG code directly into your HTML. This gives full control over styling and scripting.

 <svg width="200"    style="max-width:90%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Pros:

• Fully styleable with CSS (even internal elements)
• Scriptable with JavaScript
• Responsive design friendly
• Accessible (can add ARIA labels, titles, etc.)

Cons:

• Increases HTML size
• No browser caching if used across multiple pages
• Harder to maintain if reused often

✅ Use this when you need interactivity, animation, or dynamic styling.

3. Using the <object> tag

This method embeds the SVG as an external file while preserving interactivity and scripting.

 <object type="image/svg xml" data="image.svg" width="200" height="200">
  Your browser does not support SVG.
</object>

Pros:

• Keeps SVG in a separate file (caching)
• Supports scripting and CSS inside the SVG
• Fallback content possible

Cons:

• Slightly more complex to style from the parent page
• Cross-domain issues may arise

✅ Great for reusable, interactive SVGs (eg, charts, maps).

4. Using <iframe> or <embed> (less common)

These work but are generally not recommended unless you have a specific reason.

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

⚠️ <embed> is outdated; <object> is preferred.

5. Using CSS background (for decorative SVGs)

If the SVG is purely decorative (like a background image), use CSS:

 .element {
  background: url('image.svg') no-repeat center;
  width: 200px;
  height: 200px;
  background-size: contain;
}

Pros:

• Good for visual design elements
• Doesn't clutter HTML

Cons:

• Not accessible
• Can't be styled or scripted
• Not semantic

✅ Use only for non-essential visuals.

Bonus: Make SVGs Responsive

When using inline SVG, make it scale nicely:

 <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:100%; height:auto;">
  <!-- SVG content -->
</svg>

Remove width and height attributes or set them in CSS to allow scaling.

Quick decision guide:

• Need interaction or animation? → Inline SVG
• Just showing an icon/logo? → <img src="/static/imghw/default1.png" data-src="icon.svg" class="lazy" alt="如何將SVG嵌入HTML中？" >
• Reusable and interactive? → <object data="chart.svg"></object>
• Purely decorative? → CSS background

Basically, choose based on control vs. simplicity. Inline gives the most power; <img alt="如何將SVG嵌入HTML中？" > gives the least hassle.

以上是如何將SVG嵌入HTML中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！