Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Interactive Web Graphics: A look at HTML5 Canvas .vs. SVG .vs. Flash .vs. Silverlight .vs. Unity .vs. Java .vs. VRML

Posted by bcmoney on February 9, 2011 in Flash, Mobile, Multimedia with 1 Comment

No Gravatar

Image by tonynetone via Flickr

Something has happened recently on the World Wide Web that really impresses me. The web has finally begun to come alive with rich, interactive, high-performance, animated graphics. Not only are these graphics becoming comparable to any previously achievable only in a Desktop Application running on the OS, but they are also pushing the boundaries in terms of what’s possible in UI design, HCI and Data Visualization. From graphs and plots for mathematics to 3D maps and models for architecture, and from immersive panoramic real estate tours to high fidelity gaming engines for emergency healthcare scenarios, the possibilities are endless.

This all serves to help in bringing about a ubiquitous Semantic Web not just for document archiving and sharing information, but for the development of a shared understanding (Knowledge Base), that has long been envisioned by the World Wide Web’s founders. These new interaction platforms offer an incredible venue for cutting through immense amounts of data and explaining complicated ideas in an easy to comprehend manner. Now is the time to take stock of the leading technologies and attempt to make sense of which technologies will be most useful going forward towards a 3D Web. The obvious leaders are Canvas, SVG, Flash, Unity, Silverlight, Java and VRML.

Side-by-Side Comparison

No Plugin Needed % % x x x % x
Major Vendor Google &
W3C Adobe Microsoft Unity Oracle X3D
Free/Open License y y x x x x x
No Editor Needed y y y % % y y
Editor available x y y y y y y
Scripting Language JavaScript JavaScript,
JavaFX script,
script, Java
Rectangles y y y y y y y
Lines y y y y y y y
Elipses y y y y y y y
Fills y y y y y y y
Arcs y y y y y y y
Shadows y y y y y y y
Bézier Curves y y y x y y x
Quadratic Curves y y y x y y x
Animation y y y y y y y
Image manipulation y % y y y y y
Sprites y x y y x x x
Rasters y x y y y y y
Vectors y y y x y x x
Audio % x y y y % x
Video % x y y y % x
3D support y % y % y y y
GPU Acceleration % x y y y y x
Mobile support y % % % x % x

DHTML and Animated GIFs

Before all these other technologies became mature, the only option was Animated GIFs or vicious browser-specific DHTML hacks (image swapping/replacements and moving by pixels to simulate animation):

Impressive DEMO (DHTML)

Let’s not go back to that time; but hey, even Animated GIFs have their appropriate time and place (i.e. message board avatars or with restraint, in email newsletters). DHTML can probably R.I.P. forever, in favour of HTML5 and clean JavaScript (i.e. using jQuery or prototypes) though.


Download VRML Plugin (suggest Cortona VRML Viewer)


The SVG standard has reached W3C Recommendation status (meaning all modern browsers have either already implemented it natively, or are working on it… native support currently in: IE9+, FF3.6+, Safari 4+, Chrome 5+, Opera 10+). It’s main advantage is that everything is a Vector (lines between co-ordinates) rather than pixels that are colored or not, thus images look incredibly smooth and can scale to look the same on practically any screen size.

The following library helps for working with or scripting SVG files in the client:

This library helps for working with SVG from within Flash:

Impressive DEMO


Flash core
Flash community visualization libraries

<a title="Get Adobe Flash player" href="" target="_blank" rel="noopener"><img alt="Get Adobe Flash player" src="" style="border-style:none" /></a>

Impressive DEMO


Get Microsoft Silverlight

Impressive DEMO


Impressive DEMO


Applet, JavaFX

Impressive DEMO

HTML5 Canvas

The main advantage of HTML5 Canvas is that it will eventually be a part of all modern browsers, meaning that finally, we could truly have a “write-once run everywhere” graphics rendering option (like Java promised all those years ago and sort of delivered on, but which the web is even better suited for). The two main technologies used to animate graphics are the Canvas element and a (possibly browser-specific) native implementation of WebGL.

Another option is to use an external JavaScript library to render and script HTML5, the best-known and highest quality such library is:

Impressive DEMO


As usual, it’s up to the developer which technology to use. While I don’t see many going with Java or VRML these days, even they have their charm. Unity can also do great things but has almost as steep a learning curve as Flash and ActionScript. If I were a betting man, I’d be investing more of my time, money and energy into HTML5 Canvas and/or SVG. Ironically enough though, I just noticed that on my iPhone 3GS with the latest iOS v5.0.1 installed, only the HTML5 Canvas and Animated GIF work as expected. The SVG renders nicely but the animation doesn’t run. None of the other plugin-requiring platforms work (i.e. Flash, Silverlight, Unity, VRML).

UPDATE (2011-11-10):
I’ll stick by this conclusion even more, what with the latest round of layoffs and cuts at Adobe to the Flash Lite mobile platform, which is on its way out.