<!-- Yo, edit me! -->
<!-- This SVG will be encoded as a base64 -->
<!-- image for cross-browser compatibility -->

<!-- This example shows two SVG backgrounds -->
<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M-2 10L10 -2ZM10 6L6 10ZM-2 2L2 -2' stroke='#222' stroke-width='4.5'/>
</svg>

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
<linearGradient id='g' x2='1' y2='1'>
<stop stop-color='#F19'/>
<stop offset='100%' stop-color='#0CF'/>
</linearGradient>
<rect width='100%' height='100%' fill='url(#g)'/>
</svg>









<!-- This is used for output -->
<div id="demo"><pre id="code">
[base64]
</pre></div>
html {
  height: 100%; width: 100%;
}
#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;
}
View Compiled
// Note: this script shows multiple svg backgrounds.

// 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 svgs = document.getElementsByTagName('svg');
var urls = new Array();

for (var i=0; i<svgs.length; i++) {
 // Convert the SVG node to HTML.
 var d = document.createElement('div');
 d.appendChild(svgs[i].cloneNode(true));
 // Encode the SVG as base64
 var b64 = 'data:image/svg+xml;base64,'+window.btoa(d.innerHTML);
  urls.push('url("' + b64 + '")');
}

var url = urls.join(',');
code.innerHTML = 'Base64 CSS (for cross-browser compatibility)\n\nbackground-image: ' + url + ';';
demo.style.backgroundImage = url;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js