CSS demo for self contained SVG background

Use the following CSS styles:

background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" style="enable-background: new 0 0 24 24;" version="1.1" viewbox="2 2 21 27" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px"><path d="M13.8,15.6v-0.8l0,0c-1.2,1-2.7,1.5-4.2,1.5c-3.7,0-6.8-3-6.8-6.8c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8 c0,1.5-0.5,3-1.5,4.2l0,0h0.8l5.2,5.3L19,20.8L13.8,15.6z M9.5,5.3c-2.3,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3s4.3-1.9,4.3-4.3 S11.8,5.3,9.5,5.3z" fill="%23484848"></path></svg>');

background-repeat: no-repeat;
background-size: 100%;
background-position: 0 0;
width: 22px;
margin-top: -2px;

Where fill="%23484848" is the url encoded hex color code of the object (needs to be done this way to be displayed in FireFox).