09: SVG with Data URIs

(Updated on )

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.