Convert SVG to base64

Convert SVG to base64

by Alexander

HTML

<svg width="100" height="120" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" onclick="limpiar_campos();showpresupuesto(false,true,3);" style="cursor:pointer"><g id="preper" style="transform:scale(0.15,0.15)" fill="white">
			<path d="M566.828,2.896l-93.137,49.266L380.237,2.728c-17.958-9.499-38.475,7.352-32.646,26.814l50.675,169.197     c24.891-7.776,50.084-11.69,75.425-11.69c24.992,0,49.839,3.814,74.396,11.378l51.356-168.616     C605.379,10.329,584.832-6.627,566.828,2.896z"/>
			<path d="M837.312,702.191c0-200.822-162.798-485.143-363.62-485.143s-363.62,284.321-363.62,485.143     c0,200.82,162.798,245.191,363.62,245.191C674.514,947.385,837.312,903.014,837.312,702.191z M505.02,756.234v35.678     c0,11.531-9.349,20.879-20.88,20.879h-17.999c-11.532,0-20.88-9.348-20.88-20.879v-32.479     c-24.868-3.055-54.73-12.172-79.377-28.521c-8.992-5.965-11.582-18.316-5.779-27.414l18.578-29.123     c5.865-9.191,18.049-12.049,27.312-6.295c21.357,13.27,39.382,18.793,57.407,18.793c26.678,0,37.35-9.072,37.35-29.879     c0-42.688-137.657-48.555-137.657-141.926c0-53.89,30.412-91.239,82.167-102.443v-35.49c0-11.045,8.954-20,20-20h19.758     c11.046,0,20,8.954,20,20v34.423c26.172,4.154,47.493,15.425,65.724,30.79c8.567,7.22,9.65,20.016,2.311,28.479l-20.142,23.219     c-6.729,7.76-18.271,9.314-26.676,3.414c-13.681-9.604-26.688-14.406-41.492-14.406c-22.942,0-34.147,6.402-34.147,27.744     c0,40.551,137.657,42.686,137.657,139.791C588.254,702.346,561.042,742.896,505.02,756.234z"/>
</g></svg>
  



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

CSS

html {
  height: 100%;
  width: 100%;
}
body{
  background:red
}
#demo {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
#code {
  border: 1px solid #000;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0.5em;
  margin: 1em;
}
svg {
  display: none;
}

JavaScript

// 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;
console.log(url)