Three ways to embed SVG in HTML with code examples, trade-offs, and a decision guide.
There are three main ways to add SVG to HTML, each with different capabilities for styling, animation, and caching.
Method 1: <img> Tag
Simplest method — treat SVG like any image. Browser caches it. Cannot style internals with CSS or animate individual paths.
Method 2: Inline SVG
Paste SVG code directly into HTML. Full CSS control, JavaScript interaction, currentColor inheritance. Best for icons and interactive graphics. Downside: not cached separately.
Method 3: CSS Background Image
Use as background-image in CSS. Good for decorative elements. Cannot be styled, animated, or made accessible.
Decision Guide
| Need | Best Method |
|---|---|
| Static logo in header | <img> tag |
| Icon changing color on hover | Inline SVG |
| Animated loading spinner | Inline SVG |
| Decorative background | CSS background |
| Icon set across many pages | SVG sprite + <use> |
If you have PNG icons, convert them to SVG free with Shape to Vector first, then embed using any method above.