html - SVG as source in <img> 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:

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?

Answer 1

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.