Javiere Javiere - 1 month ago 5
CSS Question

Style within background-image css of SVG not working in IE

I am setting icons by applying classes to elements, so this classes changes the property background-image and sets an url to it.

Let's see an example:

.example-icon {background-image: url("data:image/svg+xml,%3Csvg%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20195.6%20107.8%27%3E%3Cpath%20fill%3D%27%23B5B5B5%27%20class%3D%27st0%27%20d%3D%27M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%27%2F%3E%3C%2Fsvg%3E");}


Which just contains this svg but url encoded:

<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195.6 107.8'><path fill='#B5B5B5' class='st0' d='M97.8 107.8c-2.6 0-5.1-1-7.1-2.9L2.9 17.1C-1 13.2-1 6.8 2.9 2.9 6.8-1 13.2-1 17.1 2.9l80.7 80.7 80.7-80.7c3.9-3.9 10.2-3.9 14.1 0 3.9 3.9 3.9 10.2 0 14.1l-87.8 87.8c-1.9 2-4.4 3-7 3z'/></svg>


This works perfectly (encoded in all browsers and decoded only in Chrome) but the problem comes when I try to set any style within the SVG. For example:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" width="20" height="20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00FFFF;stroke:#FF7676;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="10" cy="10" r="9.5"/>
<path class="st1" d="M5,10h10 M10,5v10"/>
</svg>


That is just another SVG but with styling inside, the problem is that this will not work (coded or decoded) in IE 11.

Here the encoded version I am using:

%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%2300FFFF%3Bstroke%3A%23FF7676%3Bstroke-miterlimit%3A10%3B%7D%0A%3C%2Fstyle%3E%0A%3Ccircle%20class%3D%22st0%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229.5%22%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M5%2C10h10%20M10%2C5v10%22%2F%3E%0A%3C%2Fsvg%3E


I am aware that IE only loads properly formed url's but that is an encoded one.

Any ideas about what can be happening?

Edit: it is required that data is not encoded in base 64.

Answer

The <style> {...} </style> element caused you problems with parsing the CSS content. You can overcome this by using a base64 encoded string instead of a URL encoded string:

.example-icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojMDBGRkZGO3N0cm9rZTojRkY3Njc2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30gPC9zdHlsZT4gPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTAiIGN5PSIxMCIgcj0iOS41Ii8+IDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01LDEwaDEwIE0xMCw1djEwIi8+IDwvc3ZnPg==');
  width: 20px;
  height: 20px;
}
<div class="example-icon"></div>

Checked in chrome, firefox, safari, ie>=9

update - no base64 requirement

The encoded url will work if you remove all line-breaks (\r\n) and tabs (\t) from the string before encoding:

.example-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2300FFFF%3Bstroke%3A%23FF7676%3Bstroke-miterlimit%3A10%3B%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229.5%22%2F%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M5%2C10h10%20M10%2C5v10%22%2F%3E%20%3C%2Fsvg%3E");
  width: 20px;
  height: 20px;
}
<div class="example-icon"></div>

Also checked in chrome, firefox, safari, ie>=9

Comments