It’s just data

SVG on IE via Silverlight Revisited

Toine de Greef: This allowed some interesting techniques like: - SVG on Internet Explorer, without the ASV (Adobe SVG Viewer) plugin required

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.


Indeed works great in IE!
Why not in Firefox?
It seemed to be first to  support inline SVG?

Posted by Anton Tagunov at

Toucan works fine in Firefox on Windows and Ubuntu.

I didn’t spend much time trying to get Raven to work on Firefox, but after a quick peek, it seemed that if xaml2svg.xsl were a bit more careful about namespaces, it could produce a DocumentFragment that could be directly inserted into the page (i.e., without needing to resort to parsing the output produced by XSLT).

Posted by Sam Ruby at

FYI, Toucan doesn’t work for me in IE7 on Windows Vista. I get an “invalid argument” error for line 26, char 5. I believe it is actually referring to the line before: embed.type = 'application/x-silverlight';

If I change application/x-silverlight to application/xaml+xml (just a wild guess), it gets past that line, but then give me “No such interface is supported” on line 31, char 5.

At that point I just gave up.

Posted by James Holderness at

[from 9jack9] Sam Ruby: SVG on IE via Silverlight Revisited

Requires the Silverlight plugin but still cool....

Excerpt from del.icio.us/network/bertrandom at

Toucan doesn’t work for me in IE7 on Windows Vista

What version of Silverlight?

Posted by Sam Ruby at

What version of Silverlight?

Doh! I’d forgotten I’d even installed it (for some reason I thought it was built into Vista). I suspect I installed it back when it was still in beta, so that would explain why it isn’t working. When I get a chance I’ll download a newer version and see if that helps.

Posted by James Holderness at

I’ve reproduced your symptoms by uninstalling Silverlight.

I’ve added a try {...} catch(err) {...} to the script.  In case of failure, the area where the image would have been is now outlined, with a small rectangle with a red x in the upper left.  I’ve also set the title to “SVG or Silverlight required”.

Posted by Sam Ruby at

Getting SVG support in MSIE via Silverlight and XSLT

[link] [more]...

Excerpt from reddit.com: programming - newest submissions at

I see nothing, because you’re serving up toucan.html as text/html to me (Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.1.4) Gecko/20070509 SeaMonkey/1.1.2). Firefox 2 on the same machine gets served application/xhtml+xml.

Posted by James at

Sam and Toine,

Great work - only suggestion I would have is using IE conditional comments around the script tag to prevent all other browsers from fetching it (reminder).

Posted by Jeff Schiller at

James: can you tell me what you see for HTTP_ACCEPT on this page?

Jeff: will fix when I get back to someplace with reasonable network access.

Posted by Sam Ruby at

Sam, thanks for picking this up. The comments in the XML data island were to prevent Mozilla from flattening data, similar to reconstituteXml (SVG2SL.js), mainly to demonstrate it is also possible (PoC) to feed SVG to Silverlight on Mozilla.
Also it seems like I have some new homework with my XSLs :-).

Posted by Toine de Greef at

Toine: see also HOWTO Embed MathML and SVG into HTML4; but in my case, I avoided “flattening” (in my experience, IE flattens start tags, Mozilla nests empty tags) is to serve the page as application+xhtml+xml to browsers that support it.

Posted by Sam Ruby at

Sam> James: can you tell me what you see for HTTP_ACCEPT on this page?

Sam, I don’t see toucan in Firefox 2.0.0.6 either.
View source gives me a lot of SVG, so it’s not a connection issue.
Here are two lines from http://intertwingly.net/test.cgi

HTTP_ACCEPT text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 HTTP_USER_AGENT Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

I’m behind a corporate firewall

Posted by Anton Tagunov at

I’m behind a corporate firewall

Let’s see if we can outsmart your corporate cache.  Try adding ?AntonTagunov (or any other reasonably unique string) to the URI.  If that works, it probably is my fault as I’m not sending VARY: Accept.

Posted by Sam Ruby at

Which is roughly where my dilemma comes in – I’ve been meaning to outfit plasmasturm.org with a MIME type switcher to serve IE users something useful, but it seems I’ll have to defeat any semblance of caching to achieve that.

I can’t be bothered to play tricks with the Accept header, considering the weird things you’ve seen browsers do, and that it’s problematic in various ways more.

Since I really only intend to serve text/html to IE and am content to send application/xhtml+xml to everyone else, I thought to key on the user agent. Unfortunately, this would mean sending Vary: User-Agent to be correct – but user agent strings are so extremely variable that I’d be polluting caches with dozens or even hundreds of redundant copies of the same representation, with the associated distribution of cache hits over all the copies and increase of cache misses. A rather bad scene.

It would be nice if there was a simple solution to the whole mess…

Posted by Aristotle Pagaltzis at

I’ve gone ahead and added Header add Vary User-Agent to just <Files *.html> in just that one directory.

Posted by Sam Ruby at

[from judell] Sam Ruby: SVG on IE via Silverlight Revisited

SVG to Silverlight via XSLT. But, embedding in HTML using comments? I think I can improve upon that....

Excerpt from del.icio.us/network/gojomo at

Sam: HTTP_ACCEPT is text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Both browsers are using a proxy, but if I turn it off in SeaMonkey I get sent application/xhtml+xml. Adding a query string changes nothing. The only difference on test.cgi between using a proxy and not is HTTP_X_FORWARDED_FOR and HTTP_VIA exist, and HTTP/1.0 instead of HTTP/1.1. The proxy is squid/2.5.STABLE12.

Posted by James at

In xp/ie6 both toucan and raven are instantenous didn’t notice any delay.
Great job

Posted by diego at

No delay on my system (XP/IE7) either. And much faster than the XamlViewer XBAP...
Sam, what you’re doing for accessibility and interoperability (mimetypes, use of native SVG on Mozilla) is great!

Posted by Toine de Greef at

Let’s see if we can outsmart your corporate cache.  Try adding ?AntonTagunov

No luck :-(
Still not working in Firefox.
IE is okay.

Posted by Anton Tagunov at

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:...

Excerpt from Ajaxian at

I finally got around to upgrading my Silverlight and Toucan and Raven both work perfectly for me now in IE. This is really cool. I’m dieing to get something like this working from within my feed reader. It’d be nice to be able to see your feeds in all their glory.

Posted by James Holderness at

I’m dieing to get something like this working from within my feed reader.

Is your feed reader based on IE as a rendering engine?  If so, the transformations required on my feed are trivial.  <div style="..."><svg>...</svg></div> becomes <xml style="display:block;..."><svg>...</svg></div>.  And one small script needs to be run.

For Firefox and Opera (and perhaps WebKit), you either need to serve the feed as application/xhtml+xml or you need to construct the DOM with the correct namespaces.  If you do that based on reconstructing the original intent after the tag soup parser is let loose on this data, you need to worry about a few details.

Posted by Sam Ruby at

Is your feed reader based on IE as a rendering engine?

It is.

If so, the transformations required on my feed are trivial. And one small script needs to be run.

Other than possible security implications, I’m not too worried about that. I would hope I can do it with a plugin so I wouldn’t even have to mess with any of our core code. However, the first step is getting the namespaced SVG elements through the HTML whitelist. That will require significant changes to the main application, which can not easily be justified. I’ll have to see what I can do.

Posted by James Holderness at

links for 2007-09-14

Google founders pay NASA $1.3 million to land at Moffett Airfield The agreement gives Larry Page and Sergey Brin use of the former naval air station, from which civilian aircraft are normally barred, in exchange for allowing NASA to place...

Excerpt from All in a days work... at

Microsoft and Adobe Killing SVG?

... [more]

Trackback from Joshua

at

Adobe and Microsoft Killing SVG?

I recently encountered a link to this blog post , in which the author suggests that Microsoft and Adobe are colluding to kill SVG , the web-standard way of doing vector graphics.  Of course, I had already seen speculation of Microsoft...

Excerpt from Joshua at

Microsoft and Adobe Killing SVG?

I recently encountered a link to this blog post , in which the author suggests that Microsoft and Adobe are colluding to kill SVG , the web-standard way of doing vector graphics. Of course, I had already seen speculation of Microsoft being the bad...

Excerpt from MIX at

Microsoft and Adobe Killing SVG?

I recently encountered a link to this blog post , in which the author suggests that Microsoft and Adobe are colluding to kill SVG , the web-standard way of doing vector graphics. Of course, I had already seen speculation of Microsoft being the bad...

Excerpt from MIX at

Arve on Cross-browser javascript vector library! Reddit alien demo

Have a look at [this]([link]) instead, which uses XSLT to convert SVG to Silverlight....

Excerpt from javascript: what's new online at

Arve on Cross-browser javascript vector library! Reddit alien demo

Have a look at [this]([link]) instead, which uses XSLT to convert SVG to Silverlight....

Excerpt from reddit.com: what's new online at

Answer by Jon Galloway for XAML to SVG?

XAML is a superset of SVG, since it’s an entire application description language. While SVG has some basic programmability functions (enough to build a Tetris game, for example), it’s really a vector graphic format. Some options: XamlTune is (open...

Excerpt from XAML to SVG? - Stack Overflow at

Arve on Cross-browser javascript vector library! Reddit alien demo

Have a look at [this]([link]) instead, which uses XSLT to convert SVG to Silverlight....

Excerpt from javascript: what's new online at

Answer by panesofglass for SVG vs CANVAS, where is the Web World going towards?

The Raphael JavaScript framework John mentioned is the best I’ve come across. You could also use pure SVG and display it in IE using XSLT, as described by Sam Ruby . I’ve also used excanvas , which used to work with IE also. SitePont also had a...

Excerpt from SVG vs CANVAS, where is the Web World going towards? - Stack Overflow at

Answer by Jon Galloway for XAML to SVG?

XAML is a superset of SVG, since it’s an entire application description language. While SVG has some basic programmability functions (enough to build a Tetris game, for example), it’s really a vector graphic format. Some options: XamlTune is (open...

Excerpt from XAML to SVG? - Stack Overflow at

Answer by Ryan Riley for SVG vs CANVAS, where is the Web World going towards?

The Raphael JavaScript framework John mentioned is the best I’ve come across. You could also use pure SVG and display it in IE using XSLT, as described by Sam Ruby . I’ve also used excanvas , which used to work with IE also. SitePont also had a...

Excerpt from SVG vs CANVAS, where is the Web World going towards? - Stack Overflow at

By: aranwe

SVG in IE (via Silverlight and XSLT): Inline SVG in MSIE SVG to Silverlight Workbench SVG on IE via Silverlight Revisited...

Excerpt from Comments on: SVG Is The Future Of Application Development at

Add your comment