IE11 meta element Breaks SVG

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

Answers


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:

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>.


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 <meta http-equiv="x-ua-compatible" content="ie=edge"> 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.


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.


I figured it out! The page was rendering using IE8 mode... had

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

in the header... changed it to

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

9 and it worked!


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;
}

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.


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 && strpos($ua, 'rv:11.0') !== false)) {
    // do stuff for IE Here
  }

Need Your Help

MediaMetadataRetriever.getFrameAtTime() returns only first frame

android video bitmap save

I have extracted frames from a video using MetadataRetriever, and have stored all images in an ArrayList&lt;Bitmap&gt;. I want to store all of them on an SD card (just for testing purposes).

How to upgrade docker container after its image changed

docker

Let's say I have pulled the official mysql:5.6.21 image.