SVG as source in

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

Answer 2

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.

Answer 3

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

Answer 4

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.