Embedding SVG: inline, img tag or CSS — which route when?

Three routes, one goal

SVG is the most flexible image format on the web — including how you embed it. There are three common routes, and the choice isn't a matter of taste but of purpose:

• Inline — the SVG code sits directly in the HTML.
• img tag — the SVG is loaded like an image.
• CSS background — the SVG as a background-image.

Inline: for styling and animation

With inline embedding, the complete SVG code (<svg>…</svg>) sits directly in the HTML. The big advantage: you have access to the inside of the SVG.

• Style with CSS: change colors, adopt the text color automatically via currentColor — ideal for icons that adapt to light/dark mode.
• Animate with JavaScript: move individual paths, react to interactions.
• No extra request: the SVG is part of the HTML.

The downside: inline SVGs are not cached separately and bloat the HTML — especially when the same icon appears twenty times on a page. For interactive, recolorable icons it's still usually the right choice.

img tag: for self-contained images

If the SVG is a finished image (a logo, an illustration) that doesn't need recoloring, the img tag is the better choice:

<img src="/logo.svg" alt="Company logo" width="160" height="40">

• Gets cached: repeated across pages, it loads from the browser cache.
• Lean HTML: one line instead of hundreds of SVG code lines.
• alt text: for accessibility and image search.

The price: no access to the inside via CSS/JS. For a logo that always looks the same, that's no loss.

CSS background: for decoration

Pure decoration (patterns, an icon in a button background, a gradient pattern) belongs in the CSS background-image:

.icon-search {
  background-image: url("/search.svg");
  background-size: 20px;
}

It gets cached, doesn't appear in the HTML content — and counts as decorative, so no alt text. That's exactly why content images don't belong here (see Decorative images and empty alt text).

The decision guide

Before any route: optimize

Whatever the route — an SVG from a design tool often carries needless ballast that bloats it. Run it through the SVG optimizer before embedding; the background is in SVG optimization. A lean SVG makes every embedding route faster.

In short

• Inline for recoloring and animation.
• img tag for cached, self-contained logos with alt text.
• CSS background for pure decoration.
• Optimize first — a lean SVG helps every route.