Thursday, September 13th, 2007

SVG on IE via Silverlight via XSLT

Category: Microsoft, SVG

Sam Ruby has done it again, this time taking Toine de Greef’s work and making it better. Now your SVG can work on IE via Silverlight:

Cool. SVG to Silverlight via XSLT. But, embedding in HTML using comments? I think I can improve upon that.

Demo: Toucan. Rendered using native SVG on recent Gecko, Opera, and Webkit based browsers. Converted to Silverlight and rendered (after a brief delay) using client side XSLT on MSIE browsers with Silverlight.

This technique may also be useful for people who want to embed Silverlight into Webpages, which apparently isn’t so easy to do.

Demo: Raven — currently MSIE/Silverlight only, but clearly the reverse is also possible.

The magic bridge to the XML is in svg2xml.js:


  1. if (window.attachEvent) window.attachEvent("onload", function() {
  2.   xmls = document.getElementsByTagName('xml');
  3.   for (i=0; xmls.length>i; i++) {
  4.     var source = xmls[i].XMLDocument.documentElement;
  6.     var script = document.createElement('script');
  7. = "_svg2xaml_" + i;
  8.     script.type = "text/xaml";
  9.     if (source.nodeName == 'Canvas') {
  10.       script.text = source.xml;
  11.     } else if (source.nodeName == 'svg') {
  12.       var svg = new ActiveXObject("Microsoft.XMLDOM");
  13.       svg.async = false;
  14.       svg.loadXML(source.xml);
  15.       var xsl = new ActiveXObject("Microsoft.XMLDOM");
  16.       xsl.async = false;
  17.       xsl.load("svg2xaml.xsl");
  18.       script.text = svg.transformNode(xsl);
  19.     } else {
  20.       continue; // ok, script is never used.  So what?  Shoot me?
  21.     }
  22.     xmls[i].parentElement.insertBefore(script,xmls[i]);
  24.     var embed = document.createElement('object');
  25.     try {
  26.       embed.type = "application/x-silverlight";
  27.       embed.setAttribute('source', '#' +;
  28.     } catch(err) {
  29.       embed.title="SVG or Silverlight required";
  30.     }
  31.     embed.width = xmls[i].style.width;
  32.     embed.height = xmls[i].style.height;
  33.     xmls[i].parentElement.insertBefore(embed,xmls[i]);
  34.   }
  35. });


Posted by Dion Almaer at 9:15 am

3.1 rating from 36 votes


Comments feed TrackBack URI


I think that’s supposed to be svg2xaml.js (not svg2xml.js) – your link is correct, just not the name. And of course the real “magic” happens in the XSL file.


Comment by Jeff Schiller — September 13, 2007

I agree with Jeff the the real “magic” happens in the XSL file.
Good comment Jeff!

Comment by Motorhomes — September 13, 2007

absolutely brilliant!

Comment by Liming — September 13, 2007

I wonder if Silverlight is going to be the “Microsoft way” of forcing us to adopt the technology in order to make use of SVG in IE instead of simply implementing it natively.

Here’s what’s next: If Silverlight makes any headway into the market, MS will come up with Silverlight 2.0, which will only work on Vista or its successor, hoping for force us all to play their upgrade house-of-cards game.

Comment by James MacFarlane — September 13, 2007

Looks like a DENG type of approach…?


Comment by John Dowdell — September 13, 2007

Hopefully this will at least reduce (or destroy) any dependence on XAML, which MS was hoping would help convert developers to Silverlight. The difficulty of developing for both has been blogged about. Now that we only have to work with SVG, maybe eventually everyone will realize Silverlight is unnecessary to begin with!

Comment by Charles — September 13, 2007

As a technical experiment, it’s certainly interesting and must have been a fun challenge. But, I have trouble seeing any real-world use for this, since it’ll be very brittle, and will require constant work to keep working with silverlight + IE updates.

Just give us SVG now ;)

Comment by Morgan Roderick — September 14, 2007

Silverlight unnecessary? It can do more than just SVG. I’m usually opposed to plugins (I hate Flash), but the power of a cross-platform .NET is too good to pass up.

Comment by Andy Kant — September 14, 2007

Thankfully we don’t have to go down the Silverlight path to display SVG in IE. The SVG Web project ( is looking promising.

Here’s what they say:
“SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base.

Once dropped in you get partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used, though you can override this and have the SVG Web toolkit handle things instead. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it’s very easy to use and incorporate into an existing web site.”

Comment by HMIGuy — October 15, 2009

Leave a comment

You must be logged in to post a comment.