Thursday, September 13th, 2007

SVG on IE via Silverlight via XSLT

Category: Microsoft, SVG

<p>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:

javascript
< view plain text >
  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;
  5.  
  6.     var script = document.createElement('script');
  7.     script.id = "_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]);
  23.  
  24.     var embed = document.createElement('object');
  25.     try {
  26.       embed.type = "application/x-silverlight";
  27.       embed.setAttribute('source', '#' + script.id);
  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. });

Toucan

Related Content:

  • Silverlight Tutorial
    Silverlight is Microsoft's framework for building browser- and platform-agnostic Web apps. This resource will help developers see what Silverlight can...
  • IP traceback via logging
    This section of our chapter excerpt on network algorithms teaches how to respond to the issue of IP traceback by using efficidnt packet logging and...
  • Trusted and sandboxed applications in Silverlight 4
    Silverlight is a Web technology, or at least is deployed via a browser. To mitigate security concerns Silverlight is constrained to run in a sandbox....
  • IP traceback via probabilistic marking
    This section of our chapter excerpt on network algorithms teaches how to defend a client's network against IP traceback issues by understanding...
  • Active Directory scripting via GPOs
    Learn to use Active Directory scripts within Group Policy Objects, and why it's...

Posted by Dion Almaer at 9:15 am
9 Comments

+++--
3.1 rating from 36 votes

9 Comments »

Comments feed TrackBack URI

Dion,

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.

Regards,
Jeff

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…?
http://www.google.com/search?q=claus+wahlers+deng+svg

jd/adobe

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

@Charles
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 (http://code.google.com/p/svgweb) 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.