Thursday, August 28th, 2008

The State of SVG Browser Support + Using Flash for SVG in Internet Explorer

Category: Canvas, SVG

<p>As part of the Open Web Advocacy work I’ve started with Dion and others at Google, one of my goals right now is to help increase awareness and support around doing 2-D/vector graphics on the open web. This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector graphics), and open source cross-browser drawing toolkits such as Dojo GFX, ExplorerCanvas, and Raphael.

One of the big reasons for this is that 2-D drawing/vector graphics is the top requested feature by double the amount of other feature requests in the recent Open Ajax Alliance Browser Feature Wish List vote-off. As part of this effort I’m doing a bootcamp right now to come up to speed on the latest developments in both Canvas and SVG. I’ve been using Shelley Powers excellent Painting the Web book to find out the state of vector graphics on the web in 2008. During this education I’ve run across two interesting things.

First, I wanted to know what the status of SVG support is across the different browsers. I found Jeff Schiller’s very complete SVG Test Suite results that are actively kept up to date:

SVG 1.1 became a W3C recommendation on January 13, 2003. Five years later, this page records my results of running various SVG implementations (web browsers and browser plugins) through the official SVG Test Suite. Last updated 2008-06-18.

A screenshot with some of the results:

SVG Test Results Against Browsers for SVG 1.1

SVG Test Results Against Browsers for SVG 1.1

Things are pretty good with Firefox 3, Safari 3, and the winner, Opera. There is a strong subset of SVG that can be used cross-browser with these. Of course, Internet Explorer is the limiting factor here, with a grand score of 0% for all tests:

Internet Explorer SVG Support

Internet Explorer SVG Support

This means that for open web vector graphics to be realistic we need some kind of shim for Internet Explorer (Adobe used to have a browser plugin for IE that had very high quality, but its quite large and was end of lifed in 2007). Internet Explorer actually has an earlier vector graphics standard named VML (Vector Markup Language) that can be used to ‘trick’ it into having 2-D graphics support that is used by a number of open source toolkits. However, VML can run into some performance issues when you start to get into a large number of nodes and animation with the available open source drawing toolkits.

One natural avenue is to emulate SVG or other 2-D graphics on Internet Explorer using Flash. I had always heard about this possibility but recently found a small company actually doing it to good effect. They have not finished yet, but their demo is impressive:

SVG Render Using Flash

SVG Render Using Flash

Here we are viewing the source of the SVG being rendered by this Flash:

SVG Renderer in Flash (View Source)

SVG Renderer in Flash (View Source)

I emailed the developers to get some more information on this Flash-based renderer and they responded:

Our SVG viewer and editor is not open source. It will be part of the new InputDraw version and with some more features – like draw recognition – will be part of the new Comics Sketch site, so users can create advanced comics strips.

We are part of a small company in Lisbon, Portugal named inEvo that works with a lot of web development, rich interfaces and other areas like computer graphics and artificial intelligence.

While I respect the hard work it took inEvo to create this and their need to charge for it, it looks like using Flash to emulate SVG is a valid approach for Internet Explorer and it would be great to have something similar available open source. Just the basic viewer being available would make sense as open source and would probably even drive more business to them for their higher level tools; it looks like inEvo has created lots of cool things above this that make sense as being commercial-only, such as an SVG editor, drawing recognition, social comics creation and sharing site, etc.

Related Content:

10 Comments »

Comments feed TrackBack URI

This is only interesting if we can integrate some SVG shapes into an HTML document and make it “javascriptable” as if it was a real SVG node in my DOM tree…

Comment by frenchStudent — August 28, 2008

It’s quite feasible to use this for large drawings (megabytes of SVG). I’ve had to build a floorplan viewer a few years back, and ended up converting from autocad dwg to svg on the server-side and rendering the svg in flash client-side. In general the performance was quite reasonable, but the biggest issue I ran across was the mismatch between flash’s internal curve support and SVG’s arcs. At the time there were only quadratic curves in flash’s drawing api, and everything had to be converted to that. Maybe with the new AVM2 engine and improved drawing support this won’t be an issue anymore.

Comment by Joeri — August 28, 2008

Hey Brad–
This is one of the points of the DEFT project I started at Dojo–it aims to take the fine Flash work you started, and I continued, and use it to create a DojoX GFX renderer in Flash so that we can get the hell off VML in IE. Unfortunately I have not had the time to work on it recently but I’m hoping to get back to it in the near future (been working on other things, one of which slipped into DojoX quietly and which I will be talking about in the near future).

Comment by ttrenka — August 28, 2008

Now that IE supports data: urls, I was thinking we could do some kind of unholy canvas implementation in JS, perhaps rendering to bmp format, and thus fill in some of the gaps in the VML implementation. The main thing is: standard interface + IE implementation that doesn’t make customers download anything.

Comment by gavindoughtie — August 28, 2008

I actually wrote a post on my blog on the same subject:

http://pitofknowledge.blogspot.com/2008/06/svg-to-go-mainstream-with-snow-leopard.html

Check it out if you found the post above interesting.

Comment by breiva — August 28, 2008

There is of course the Renesis plugin (proprietary but free), which is being quite actively developed — http://www.examotion.com/Renesis-Player.25.0.html

Comment by jmo7 — August 28, 2008

Mobile Safari doesn’t support SVG even though it is mentioned in the iPhone Getting Started Videos.

Comment by waynep — August 28, 2008

29€ (Flat price) for the inEvo tool is very affordable. Although open source is cool, there is no guarantee of continued development.
My experience is that in small open source projects developers get a better job and stop development

Comment by adaptive — August 29, 2008

Brad,

Would you mind contacting me (kurt at oreilly.com). I’m the online editor for XML and Web Development at O’Reilly Media as well as a long time SVG evangelist, and would definitely like to find out more information about your efforts at Google to promote SVG.

Comment by KurtCagle — August 30, 2008

For an update on this see http://code.google.com/p/svgweb/ – “SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer”.

Comment by morrisj — March 16, 2010

Leave a comment

You must be logged in to post a comment.