IE11 meta element Breaks SVG

Question

I ve embedded an SVG files data directly into my html  It shows in Chrome and Firefox  but in IE11 it doesn t show at all   The pastebin link to the SVG is http   pastebin com eZpLXFfD  I ve tried adding a META TAG but to no avail  At first I thought it might be a IE Compatibility view issue  but toggling that feature did not work either    lt meta http-equiv  X-UA-Compatible  content  IE 8  gt   Any help   What else Information Can I provide to help answer this question

User · Accepted Answer

It sounds as though you re not in a modern document mode  Internet Explorer 11 shows the SVG just fine when you re in Standards Mode  Make sure that if you have an x-ua-compatible meta tag  you have it set to Edge  rather than an earlier mode    lt meta http-equiv  X-UA-Compatible  content  IE edge  gt    You can determine your document mode by opening up your F12 Developer Tools and checking either the document mode dropdown  seen at top-right  currently  Edge   or the emulation tab     If you do not have an x-ua-compatible meta tag  or header   be sure to use a doctype that will put the document into Standards mode  such as  lt  DOCTYPE html gt

User · Answer

Check if the Browser is IE -     ua   htmlentities   SERVER  HTTP USER AGENT    ENT QUOTES   UTF-8      if  preg match   MSIE Internet Explorer i    ua      strpos  ua   Trident 7 0       false  amp  amp  strpos  ua   rv 11 0       false            do stuff for IE Here

User · Answer

After trying the other suggestions to no avail I discovered that this issue was related to styling for me  I don t know a lot about the why but I found that my SVGs were not visible because they were not holding their place in the DOM   In essence  the containers around my SVGs were at width  0 and overflow  hidden   I fixed this by setting a width on the containers but it is possible that there is a more direct solution to that particular issue

User · Answer

You have duplicate style attributes on each element    style  opacity 0 8    This certainly does not display on Firefox for me because of this error  If it displays on Chrome  best raise a Chrome bug

User · Answer

I was having the same problem with 3 of 4 inline svgs I was using  and they only disappeared  in one case  partially  on IE11   I had  lt meta http-equiv  x-ua-compatible  content  ie edge  gt  on the page   In the end  the problem was extra clipping paths on the svg file  I opened the files on Illustrator  removed the clipping path  normally at the bottom of the layers  and now they re all working

User · Answer

I ran into this issue and resolved it by removing the width styling I had used on the SVG    svg-div img       width  200px     removed this        height  auto

User · Answer

I figured it out  The page was rendering using IE8 mode    had   lt meta http-equiv  X-UA-Compatible  content  IE 8  gt   in the header    changed it to    lt meta http-equiv  X-UA-Compatible  content  IE 9  gt   9 and it worked

[internet-explorer] IE11 meta element Breaks SVG

Examples related to internet-explorer

Examples related to svg

Examples related to internet-explorer-11