Embed SVG in CSS

svg-in-css.scss

/* Line breaks work as long as you escape them; use %23 instead of # inside of the svg */
.image {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('data:image/svg+xml;utf-8, \
	<svg width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">\
	  <g stroke-width="4" stroke="%23eaeae1" fill="%23fff"> \
	    <polygon points="150 205 85.3436222 238.991869 97.6918916 166.995935 45.3837832 116.008131 117.671811 105.504065 150 40 182.328189 105.504065 254.616217 116.008131 202.308108 166.995935 214.656378 238.991869 "></polygon>\
	 </g>\
	</svg>');
	background-color: #003366;
	background-size: 50px;
}

//
// Examples of various shapes
//

// white upwards triangle
.with-triangle {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10'><polygon fill='white' points='10,3 0,10 20,10' /></svg>");
}