IE11 using svg as background-image fails

Question

I\'m facing a weird problem with Internet Explorer 11 running on Windows 10 machine. Using an SVG image as background thats appears totally black, Edge with the same code wo

Answer 1

Make sure to set background size width and height

background-size: 80px 60px;

Answer 2

If, like me, you have inline SVG in your background

(e.g. <svg xmlns='http://www.w3.org/2000/svg'...></svg>)

You will want to make sure your encoding is charset=utf8 (e.g. url(data:image/svg+xml;charset=utf8,)

Also ensure that reserved URL characters are encoded (e.g. < === %3C and > === %3E) and you use single quotes ' around attributes.

Answer 3

I had this problem too.

In my case, changing the "styling" setting didn't help, but unchecking the "responsive" checkbox in the Illustrator SVG export dialog did, even with an internal CSS element in the SVG.

The difference is that the SVG element needs a width and height attribute.

These attributes are absent when you check the "responsive" checkbox in the Illustrator SVG export dialog. If that's really all it does, then it's poorly named, I think.

If you're using inkscape, or some other tool to make your SVGs, I am sure your observations, when added here, would be of value.

So, if you want SVG background images in CSS to work properly in IE, make sure the root element of the SVG has a width and height attribute. (e.g. by unchecking the "responsive" checkbox in AI).

The width and height attribute do not have to be the correct display size (which may change anyway, via the CSS background-size property), but they do have to be the correct aspect ratio.

If you are hand-coding the SVG markup, and the first two values for viewbox are zero, then you can just use the last two values for width and height respectively. e.g.

<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="298.2"
height="108.8"
viewBox="0 0 298.2 108.8">

Answer 4

After digging into SVG file structure I found that problem concerns the SVG' styling properties.

Adobe Illustrator give me four options to declaring style sheet properties when saving graphics as an SVG file

1. Presentation Attributes
2. Style Attributes
3. Style Attributes (Entity Reference)
4. Style Elements

Accordingly to W3C specs regarding SVG1.1' Styling

No problem using the first three ways to styling properties, but embedding style sheets into SVG content inside a <style> element cause the problem!

Here my final fiddle test results

<div class="icon-user-default-css1"></div>
<div class="icon-user-default-css2"></div>
<div class="icon-user-default-css3"></div>
<div class="icon-user-default-css4"></div> 

I hope will be of help to someone...