css - 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, <svg> ... </svg') }

I want another element to have the same background image, only in a different color, but I don't want to repeat the whole SVG code.

<div class="what one">...</div>
<div class="what two">...</div>

So how do I change the color of a background SVG image?

No Javascript, please.

---

None of the other related questions answered this, because the solutions given there rely on serving two different files, which I want to avoid because I want to minimize file size for mobile users.

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.