svg data:uri

by Jasper Stevens

HTML

<h1>CSS</h1>
<span class="image bg-1"></span>

CSS

.bg-1 {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 50 50"><circle fill="red" cx="25" cy="25" r="25"/></svg>');
}

.image {
    display: inline-block;
    width: 50px;
    height: 50px;
}

h1 {
    font: bold 1em sans-serif;
    margin: 1em 0 .5em;
    border-bottom: 1px solid #CCC
}

JavaScript

var uri = 'data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32"><circle fill="red" cx="16" cy="16" r="12"/></svg>'

var img = document.querySelectorAll('img');

img[0].src = uri;
img[1].src = encodeURI(uri);