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

You can't restyle the contents of a background image with CSS. It doesn't matter if it's an external SVG, or one applied as a Data URI.

Answer 2

Check out this webpage: https://css-tricks.com/using-svg/ Part way down the page is a header called "Now you can control with CSS!" They appear to be changing the color of the image inline with statements such as

.kiwi {
    fill: #94d31b; 
}

Answer 3

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.