09: SVG with Data URIs | CSS-Tricks

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.

Comments

JonathanBeech

# September 21, 2014

I’m unsure what the advantages are when using data:image/svg+xml;utf8 compared to using just an inline SVG?

Chris Coyier

Permalink to comment# October 21, 2014

One potential thing is DOM weight. With inline SVG, all the shapes are in the DOM, where as an <img> is just that one DOM node.
John Moore

Permalink to comment# October 31, 2014

We use data uris for icons that are repeated. You can have a CSS class that you can apply to everywhere you want the image. If you’re trying to squeeze out every tiny bit of performance, it can be a good strategy.
Sebastian Hädrich

Permalink to comment# October 4, 2019

Instead, you can re-use svg icons via <use /> tag.

Jonathan Duck

# July 15, 2016

Base64 is an encoding.

UTF-8 mainly uses 1 byte (a number from 0-255) for each character. (This assumes you are using only characters that don’t need more, like those in a typical SVG.) Base64 can take any binary data, like an SVG text file or an image file and use 64 different characters to encode that data.

Hello becomes SGVsbG8K, and 'I just broke CSS; becomes J0kganVzdCBicm9rZSBDU1M7Cg==, which can be put in a CSS string.

It will always make your file bigger, but will ensure you can put it anywhere use can use the 64 characters of base64. In CSS, your linebreaks break the document, but in base64 they are encoded, so there is no issue. It is mainly useful for files that have characters you can’t put in your document. Opening an PNG in your text editor and trying to copy and paste it into a CSS file is not likely to end well. ;)

Adam Crockett

# May 28, 2017

How about base 64 encoded svg filters in files… Then webpack them into filter:url(require(‘blur.svg’)); – Now that’s a use case right there. Css backdrop filter early anyone?

vigneshwaran

# August 31, 2017

list-style-image is working fine with the below code but hover is not working. hover is working when tags in html but not CSS, any solution would be great help. thanks in advance.

.dropdownList ul{
margin:auto;
display: none;
position:absolute;
list-style-image: url("data:image/svg+xml;utf8,");
direction:rtl;
list-style-position: inside;
}
.dropdownList li:hover  svg #circle{
stroke-width:1;
stroke:#1b5e20;
fill: #fce57e;
}

Bucky

# March 13, 2018

Base64 encoding isn’t the only available choice. For example, by default it expects URI encoding. If you took it into your head, you could URI-encode an entire SVG file. If you’re already using a preprocessor like LESS or SASS, there may not be much benefit to doing it that way. Without a preprocessor, URI-encoding makes it less somewhat less cumbersome to futz with color values. This can be a sanity saver if you’re working with an irresolute designer.

David E Elliott

# June 15, 2018

If I generate an SVG icon, save the base64 encoded string and use that string in a thousand img tags, does the browser have to decode the string and reparse the SVG for each img tag?

Danny D

# October 29, 2018

Can I use an animated SVG as a background img for a div that would allow me to input text content inside?

Geoff Graham

Permalink to comment# October 29, 2018

Just guessing without seeing an example, but you might be able to do that. Check out this recent post where a background image was animated directly in the background-image property. I’d imagine you can work a text element in the SVG markup as well. But, you can see how that would get tough to manage really fast.

Dzintars Klavins

# December 12, 2018

I am kinda forced to use this in LeafletJS for custom markers ( i don’t want to use png’s), but now i can figure out, how to dynamically apply new classes. Really simple on hover styling can be done with css filter, but not much. Pretty basic. But i would like to have come fancy styling, like outlining, multiple colored segments and so on. So i need to apply classes. Not sure hot to achieve that. One reason why i want to use SVG is because i can pass dynamic text value into it.
For example – simple LeafletJS marker:

let svgicon = `<svg id="marker` + markers[i][4] + `" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <defs>
          <style>
            .cls-1 {
              fill: #006aff;
            }      
            .cls-2 {
              font-size: 28px;
              fill: #fff;
              font-family: Montserrat-Regular, Montserrat;
            }
          </style>
        </defs>
        <path class="cls-1" d="M56.9679,24.9679A24.9679,24.9679,0,1,0,12.38928,40.42236h-.00067l18.4848,22.96552a1.38676,1.38676,0,0,0,2.22162.10583l17.86951-22.285H50.963A24.86853,24.86853,0,0,0,56.9679,24.9679Z"/>
        <text id="label` + markers[i][4] + `" class="cls-2" transform="translate(32 34)" text-anchor="middle">` + markers[i][1] + `</text>
        </svg>`
let url = encodeURI("data:image/svg+xml;utf8," + svgicon).replace('#','%23');
let icon = new CustomIcon({iconUrl: url})

Would be thankful for any links/resources.

Humphrey Pietersen

# April 27, 2019

Found data URIs pretty useful for placing into documents, some tiny icons where a whole inline svg element might appear to clutter the markup, lessens the DOM weight. Keeps markup cleaner :)

vikas

# October 12, 2019

It is possible to save above ddata:image/svg+xml;charset=utf-8, as png image. Please help

Bhavin

# February 13, 2020

One advantage of data URI of SVG image in the image tag is helpful to create the PDF using the WKHTMLTOPDF and other PHP PDF library.

David Waterman

# June 14, 2022

Any way to use a data uri that includes newlines?

background-image: url(data:image/svg+xml;utf8,
<svg>
...
</svg>
);

David Waterman

# June 30, 2022

IINM, the bit about being able to just drop an svg into a data URL is bogus. Many SVGs contain ‘#’, for example. SVGs in strings need to be encoded first, using (eg) window.encodeURIComponent(svg).

The way data uris are handled varies quite a bit in different browsers.
ref: https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-September/075456.html

hannah

# July 11, 2022

thanks, had no idea what SVG was and how it is used, but understanding that it is a set of instructions for an image, and how it is used within CSS files was helpful… not a developer

# August 6, 2022

the correct syntax is ;charset=utf-8, not ;utf8, but it works either way since utf-8 is the default encoding for svg

Comments

Leave a Reply Cancel reply