CSS: Using raw svg in the URL parameter of a background-image in IE

Question

So, I\'m trying to do something like this:

div {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repea         


        

Answer 1

For IE9 I have to URL encode the whole SVG code.

This is my workflow for SVG background images.

First paste SVG code here to optimize it: https://jakearchibald.github.io/svgomg/ ("paste markup")

You can remove the "viewBox" but be sure that "width" and "height" are defined in the SVG code, IE9 needs this for better CSS implementation.

Now you have something like:

In this case I have to add a fill color, because there was none defined. so I add:

fill="#cc0000"

to the end of the path element (if there are a couple of path elements in a group ("g") you have to put this fill color to all of these. If the SVG has strokes do the same with the strokes like stroke="#cc0000").

Now we have the following SVG code:

Now encode the whole SVG code here: http://meyerweb.com/eric/tools/dencoder/

so you get:

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E

At least put this whole thing together in your CSS:

.apple {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E');
    }

Some advantages that drove me nuts:

Be sure to wrap the SVG background code with ' in the CSS because inside the SVG we use "!

Be sure to use

data:image/svg+xml;charset=UTF-8

nothing else.

Now the SVG is displayed with the color "#cc0000" (dark red) even in IE9 on windows.

With this URL encoded SVG I still can change the color with a PHP variable. For example I just replace "cc0000" with:

I do this for WordPress templates so the customer can pick the icon color in the backend.