Change color of data url embedded SVG image

Question

I have an SVG background image embedded in a CSS file as a data url:

.what { background: url(\'data: image/svg+xml; utf8, 

Answer 1

Apparently, as Noah Blon explains, it is possible to style the color of an SVG background image using CSS filters.

An example he gives on his site is:

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

Please visit his site for more information and two other solutions that do not involve changing the color but SVG background sprites and creating an "inverted" SVG that covers the background and is transparent where the background color shines through to create a colored form.

Unfortunately, IE does not support filters.