Same source works on MSIE 7.0/with Silverlight on WinXP, Firefox 2.0.0.3 on Ubuntu, and Opera 9.20 also on Ubuntu.
Same source works on MSIE 7.0/with Silverlight on WinXP, Firefox 2.0.0.3 on Ubuntu, and Opera 9.20 also on Ubuntu.
It took a while to peel away the layers in this quickstart to get to the core. createMySilverlightControl calls a createObject
function with a large number of parameters. createobject
is defined here, and copies the bulk of the parameters to a new slPluginHelper
object and then calls buildHTML
with that object. buildHTML
builds a string using those parameteters, which is ultimately inserted into the (global!) parentElement.innerHTML
. If you don’t need all the parameters, everything reduces down to the following:
var embed = document.createElement('embed'); embed.type = "application/ag-plugin"; embed.source = '...'; embed.width = svg.width; embed.height = svg.height; parentElement.innerHTML = embed.outerHTML;
Simply creating the embed
element and appending it as a child doesn’t cause it to be executed, it must be converted to a string and assigned to an innerHTML
attribute. This is a recurring theme, as the way to create Silverlight objects is via CreateFromXaml.
I figure that instead of creating a large number of small objects via CreateFromXaml
, one might as well do it all at once, and the nifty text/xaml
script
element does the trick:
var script = document.createElement('script'); script.type = 'text/xaml'; script.id = '...'; script.text = canvas; parentElement.parentNode.insertBefore(script, parentElement);
It turns out that IE flattens all the data from the inline SVG element. There are separate sibling SVG
and /SVG
elements, with all the intervening nodes placed in between these two. One can even detect empty tags, so all the necessary information is in place to reconstitute the tree. One minor issue that needs to be worked around: not only don’t these nodes have any children, they produce errors if you try to add children. This means that all parent nodes must be replaced with new objects which are capable of having children.
Finding Silverlight equivalents of all the SVG objects looks to be the most straightforward but time consuming (given the number of objects in question) part of this effort. At this point, there is only a very modest beginning... one element and two attributes.
Eventually enough namespace support will also need to be added in order to recognize xlink attributes.
Also works in Webkit nightlies,
That should simply be the native SVG showing through.
but fails in Safari 2.04 with Silverlight plugin.
At the moment, the conversion is only attempted on browsers that support the proprietary attachEvent method, and do not support the standard createElementNS method, thus:
// if it looks like IE, trigger conversion on document load if (window.attachEvent && !document.createElementNS) { window.attachEvent("onload", convertSvgToSilverlight); }
Possibly, something like this could be used to trigger the conversion on Safari, but it would probably be best if this were limited to certain versions of WebKit.
why does IE7 continue to pop up the File Download dialog citing “Unknown File Type” when I try to navigate to your post?
No clue. Works for me.
Ah!
(I couldn’t post this comment right away because your comment spam tracker thinks I am in a comment-bombarding spree)
Looks like Google Reader has the link to your post without the ‘www’ in front of intertwingly.net.
Why does that throw off IE? (Firefox seems to be perfectly fine with it)
Sam, have you considered using client-side XSLT at all for transforming SVG to XAML?
Considering how varied a SVG element’s content can be I think the freedom <xsl:apply-templates/> offers could be worthwhile.
Here’s an example of what I’m talking 'bout [link]
The downside is that I couldn’t find a suitable way to make IE-only client-side xslt files (so I cheated with a user-agent sniffing PHP script). The upside is that if another javascript kills your page in IE this code would have already been executed.
One typo though: “Sivlerlight”
Fixed. Thanks!
Sam,
I think you need to look at conditional comments again - all browsers except IE treat it as one big comment and ignore the script. Only IE would include the script (exactly what you want).
Or did I miss something?
Jeff
While this seems like an amazingly cool hack, wouldn’t it be easier to get IE support for inline SVG, starting with the Adobe SVGViewer plugin?
Google turns up several discussions on this topic (e.g. this one). Surely, one of these recipes could be adapted much more easily to work in a cross-platform-compatible fashion. And you’d get a rather complete SVG implementation for your efforts.
At this point in time I like to name the server setup messed up
Björn, the mapping of intertwingly.net to wwww.intertwingly.net is handled for me by my hosting provider, and I’m unclear of the mechanics behind how it works. Eventually I will look into it.
I think you need to look at conditional comments again - all browsers except IE treat it as one big comment and ignore the script. Only IE would include the script (exactly what you want).
Jeff, you are correct. Now onto my next issue. I’m a big believer in Unobtrusive Javascript. I’m willing to do a limited amount of browser specific hijinks within my scripts, but would like to keep my pages uncluttered.
wouldn’t it be easier to get IE support for inline SVG, starting with the Adobe SVGViewer plugin?
Jacques, this is every bit as much about being a learning exercise for me as it is about achieving a specific task. Meanwhile, ASV is being EOL'ed, and the number of IE users who will be predisposed to already have Silverlight installed is likely to be on a upwards trajectory for the foreseeable future.
Now onto my next issue. I’m a big believer in Unobtrusive Javascript. I’m willing to do a limited amount of browser specific hijinks within my scripts, but would like to keep my pages uncluttered.
Sure. I guess I’m more into preventing a file fetch request, parsing pages of JavaScript statements (your script is only going to grow in length...) and executing a few if statements if they don’t need to. But to each his own style... :)
Jacques, this is every bit as much about being a learning exercise for me as it is about achieving a specific task.
It’s not the destination; it’s the journey. I know. This seems like a great way to learn about SilverLight.
But the prospects for being able to realistically map SVG (even the subset of SVG you happen to use) to XAML seem a bit dubious.
Meanwhile, ASV is being EOL’ed,
Very unfortunate. But there are promising alternatives, like the Renesis plugin.
the number of IE users who will be predisposed to already have Silverlight installed is likely to be on a upwards trajectory for the foreseeable future.
Right now, the number who have either plugin installed is indistinguishable from zero. But you are probably right about the future ...
I’m a big believer in Unobtrusive Javascript. I’m willing to do a limited amount of browser specific hijinks within my scripts, but would like to keep my pages uncluttered.
There is a different type of IE conditional comments that works in script files. [link]
Very interesting, but it is sad that one has to be limited by Microsoft in the use of SVG. I think we should continue to use the full SVG 1.2 implementation as per specification. If Microsoft doesn’t want to play ball, then IE users will be limited by immature and non-compatible technologies.
These type of posts is what Microsoft wants to see. Us changing our way of work to become slaves to their technologies. It’s a pitty and I don’t think we should play the game. Feature for feature there is currently no browser that comes close to Opera. I’ll rather tell my visitors to download it. It’s not much smaller than Adobe SVG viewer.
Regards,
Jacobus
Instead of
embed.type = “application/ag-plugin”;
SVG2SL.js should read
embed.type = “application/x-silverlight”;
I’m experimenting ([link]) with stuff like this as well. What you did provided me with some great clues. Thanks and keep up the good work!
Great to see different efforts (using Flash, VML, etc.) pushing SVG forward. :-)
@Josh Peters
The downside is that I couldn’t find a suitable way to make IE-only client-side xslt files
Not quite “IE-only” but Microsoft-only (more information/examples available [1]):
<xsl:if test="system-property('xsl:vendor')='Microsoft'">
[...]
</xsl:if>
[1] [link]
Your demo doesn’t work in IE for me. It gets me this error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Mon, 11 Jan 2010 18:38:44 UTC
Message: Object required
Line: 27
Char: 5
Code: 0
URI: [link]