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:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50"/></svg>

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:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50" fill="#cc0000"/></svg>

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:

<?php echo preg_replace("/#/", "", $textcolor); ?>

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

Answer 2

IE does appear to support using utf8 in a data URI, it's simply being more fussy about it. See this Codepen Blog Post for more details but here are the highlights:

The author points to RFC2397 and highlights:

data:[<mediatype>][;base64],<data>

The <mediatype> is an Internet media type specification (with optional parameters.) The appearance of ";base64" means that the data is encoded as base64. Without ";base64", the data (as a sequence of octets) is represented using ASCII encoding for octets inside the range of safe URL characters and using the standard %xx hex encoding of URLs for octets outside that range. If <mediatype> is omitted, it defaults to text/plain;charset=US-ASCII. As a shorthand, "text/plain" can be omitted but the charset parameter supplied.

• Most browsers are lenient about the charset= string, but it's required for Internet Explorer. That means you need to use ;charset=utf8, instead of ;utf8,.
• From above, "Without ";base64", the data (as a sequence of octets) is represented using ASCII encoding for octets inside the range of safe URL characters and using the standard %xx hex encoding of URLs for octets outside that range." Which means you will have to percent-encode characters that aren't URL-safe. For example, <svg> to %3Csvg%3E. You can minimize the amount of percent encoding that needs to be done by using single quotes ' instead of double quotes ".

Answer 3

This solution works well for me, I use the charset=utf8 to instead of utf8.

Answer 4

Just a note to this. In IE 11 you can use charset=utf8. You have to URL-encode at least < and > (providing that you use '' for attribute values not "". Also, be careful in case you use any non-ASCII characters. You have to provide their UTF-8 encoded value - i.e. find some tool that gives you UTF-8 code for the character (like Babel Map) and then provide it in URL encoded form. i.e. I wanted to render the ▾ character (U+25BE). UTF-8 representation of the character is \xE2\x96\xBE and %E2%96%BE in URL-encoded form.

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");