How to embed an SVG in HTML

There's more than one way to get an SVG onto a page, and each suits a different need. Here's a quick tour with the trade-offs.

The five methods

Inline — paste the <svg> into your HTML. Full CSS/JS control; best for interactive or recolorable icons.
<img src="icon.svg"> — clean and cacheable; can't recolor with outer CSS.
<object data="icon.svg"> — loads the SVG's own scripts/styles; rarely needed for icons.
CSS background-image — decorative only; not in the accessibility tree.
Data URI — embed the SVG directly in CSS/HTML as text; saves a request for tiny, rarely-changing icons.

Quick guide

Recolor or animate? Inline. Logo or fixed-colour icon in content? <img>. Pure decoration? Background. One-off tiny icon you don't want as a separate file? Data URI.

/* data URI example */
.icon { background: url('data:image/svg+xml;utf8,<svg …></svg>') no-repeat; }

Frequently asked questions

What's the best way to embed an SVG?

For icons you want to style, inline. For fixed images and logos, <img>. There's no single best — match the method to the need.

Are data-URI SVGs good for performance?

For tiny, rarely-changing icons they save a request. For many/large icons they bloat your CSS/HTML and aren't cached separately.