Skip to main content
Home / The Lodge / Everything You Need To Know About SVG / 09: SVG with Data URIs

09: SVG with Data URIs

We've covered "inline SVG" - which is dropping the SVG syntax right into HTML. You can use that same inline SVG in other places as well, like in an <img> or background-image. It's pretty weird.

It's like:

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

You drop the entire SVG syntax in there where you see the <svg> start there.

Likewise in CSS:

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Beyond that, you can convert SVG into Base64 encoding, and that works as the Data URI as well, like:

<img alt="" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc">

And that works in CSS as well (probably other places, anywhere you would use a graphic.)

See the Pen SVG using Data URI (Multiple Ways) by Chris Coyier (@chriscoyier) on CodePen.

icon-link icon-logo-star icon-search icon-star