SVG as source in tag not displaying in Internet Explorer 11

Question

I'm trying to display an SVG file as the src of an <img> tag (which according to caniuse.com/svg-img I should be able to do in all recent browsers). The file is displayed in Chrome and Firefox but Internet Explorer just displays a black box with an x, as shown below:

enter image description here

On opening the file directly in IE, the image is displayed perfectly, so it shouldn't be anything wrong with the actual SVG file. There are no errors or warnings in the IE console, and I'm using the most recent version of the browser.

HTML:

<div id="plot">
  <img id="svg" src="plot1.svg" height="100%" width="100%"/>
</div>

Stylesheet:

#plot {
    float: right;
    width: 650px;
    height: 550px;
    background: #ffffff;
}

#plot svg {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

What are some possible reasons for the appearance of the x?

Edit: The SVG is a large auto generated file, an example of which can be seen here. The code that's being used to generate it is old, could it be something to do with the DOCTYPE at the top? I tried changing it but couldn't get anything to display still.

Edit 2: I have got it working... sort of. When I press F12 and go to the "emulation" tab, for some reason it shows that IE is displaying the page in Document Mode 7, ie. using compatibility mode for IE7, which doesn't support SVG. I can manually click any of the higher versions and it displays fine. My next question is: why? why is it running displaying the page in mode 7, and how do I stop this behaviour?

That's odd. I've got a couple of SVG images in my Jenkins build project page, and they show up just fine in IE11. — Spudley, Dec 17 '13 at 15:19
Actually, this rings a bell -- I think I've seen something similar here before. Try changing the `height="100%" width="100%"` into CSS styles and see if that helps. I have a hunch that's the key thing here. — Spudley, Dec 17 '13 at 15:20
I should have mentioned that I have already tried that. It makes no difference to IE, and makes the other browsers only display a quarter of the image :P — Matt Harris, Dec 17 '13 at 15:23
it's going to be hard to give any further suggestions without seeing the image (or any other image that gives the same effect). As I say, I'm not able to replicate it here with the images I have. You mention that you've checked the console... have you also checked the network tab? I assume it downloaded correctly? Is the mime type correct in the http headers? I can't think of anything else right now, unless there's something odd with the image itself. — Spudley, Dec 17 '13 at 15:27
I've edited the post to include a link to an example of the file. I am currently messing with the DOCTYPE and other stuff, trying to get it to display. — Matt Harris, Dec 17 '13 at 15:39
Made another edit, for some reason IE is displaying the page in "compatibility mode" and that's the cause of my problem. — Matt Harris, Dec 17 '13 at 16:32
Check the X-UA-Compatible tag: http://stackoverflow.com/questions/14611264/x-ua-compatible-content-ie-9-ie-8-ie-7-ie-edge — Palpatim, Dec 17 '13 at 16:35
@MattHarris: ah yes, that would do it. It's usually the first thing I suggest, so not sure why I didn't think of it this time. As for the reason it's going to compat mode: it's likely to be due to browser config. There is an obscure setting that allows you to set IE to compat mode for sites on the local network, which bizarrely defaults to being switched on. This is probably what's caught you out. You can switch this flag off via the "Local Intranet Settings" menu option, or use `X-UA-Compatible` in your headers to force IE into standards mode regardless of the setting. — Spudley, Dec 17 '13 at 17:19

score 19 · Accepted Answer · answered Dec 17 '13 at 16:42

19

I've found the problem. I was viewing the page over intranet, and I'm not sure why, but IE's default setting is to "display intranet sites in Compatibilty View". Just had to untick that box in compatibility view settings. SVG doesn't work at all in IE7, so that's why I was getting no image.

answered Dec 17 '13 at 16:42

Matt Harris

3,496
5
32
43

10

You can use `` in the document head to automatically do this in the future. – block14 Dec 17 '13 at 17:12

bradw2k · Answer 2 · 2016-01-15T18:55:40.543

19

I have found that having a style of "width" on the img (to scale it down) works in Edge and Chrome, but makes it disappear in IE11. Rather setting both "max-width" and "max-height" seems to work in all three of those browsers.

edited Jan 15 '16 at 18:55

answered Jan 15 '16 at 18:49

bradw2k

693
7
11

weird. it worked for me after changing width to max-width on ie11, could you please share details on this? thanks – Zameer Fouzan Sep 21 '17 at 07:12
You can also use `min-height` in place of `max-height` if desired. – Adam Johnson May 01 '18 at 21:06
1

Though this is about MSIE and not Edge, I found that Edge requires that the SVG has a `viewBox` definition which other browsers seem to infer it if it's missing. – Christopher Schultz Dec 15 '20 at 19:55

score 10 · Answer 3 · edited Jan 07 '15 at 17:36

10

This can also be caused by sending the svg as plain/text and not as an image/svg+xml. In Apache you can fix this by adding to your .htaccess file -

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

edited Jan 07 '15 at 17:36

Kevin Panko

8,356
19
50
61

answered Jan 07 '15 at 17:15

Ryan

101
1
2

1

I was pulling my hair out trying to figure this out, your answer was spot on. Our server was serving it as application/octet-stream :( – Dan Gayle Mar 28 '16 at 20:59

Graeme Wilkinson · Answer 4 · 2014-09-02T10:01:07.430

You may find turning this mode off makes your website work, however there are still browsers that do not support .svg images. Those browsers will show the result as you saw with this box unticked.

Using SVG as an <img> If I save the SVG to a file, I can use it directly in an <img> tag.

<img src="kiwi.svg" alt="Kiwi standing on oval">

In Illustrator, our artboard was 612px ✕ 502px.

That's exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG.

Browser support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down.

If you'd like to use SVG, but also need to support these browsers that don't support using SVG in this way, you have options.

One way is to test for support with Modernizr and swap out the src of the image:

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell has a really simple alternative, if you're OK with JavaScript in the markup:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

This has been pulled from CSS Tricks, click to read the full article.

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Bongs, Sep 01 '14 at 17:01

score 0 · Answer 5 · answered Nov 11 '20 at 16:59

0

Why not override the compatibility mode:

answered Nov 11 '20 at 16:59

BlueMonk

791
6
3

SVG as source in tag not displaying in Internet Explorer 11

5 Answers5

Linked