What are the different ways to use SVG in web pages and their respective pros and cons

SVG can be used in web pages in multiple ways, each with its own use cases and pros and cons:

1. Inline SVG

html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

• Pros: Full control over styles and interactions via CSS and JavaScript; reduces HTTP requests; supports animations and events
• Cons: Increases HTML file size; not suitable for frequently reused graphics
• Use cases: Interactive icons, animations, unique graphics

2. As img tag reference

html
<img src="icon.svg" alt="icon" />

• Pros: Clean code; can be cached; suitable for frequently reused graphics
• Cons: Cannot control internal styles via CSS; no support for interaction and animation
• Use cases: Static icons, logos, non-interactive graphics

3. As background-image

css
.icon {
  background-image: url('icon.svg');
  background-size: contain;
}

• Pros: Can apply CSS effects (like hover); suitable for icon systems
• Cons: Cannot control internal elements; no interaction support
• Use cases: Icon font alternatives, decorative graphics

4. Using object tag

html
<object data="icon.svg" type="image/svg+xml"></object>

• Pros: Supports external CSS files; can access SVG DOM
• Cons: Slightly poorer browser compatibility; complex loading
• Use cases: Complex graphics requiring external style control

5. Using embed tag

html
<embed src="icon.svg" type="image/svg+xml" />

• Pros: Supports script access; good compatibility
• Cons: Non-standard element; not recommended
• Use cases: Legacy projects requiring backward compatibility

Best Practice Recommendations:

• Use inline SVG when interaction or animation is needed
• Use img or background-image for static icons
• Consider object or inline for complex graphics
• For large numbers of icons, consider using SVG sprite technique