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

  1. User Avatar
    JonathanBeech
    Permalink to comment#

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

    • User Avatar
      John Moore
      Permalink to comment#

      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.

  2. User Avatar
    Jonathan Duck
    Permalink to comment#

    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. ;)

  3. User Avatar
    Adam Crockett

    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?

  4. User Avatar
    vigneshwaran
    Permalink to comment#

    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;
    }
    
  5. User Avatar
    Bucky
    Permalink to comment#

    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.

  6. User Avatar
    David E Elliott
    Permalink to comment#

    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?

  7. User Avatar
    Danny D
    Permalink to comment#

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

    • User Avatar
      Geoff Graham
      Permalink to comment#

      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.

  8. User Avatar
    Dzintars Klavins
    Permalink to comment#

    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.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag