SVG not displaying in IE9

Question

I have a document, written in HTML, that needs to be distributed and read from the local hard drive. The HTML contains img tags that reference SVGs on the local hard drive. This works fine in Firefox, but doesn't work at all in IE 9, just white space where the graphic should be. The version of IE is out of my control so that is what I have to work with. If I switch to a different graphic type, say PNG, it works fine. If I embed PNG image data inside the SVG it will be displayed as well. But if it is just an SVG, nothing. I recreated the issue with some simpler HTML and SVG:

<!DOCTYPE html>
<html>
    <head>
        <title>Purpose: Test SVG Rendering in IE9</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9">
        <!--meta charset="UTF-8"-->
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <h1>Testing SVGs 5</h1>
        <p>SVG should render below:</p>
        <img src="sample.svg" alt="Sample SVG">
        <p>SVG should have rendered above. Works PNG below:</p>
        <img src="works-icon.png" alt="Sample PNG">
    </body>
</html>

And the SVG:

<svg width="300" height="300" viewBox="0 0 300 300">
   <path d="M150 0 L75 200 L225 200 Z" />
</svg>

I have read as many of the similar questions as I could find, but so far no luck solving this problem.

Other useful information may be that IE is being run in Browser Mode IE9 and Document Mode of IE9 Standards. OS is Windows 7.

Any suggestions would be much appreciated.

Thanks in advance.

Answer 1

My problem ended up being 2-fold. My SVG needed namespace information like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
   width="300" 
   height="300" 
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 300 300">
   <path d="M150 0 L75 200 L225 200 Z" />
</svg>

And the other problem came from the fact that the original document that caused the problem was using <object> tags instead <img> tags (so my original post was not an accurate representation of the full problem). IE9 will apparently allow you to add graphics of other formats to an HTML document via the <object> tag, but not SVG.

SVG not displaying in IE9

Question

1 answers

solution1
0 2014-04-10 12:06:55

SVG not displaying in IE9

Question

1 answers

solution1 0 2014-04-10 12:06:55

solution1
0 2014-04-10 12:06:55