HTML 5 Multimedia

A lot of HTML 5 buzz surrounds the topic of multimedia: video, audio, images, and animation.

With HTML 5, video can be added to a web page with a single line of code and it's just as easy to add audio.

That said, the more exciting discussion occurs when we talk about images and animation.

Images fall into two categories: raster and vector. Raster is just a fancy name for the image types you're most familiar with: jpeg, png, and gif. For example, your family vacation photos are in raster format. Vector images are more common in icons, logos, and fonts. Vector images can change size without getting fuzzy or lose image quality. Also, vector image file sizes are usually smaller than a raster version of the same image.

While there are thousands of programs that work with raster images, there are far fewer font programs and only a handful of vector image programs, including Adobe Illustrator and Inkscape. Although very professional images can be created in vector format, one major limitation is that they cannot be displayed in Internet Explorer and therefore the majority of web users cannot view them. This has significantly hampered widespread adoption of this image format and has been at the top of the IE wish list...until now. The HTML 5 standard (which IE9 will support) includes two vector-based components: the <canvas> element and SVG. In addition to the benefits of vector graphics, these components also support animation and are therefore expected to be a major alternative to proprietary animation plug-ins such as Adobe Flash and Microsoft Silverlight (is it obvious now why Microsoft has been dragging its heels for so long...?!)

Now that I've gotten you all excited about HTML 5 and the promise of a better tomorrow, I have some bad news: the HTML 5 standard isn't expected to be finalized until 2022.

So what now? Well, even if HTML 5 was magically available today and all browsers were magically using it, we'd still have issues. Namely, IE9 will not be available to Windows XP or older OS versions. This means the majority of web users will still be using IE8 or lower and will still not be able to view vector-based graphics/animation. Hmmm...so do we just give up now? Not quite -- enter: JavaScript.

JavaScript seems an unlikely hero in this story, but it's uniquely suited to harness the only native vector-based support available in IE: VML. VML is the vector render engine for IE and was originally proposed as a standard but rejected and SVG was created in its stead. Although not as feature rich or standardized as SVG, it does provide much of the same functionality. In addition, since Adobe Flash is available on the majority of computers, an alternate approach is to use Flash (or Silverlight) to display vector graphics on non-SVG/canvas compliant browsers.

Here's a current synopsis of all the major JavaScript libraries that deal with vector graphics:

Name: Ample SDK
URL: http://www.amplesdk.com/
Size (minified): 107k (runtime) + 89k (svg) = 196k
Supported Formats: SVG and VML
Disadvantages: relatively large library filesize, no SVG Filter Effects support, SVG support is in development
Examples:
- http://www.amplesdk.com/examples/

Name: canvg
URL: http://code.google.com/p/canvg/
Size (minified): 66k (core) + 9k (rgb color) = 75k
Supported Formats: SVG and Canvas
Disadvantages: IE users require Flash, no SVG Filter Effects support, no interactivity support, single developer
Examples:
- http://canvg.googlecode.com/svn/trunk/examples/index.htm

Name: dojox.gfx
URL: http://www.dojotoolkit.org/api/dojox/gfx.html
Size (minified): 88k (dojo 1.5 core) + 85k (dojox.gfx 1.5, 23 files) = 173k
Supported Formats: SVG, VML, Canvas, Silverlight, and experimental support of SVG Web
Disadvantages: I personally find the API and syntax to be confusing, no SVG Filter Effects support (not part of the VML or Canvas specifications)
Examples:
- http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/gfx/demos/

Name: ExplorerCanvas (ExCanvas)
URL: http://code.google.com/p/explorercanvas/
Size (minified): 11k
Supported Formats: Canvas and VML
Disadvantages: no SVG support, slow rendering and response time
Examples:
- http://bodytag.org/excanvas1/
- http://momche.net/projects/canvas/examples/example_clock.html
- http://excanvas.freehostia.com/callout-speech-bubble-excanvas-example.html

Name: jQuery SVG
URL: http://plugins.jquery.com/project/svg
Size (minified): 70k (jQuery 1.4.2 core) + 76k (svg plugin 1.4.3, 6 files) = 146k
Supported Formats: SVG and Canvas
Disadvantages: IE users need IE9 (requires Vista or higher OS), single developer
Examples:
- http://keith-wood.name/svg.html#examples
- http://keith-wood.name/svgBasics.html

Name: MooTools ART
URL: http://github.com/kamicane/art
Size (minified): 65k (MooTools 1.2.4 core) + 19k (ART 0.87, 7 files) = 84k
Supported Formats: SVG, Canvas and VML
Disadvantages: experimental, limited documentation
Examples:
- http://clientcide.com/temp/art/Tests/
- http://jsfiddle.net/oskar/guuCx/60/

Name: Processing.js
URL: http://processingjs.org/
Size (minified): 247k
Supported Formats: Canvas
Disadvantages: IE users need IE9 (requires Vista or higher OS), large filesize
Examples:
- http://processingjs.org/exhibition

Name: Raphaël (RaphaelJS)
URL: http://raphaeljs.com/
Size (minified): 61k (Raphaël 1.5 core) | 31k (gRaphaël 0.4.1)
Supported Formats: SVG and VML
Disadvantages: single developer, no Silverlight support, no matrix transformation support
Examples:
- http://raphaeljs.com/
- http://g.raphaeljs.com/

Name: SVG Web
URL: http://code.google.com/p/svgweb/
Size (minified): 120k (svg.js) + 44k (svg.swf) + 5k (svg.htc) = 169k
Supported Formats: SVG
Disadvantages: IE users require Flash, experimental, large filesize
Examples:
- http://codinginparadise.org/projects/svgweb/samples/demo.html

As you can see, the playing field is still very much in flux for a dominant player to bridge the gap between the IE limitation of today and the critical mass of future browsers that support HTML 5.