Svg As Source In Tag Not Displaying In Internet Explorer 11

I'm trying to display an SVG file as the src of an tag (which according to caniuse.com/svg-img I should be able to do in all recent browsers). The file is displayed in

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

Solution 2:

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.

Solution 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

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

<imgsrc="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:

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

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

Solution 5:

Why not override the compatibility mode: