Thursday, September 13th, 2007
SVG on IE via Silverlight via XSLT
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:
-
-
if (window.attachEvent) window.attachEvent("onload", function() {
-
xmls = document.getElementsByTagName('xml');
-
for (i=0; xmls.length>i; i++) {
-
var source = xmls[i].XMLDocument.documentElement;
-
-
var script = document.createElement('script');
-
script.id = "_svg2xaml_" + i;
-
script.type = "text/xaml";
-
if (source.nodeName == 'Canvas') {
-
script.text = source.xml;
-
} else if (source.nodeName == 'svg') {
-
var svg = new ActiveXObject("Microsoft.XMLDOM");
-
svg.async = false;
-
svg.loadXML(source.xml);
-
var xsl = new ActiveXObject("Microsoft.XMLDOM");
-
xsl.async = false;
-
xsl.load("svg2xaml.xsl");
-
script.text = svg.transformNode(xsl);
-
} else {
-
continue; // ok, script is never used. So what? Shoot me?
-
}
-
xmls[i].parentElement.insertBefore(script,xmls[i]);
-
-
var embed = document.createElement('object');
-
try {
-
embed.type = "application/x-silverlight";
-
embed.setAttribute('source', '#' + script.id);
-
} catch(err) {
-
embed.title="SVG or Silverlight required";
-
}
-
embed.width = xmls[i].style.width;
-
embed.height = xmls[i].style.height;
-
xmls[i].parentElement.insertBefore(embed,xmls[i]);
-
}
-
});
-
3.2 rating from 31 votes
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
I agree with Jeff the the real “magic†happens in the XSL file.
Good comment Jeff!
absolutely brilliant!
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.
Looks like a DENG type of approach…?
http://www.google.com/search?q=claus+wahlers+deng+svg
jd/adobe
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!
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 ;)
@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.