How can SVG be embedded into an HTML document?

There are several ways to embed SVG into HTML:

• Inline SVG: Embedding SVG code directly into HTML using the <svg> tag.
• <img> tag: Using the <img> tag with the src attribute pointing to the SVG file.
• <object> tag: Embedding SVG using the <object> tag.
• <embed> tag: Embedding SVG using the <embed> tag.
• CSS: Using SVG as a background image through CSS.
• <iframe>: Embedding an HTML page with SVG using <iframe>.

Each method has its features and advantages:

Method	Advantages	Disadvantages	Use case
Inline SVG	Full control, JS/CSS interactivity	Increases HTML size, caching complexity	Small and frequently changing SVGs, icons
<img>	Simplicity, caching	Limited control, no JS interactivity	Static images
<object>	Semantics (external object), JS interactivity	Slightly more complex than <img>, browser support	Complex SVGs, fallback content
<embed>	Simpler than <object>, support for outdated plugins	Not recommended in HTML5	Compatibility with legacy code
CSS Background	Flexible positioning, no extra tags in HTML	No JS interactivity, limited control	Decorative elements, patterns
<iframe>	Full isolation, loading a separate page	Overhead, interaction complexities	Embedding complex, independent elements

Example of Inline SVG:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Example of using <img> tag:

<img src="image.svg" alt="SVG description">

Example of using <object> tag:

<object data="image.svg" type="image/svg+xml">
  <!-- Fallback content -->
  <img src="image.png" alt="Alternative image">
</object>

Example of using CSS:

.element {
  background-image: url('image.svg'); /* Using SVG as background */
  background-size: cover; /* Styling example */
}