Inline SVG vs <img> vs background-image
There are three common ways to place an SVG icon, and they behave very differently. Pick based on whether you need to recolor it, cache it, or keep your markup clean.
1. Inline SVG
The SVG markup lives directly in your HTML. Pros: full CSS control (fill, stroke, animation), no extra request, screen-reader accessible. Cons: bloats the HTML and isn't cached separately. Best for a handful of interactive or recolorable icons.
2. <img src="icon.svg">
Reference the file like any image. Pros: clean markup, cached by the browser, lazy-loadable. Cons: you can't recolor it with CSS (the SVG's internal styles are isolated). Best for decorative or fixed-colour icons and logos.
3. CSS background-image
Set background: url(icon.svg). Pros: keeps icons out of the markup entirely, cached. Cons: not accessible to screen readers (it's decorative), and not directly recolorable unless you use it as a mask. Best for purely decorative flourishes.
| Need | Best choice |
|---|---|
| Recolor with CSS | Inline SVG (or mask) |
| Cleanest markup + caching | <img> |
| Purely decorative | background-image |
| Animate the icon | Inline SVG |
Frequently asked questions
Which is best for performance?
For many repeated icons, <img> or a sprite caches well. For a few critical icons, inline avoids an extra request. Measure for your case.
How do I make an img SVG accessible?
Give it meaningful alt text, or alt="" if it's decorative.