IE11 meta element Breaks SVG

internet-explorer svg internet-explorer-11
Rahil Pirani picture Rahil Pirani · Dec 15, 2014 · Viewed 101.3k times · Source

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.

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

Any help? What else Information Can I provide to help answer this question

Answer

Sampson picture Sampson · Dec 15, 2014

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.

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

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:

enter image description here

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 <!DOCTYPE html>.

enter image description here

Related questions

How to prevent SVG elements from gaining focus with tabs in IE11?

There is an inline SVG element among my HTML form elements. When I navigate through my elements with the Tab key, the SVG element gets focused, in IE11 only, even if the SVG element has the tabindex="-1" attribute set …

Read More
Emulate IE7 for IE8 but not for IE9 using "X-UA-Compatible"

I have a website depending on vector drawing, for Internet Explorer I'm using VML and for other browsers I'm using SVG. IE8 however, doesn't have support for neither without falling back to IE7-mode which has VML. Therefore I'm including &…

Read More
How do you detect support for VML or SVG in a browser

I'm writing a bit of javascript and need to choose between SVG or VML (or both, or something else, it's a weird world). Whilst I know that for now that only IE supports VML, I'd much rather detect functionality than …

Read More