// Short script to encode our SVG in base64
// This can be reversed using window.atob('base64')
var code = document.getElementById('code');
var demo = document.getElementById('demo');
var svg = document.getElementsByTagName('svg')[0];

// Convert the SVG node to HTML.
var div = document.createElement('div');
div.appendChild(svg.cloneNode(true));

// Encode the SVG as base64
var b64 = 'data:image/svg+xml;base64,'+window.btoa(div.innerHTML);
var url = 'url("' + b64 + '")';
code.innerHTML = 'Base64 CSS (for cross-browser compatibility)\n\nbackground-image: ' + url + ';';
demo.style.backgroundImage = url;


<!-- Yo, edit me! -->
<!-- This SVG will be encoded as a base64 -->
<!-- image for cross-browser compatibility -->
<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'>
<rect width='50' height='50' fill='#282828'/>
<circle cx='3' cy='4.3' r='1.8' fill='#393939'/>
<circle cx='3' cy='3' r='1.8' fill='black'/>
<circle cx='10.5' cy='12.5' r='1.8' fill='#393939'/>
<circle cx='10.5' cy='11.3' r='1.8' fill='black'/>
</svg>







<!-- This is used for output -->
<div id="demo"><pre id="code">
[base64]
</pre></div>