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:
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/xamlscript element does the trick:
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, but fails in Safari 2.04 with Silverlight plugin.
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.
Inline SVG in MSIE . Sam Ruby has a neat proof of concept that converts inline SVG (currently only the path element) to the Silverlight equivalent. -->...
I am probably late to the party but why does IE7 continue to pop up the File Download dialog citing “Unknown File Type” when I try to navigate to your post?
Sam Ruby has already hacked together some Javascript to convert inline SVG to Silverlight objects. What was that about Microsoft “rebooting the web” again?...
Weird! The File Download dialog pops up only if I try to right click on the heading of your post from within Google Reader and try opening it in another tab. If I just browse to your blog home page directly ([link]) and either click on a post directly or else copy short cut, paste it in another tab, it works just fine.
Sam Ruby has kindly started to play with getting SVG support in IE 7 via the Silverlight runtime. I am hopeful that we can do some other fixits, such as implementing Canvas on top of Silverlight (instead of explorercanvas which uses VML). Can we...
Appendum to my comment above: Interestingly, the server redirected me to [link] when pasting [link] into IEs location bar. Navigating to the www. subdomain through whatever means makes the post links work indeed. At this point in time I like to name the server setup messed up - especially as I cannot open any direct links to Sam’s posts from (web) external sources in IE without seeing the download dialog :]
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.
Simon Willison : Inline SVG in MSIE - Inline SVG in MSIE. Sam Ruby has a neat proof of concept that converts inline SVG (currently only the path element) to the Silverlight equivalent....
Thanks, Sam for kicking this off - I knew it was just a matter of time before someone would do a proof-of-concept, but the week of MIX07 was earlier than I expected! One suggestion: If you’re going to use simple IE detection, then why not use...
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).
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]
That made my day: Silverlight makes it possible to render SVG in Internet Explorer. Through the fact that XAML and SVG are identical in many areas this is possible quite easy. We, the qooxdoo developers, don’t rely on the inline feature of Sam...
I recently stumbled over a little piece of information that, while quite stale, still seems widely underreported in the places I hang out. Adobe announced some time last fall that its SVG Viewer is dead and gone as of January 1, 2008. Is anyone...
I recently stumbled over a little piece of information that, while quite stale, still seems widely underreported in the places I hang out. Adobe announced some time last fall that its SVG Viewer is dead and gone as of January 1, 2008. Is anyone...
There’s a lot of Silverlight in the air right now. I haven’t seen the 'net abuzz like this since FutureSplash Animator . ;) I’ve been collecting links to samples out there. Since Silverlight is all text (XAML, JS, etc) there’s a whole world of...
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.
Update on Cat in JavaScript (and the lack-of native SVG support in IE 7.0)
The current Cat in JavaScript, with enhancements and improved portability provided by Takashi Yamamiya , is at [link] . I am considering extending this implementation with graphics. I think it would make the...
iPhone on Silverlight Promo Video?On the Silverlight promo video did
iPhone on Silverlight Promo Video? On the Silverlight promo video did anyone notice one of the actors using a device that looks for all the world like an Apple iPhone? Talking of the iPhone. Since its OS is based on a slimmed down...
Dynamics Developer Sessions - All 3 Screencasts cont…!The next screencast
Dynamics Developer Sessions - All 3 Screencasts cont…! The next screencast we have is “Build A VE Mashup with Microsoft Dynamics NAV 5.0″: Technorati tags: Microsoft Dynamics, Nav 5.0, Virtual Earth, Visual Studio 2008, ASP.NET...
Silverlight Browser on CodePlexLast week Ernie Booth announced a SilverlightBrowser
Silverlight Browser on CodePlex Last week Ernie Booth announced a SilverlightBrowser plugin for Reflector. The plugin allows you to browse web pages that contain Silverlight elements and display their constituent Javascript, XAML and assembly files....
Silverlight Browser on CodePlexLast week Ernie Booth announced a SilverlightBrowser
Silverlight Browser on CodePlex Last week Ernie Booth announced a SilverlightBrowser plugin for Reflector. The plugin allows you to browse web pages that contain Silverlight elements and display their constituent Javascript, XAML and assembly files....
Telerik ships Sitefinity CMS v3.1 Telerik has unveiled version 3.1
Telerik ships Sitefinity CMS v3.1 Telerik has unveiled version 3.1 of Sitefinity CMS for construction and management of web sites. Coming hot on the heels of version 3.0, Sitefinity v3.1 provides integrated search engine, forums module, updated RSS...
Which method from Silverlight can be used to replace the SVG’s getURL(url, callback)???
Iam calling this method from a .js file and expecting the response from the server to be routed to the method specified in the callback after the url request is processed. I couldnt find any information with respect to Silverlight with similar process?
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I’ve...
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I’ve...