displaying svg using the embed tag in ie9

Question

Hey everyone, I was just wondering whether anybody had any experience with displaying svg in ie9 using the embed tag. Below is an example of my code:

<!DOCTYPE html>
<html><head><title>Example</title></head>
<body>
<embed id="E" height="50%" width="100%" src="example.svg">
</body>
</html>

Right now this displays just fine in Firefox, ie 8 with the Adobe plugin, however in ie 9 it just pops up a blank box with an image icon in the top left of the box. Does anybody have any ideas how I could fix this problem?

Out of interest what Document Mode is IE9 using when viweing your HTML? I think the post may describe the problem and solution: http://stackoverflow.com/questions/6111785/inline-svg-content-not-displaying-in-ie-screenshot — James, Aug 02 '11 at 13:06

James · Accepted Answer · 2011-08-02T16:09:46.683

Althought your snippet includes a HTML5 DocType definition there are other factors which affect exactly how IE9 processes your HTML e.g. HTTP Response Headers (see How Internet Explorer Chooses Between Document Modes)

I think if you force IE9 into Standards mode your SVG will be rendered by IE9; to quickly test this just use the Developer Tools to control Browser and Document modes.

So, if your embdeded SVG now shows you're just left with figuring out what's triggering IE9 to select the wrong Document Mode.

Phrogz · Answer 2 · 2011-04-03T17:58:17.333

I'm not sure if your question means that you're trying to figure out any way to display SVG in IE9, or specifically only with the <embed> tag. If you just want a way to display SVG in IE9, I recommend embedding SVG directly in XHTML5:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> 
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  <title>untitled</title>
  <style type="text/css" media="screen">
    body { background:#eee; margin:1em }
    svg  { background:#fff; display:block; border:1px solid #ccc; width:100%; margin:1em -1px }
  </style>
</head><body>
<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <!-- SVG content here -->
</svg>
<script type="text/javascript"><![CDATA[
  var svg   = document.getElementsByTagName('svg')[0];
  var svgNS = svg.getAttribute('xmlns');
  // Access/manipulate your SVG here
]]></script>
</body></html>

If you want to test this technique, here are some examples (on my site) using SVG that work in IE9:

If this is not what you want, please clarify what your needs are.

displaying svg using the embed tag in ie9

2 Answers2