Best IT Recipes

SVG not showing in IE11

I have embedded SVG file data directly in my html. It is displayed in Chrome and Firefox, but in IE11 it is not displayed at all. SVG link pastebin http://pastebin.com/eZpLXFfD

I tried adding META TAG, but to no avail. At first, I thought it might be a problem with the idea of ​​compatibility with IE, but switching this feature didn't work either.

<meta http-equiv="X-UA-Compatible" content="IE=8">

Any help? What more information can I provide to answer this question

+22
internet-explorer internet-explorer-11 svg
Dec 15 '14 at 10:25
source share
4 answers

It sounds like you're not in modern document mode. Internet Explorer 11 shows that SVG is just fine when you are in standards mode. Make sure that if you have the x-ua-compatible meta tag, you have the value "Edge" and not the earlier mode.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

You can define your document mode by opening your F12 developer tools and checking the document mode drop-down list (see the top right, currently “Edge”) or the emulation tab:

enter image description here

If you do not have the x-ua-compatible meta tag (or title), be sure to use doctype, which puts the document in standards mode, for example, <!DOCTYPE html> .

enter image description here

+20
Dec 15 '14 at 22:51
source share

I had the same problem with 3 of 4 built-in svgs that I used and they only disappeared (in one case, partially) in IE11.

I have on the page <meta http-equiv="x-ua-compatible" content="ie=edge"> .

In the end, the problem is with the additional clipping paths in the svg file. I opened the files in Illustrator, deleted the clipping path (usually at the bottom of the layers), and now they all work.

+8
Mar 11 '16 at 18:15
source share

I get it! The page was displayed using IE8 ... has mode

<meta http-equiv="X-UA-Compatible" content="IE=8">

in the title ... changed it to

<meta http-equiv="X-UA-Compatible" content="IE=9">

9 and it worked!

+1
Dec 15 '14 at 10:50
source share

You have duplicate style attributes for each element.

 style="opacity:0.8"

This, of course, does not appear in Firefox for me due to this error. If it appears in Chrome, it’s best to hack Chrome.

0
Dec 15 '14 at 22:29
source share


More articles:


All Articles