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]);
-
}
-
});
-
