Recoloured Inline SVG

by Soviut

HTML

<h1>Re-coloured Inline SVG</h1>
<div class="testing">
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 40 40">
<path class="test" d="M28.2,16.6c0,0,0.1,0.1,0.1,0.1c-0.2,0.1,0.7-1.7,0.7-1.8c0.1-0.2,1.5-0.9,1.7-0.3c0.2,0.7,1.6,3.5,2.6,3
	c1.5-0.6,4-1.7,5.5-0.5c-0.9,0.8-4.3-0.5-4.5,1.9c-0.1,1.8,2.9,1.6,3.2,2.4c0.2,0.4-1.4,0.6-1.2,0.9c0.3,0.5-0.1,2-0.8,1.9
	c0-0.1,0-0.1,0-0.2c-0.1,1.3-2.5-0.8-2.5-0.8c-1.6-1-4.6-1.7-6,0c-1.4,1.7,0.7,3.3,1.5,4.9c-0.1,0-0.1,0-0.2,0
	c-0.1,0.3-0.9-0.2-1.2-0.1c0,0.1,0,0.2-0.1,0.3c-0.5-1.3-2.3-1.8-2.9-3.1c-0.3,0.3-0.7,1.7-0.5,2.1c0.2,0.4,0.7,0.7,0.9,1.1
	c-3.2,0.9-1.6-2.9-2.3-4.8c0-0.1-2.7,0-3.1-0.2c-1.2-0.4-1-0.3-1.3,0.9c-0.1,0.6-0.5,2.2-0.1,2.9c0.2,0.3,1.2,1.1,1.2,1.2
	c0,0.4-1,0.1-1.3,0.1c0,0,0,0.1,0,0.1c-1,0.1-1.2-0.8-1.2-1.5c0.1-0.9-1.4-4.2-1.3-4.3c-0.8,1.3-2.4,2-3.4,3.2
	c-0.2,0.2-1.1,1.3-0.7,1.7c0.1,0.2,0.9,0.4,0.9,0.7c-0.1,0-0.3,0-0.4,0c0,0,0,0.1,0,0.1c-0.2,0-0.4-0.1-0.6-0.1
	c0,0.2-0.3-0.1-0.3-0.1c0-0.2-1.1-0.7-0.7-1.6c0.6-1.5,0.9-3.5,1.9-4.9c0.3-0.4-0.9-0.7-1.2-0.8c-1.3-0.5-2.5,0.5-3.8,0.8
	c-1.2,0.2-2.5,0.3-3.7,0.1c-0.3-0.1-2.2-0.6-2.3-0.4c0.5-0.6,2.3-0.1,2.9-0.2c1.4-0.1,2.7-0.9,3.8-1.8c1.9-1.5,3.2-3.6,5.3-4.8
	C17.8,11.9,24,14,28.2,16.6z"/>
</svg>
</div>

CSS

body {
    font-family: arial, helvetica, san-serif;
}

.testing {
    background: blue;
}

path {
    fill: red;
}