Loading SVGs Cross Browser

Will Holcomb

19 January 2010

I like to use SVGs in my posts. They're easy to create in Inkscape, scriptable and anyone who wants to can download and edit them. The problem is that though the specification is seven years old, IE still lacks SVG support.

SVG support

The SVGWeb plugin fixes IE by inserting a flash applet to render the image.

The script is included in the page as:

<!--[if IE]>
  <script type="text/javascript" src="svgweb/src/svg.js"
          data-path="svgweb/src" data-htc-filename="svg-htc.php">

Additional HTML is required to get the plugin to work:

<object data="tree.svg" type="image/svg+xml">
  <object src="tree.svg" classid="image/svg+xml"></object>

The <object/> tag works by failover, meaning the inner content is only processed if the outer content fails. So, the IE version of the tag is only used if the standard version fails.

SVGWeb renders in the space laid out for the original #tree object, which is nice, but it doesn't seem to support either the <style/> tag or the preserveAspectRatio attribute, so the tree is stretched out and solid black. I'll report those issues and maybe they'll work later.

SVGWeb is also doing something to the class attribute. The following has a tree class and there is a .tree selector, but unlike the #tree id above, it does not affect the height.


The second half of what I would like to fix is I frequently write up my posts outside of WordPress. The links I use to images are frequently relative and all that I would like is a simple script to check if an object failed to load and attempt to find it elsewhere if that's the case.

This can be accomplished with the same <object/> failover used to handle IE, but I would like to not have to write out all the tags myself if possible.

It turns out, not surprisingly, that this is really difficult in IE. When I try to set the src attribute, it sliently drops the changes. They show up as changed in the debugging window, but in the DOM tree they aren't.

The script works, but in Firefox, the documents are loaded twice.