Thursday, September 13th, 2007
SVG on IE via Silverlight via XSLT
<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:
-
-
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]);
-
}
-
});
-
Related Content:
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.
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.”