SVG in IE

Inspired by Emil’s emulation of the canvas tag in IE, I put together a simple SVG emulation behavior for IE. As with Emil’s code, I am making use of Internet Explorer’s VML support. The behavior will walk the SVG element structure and attempt to convert to appropriate VML elements. It’s far from complete, but it does a decent job. Supported features include:

  • Basic shapes: rect, ellipse, circle, polyline, polygon and path.
  • Simple fills commands (in attributes and CSS): fill and fill-opacity.
  • Simple stroke commands (in attributes and CSS): stroke, stroke-width, stroke-opacity and stroke-linejoin.

The behavior works on Inline-SVG, not standalone SVG files. Currently, the behavior only works on static SVG. You can’t use Javascript to interact with the SVG. Javascript can only access the VML elements. I plan to add support for and gradients (although this could be hard). I also want to eventually add support for scripting by adding SVG-like methods to the VML elements. You’ll notice that the SVG elements are in an explicit svg namespace. This seems to be a requirement for the behavior to work, but I am trying to remove the need.

Required files: iesvg.htc, iesvg.js

Sample files: iesvg_test.htm (IE), iesvg_test.xhtml (Firefox)

The sample files are exactly the same, only the extensions are different. Firefox must have Inline-SVG in an XHTML file. There is probably a way I can get Apache to trick Firefox into thinking the HTML file is an XHTML file (or get IE to think the XHTML file is an HTML file), but I haven’t got it working yet.

Update: Core files have been updated. Test files have gradient examples.

8 Comments

  1. Emil’s Chronicle » SVG in IE said,

    March 14, 2006 @ 10:31 am

    [...] Anyway, it seems like Mark Finkle picked up the ball and started working on SVG in IE. Although not explicitly stated I’m assuming he’s aiming at supporting SVG Tiny, or a subset of it, rather than the full SVG specification. [...]

  2. Erik Arvidsson said,

    March 15, 2006 @ 7:12 pm

    Good work.

    This line will cause a serialization and another parsing pass:

    // swap the SVG element contents with eh new VML
    element.outerHTML = oVmlRoot.outerHTML;

    You can do this more efficiently using

    elemen.parentNode.replaceChild(oVmlroot, element)

    same goes for all the places you use outerHYML with insertAdjacentHTML and innerHTML

  3. Mark Finkle said,

    March 16, 2006 @ 4:17 am

    Erik,

    Thanks for making look at this again.

    My first drafts did use ‘replaceChild’ and ‘appendChild’ in the appropiate places. For some reason the end tags of the appended child elements were placed outside of the DIV container. But now it seems to work just fine.

    I think the problem had to do with the way I declared my HTC. I was using ‘literalcontent=true’ in the PUBLIC:COMPONENT element (took it from an MS example). I had removed it because it was unnecessary. Now the DOM methods work fine.

    This will make it easier to add methods to the VML elements so they look like SVG elements when scripting.

  4. Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Scalable Vector Graphics In Internet Explorer said,

    March 16, 2006 @ 8:26 am

    [...] Scalable Vector Graphics In Internet Explorer – cool. [...]

  5. Brad Neuberg said,

    March 17, 2006 @ 8:25 am

    You rock; good job. Thanks for making this.

    Best,
    Brad Neuberg

  6. Mark Finkle’s Weblog » Blog Archive » SVG in IE (Update) said,

    March 21, 2006 @ 1:01 am

    [...] Mark Finkle’s Weblog « SVG in IE [...]

  7. Jacobus said,

    March 29, 2006 @ 11:19 am

    Stunning work so far! Please continue!

  8. Mark Finkle’s Weblog » Blog Archive » RichDraw - Simple VML/SVG Editor said,

    April 9, 2006 @ 8:36 pm

    [...] I don’t know if there are any real uses for RichDraw in it’s current state. There is a lot that could be done to enhance RichDraw and make it more usable. Probably the most important feature would be loading markup back into the editor. On the surface, that’s easy enough to add. However, there could be situations where the markup is saved from IE (VML) and loaded back into Firefox (SVG). This would not work. I am planning on converting the VML to SVG when retrieving and converting it back when loading. That way RichDraw always appears to be using SVG. I will build from my IESVG code to handle the conversions. [...]

RSS feed for comments on this post