How to Emulate SVG in Internet Explorer

This excerpt from Javascript Cookbook explains how to get the SVG in your object element, or embedded in the page, to be visible to Internet Explorer users.

---

Use a library, such as SVGWeb, to facilitate the display of SVG.

If the SVG is incorporated into the page via an object element, use the following syntax:

<!--[if IE]>
<object src="graphic.svg" classid="image/svg+xml"
width="200" height="200"
id="svgObject">
<![endif]-->
<!--[if !IE>-->
<object data="graphic.svg" type="image/svg+xml width="200"
height="200"
id="svgObject">
<!--<![endif]-->
</object>

The conditional comments are necessary in order for SVGWeb to do its magic correctly. Embedded SVG is much simpler. Just add the SVGWeb library, and enclose the SVG within a script element:

<script type="image/svg+xml">
   <svg...>
      ...
   </svg>
</script>

Currently, there is no support for SVG in Internet Explorer. Microsoft has committed to supporting SVG and XHTML in IE9, due out sometime in 2011. Until then, we can use a library such as SVGWeb.

SVGWeb works by emulating the SVG in Flash. Since Flash is more or less ubiquitous on most people’s sites, most folks won’t have to install any additional plug-in.

To incorporate SVGWeb into your web pages and applications, once you’ve downloaded the source and unzipped it, load the src directory to your web, and include a link to the SVGWeb Javascript in your web pages:

<script src="src/svg.js" data-path="src/"></script>

This tag assumes that the SVGWeb code is still in the src directory, and that the libraries are not in the same directory as your web pages. If the libraries are in a different location, you need to provide the data-path custom data attribute and point to the relative location of the libraries.

Note: Download SVGWeb and view manuals and other help at http://code.google.com/p/svgweb/. Ample SDK is another excellent library that provides SVG support for IE, originally created by Sergey Ilinsky.