When should you use inline SVG vs an img?

Question

Accepted Answer

SVG is a **vector** image format (XML-based), so it scales to any size without blurring. You can include it two main ways, each with trade-offs. ## Inline SVG — markup directly in the HTML ```html ``` **Pros:** you can style it with CSS (`fill`, `stroke`), animate its parts, change color via `currentColor` (inherits text color), and respond to events — because it's real DOM. No extra HTTP request. **Cons:** bloats the HTML, not cached separately, repeated icons duplicate markup. ## SVG via `` — referenced as a file ```html

``` **Pros:** cached by the browser, keeps HTML clean, simple. **Cons:** you **cannot** style or script its internals with your CSS/JS — it's an opaque image. ## Decision guide ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## Accessibility ```html ``` ## Why it matters Choosing inline vs `` SVG comes down to whether you need to **style/animate** the graphic (inline) or just **display** it efficiently (``). Icons that change color on hover or theme go inline (often as components); static brand assets go via ``. Either way, vectors stay crisp at every resolution — ideal for icons and logos.

Inline SVG — markup directly in the HTML

SVG via <img> — referenced as a file

Decision guide

Accessibility

Why it matters

SVG via `<img>` — referenced as a file