Welcome to the Usable Apps Blog

Author: Roy Selig, Architect - Oracle Applications User Experience

Some of us in Apps UX continue to monitor the browser-based vector graphics
space for signs of a sea change. HTML Canvas may represent one. If you've pushed pixels long enough, have been asked to support rich visualization in the browser, been searching for ways to accommodate multiple form factors or have been schooled in the art of lightweight front-end engineering you've realized that document-centered HTML design has its limitations. For example, that widget looks great at 1024x768, but at 800x600 it's challenged and at 1900x1200 it looks barren. Forget the mobile experience, it's just too painful to contemplate. Oh, and is there any way you can squeeze its page weight down to less than 2 Kb? Precisely at times like these designers and engineers alike appreciate what a more scalable solution can provide: a more performant, flexible and compelling experience with lower implementation and maintenance costs. Enter vector graphics.

Vector graphics are computed images. They allow us to replace bitmaps that encode a pixel for pixel map of an image with a set of instructions for drawing that image. As a consequence vector graphics are smaller and more nimble than their bitmap counterparts. They are smaller because their instructions are text-based and highly compressible. They are more nimble in the sense that we can change their appearance by writing new client -side instructions. Which means we can do some pretty interesting things without generating much server traffic.

Case in point, the charts provided via the links below.

• JPG-based 3D Chart [124 KB]
• Vector Based 3D Chart [Firefox & Safari: 8 KB; Internet Explorer(IE): 17 KB]

The first link displays a JPG image which weighs 124 Kb. If we want to switch to a different chart representation, we must pass that instruction back to the server, the server must process those changes and return a replacement image which would likely be of similar size. The second link displays the same chart but is rendered using vector graphics. The page that loads the chart includes a javascript library which weighs between 8 and 17 Kb depending on whether or not you are running Internet Explorer. Normally this file would be downloaded once and cached by your browser. The actual instructions to render the chart weigh less than 1 Kb. In this example if we want to change the chart representation we can do so using a Javascript API; those instructions can often be carried out without requesting help from the server. Take note, Firefox and Safari execute the code about 10 times faster than IE due to native support for HTML Canvas.

If this demonstration fails to impress that's probably because it represents nothing new to you. Adobe Flash, a vector-based browser plug-in, has been around for years and displaying charts like this for all of that time. More recently Adobe AIR and Microsoft Silverlight have entered the fray. Their goal is much larger than delivering vector graphics. Both technologies position themselves as platforms for next generation Rich Internet Applications. But there is no denying a large part of their appeal is based upon the lightweight, compelling experience vector graphics solutions enable.

What is unusual about this demonstration is that I didn't use Flash, AIR or Silverlight to demonstrate a vector-based chart. I used HTML Canvas. HTML Canvas is a relatively new tag offered up by Apple that takes its cues from Scalable Vector Graphics (SVG), a specification that emerged in the late 1990's. HTML Canvas is supported natively in a few browsers already (Safari, Firefox, Opera) and can also be supported in IE via a Javascript/VML-emulation courtesy of Google.

What's so great about HTML Canvas? Well, a few things. Native browser support for vector graphics as wrought by HTML Canvas promises a more seamless experience for the designer, engineer and end-user. It doesn't require the end-user to download and maintain a browser plug-in. It can easily blend with HTML. So designers have more display options. Its syntax is XML based and the objects it produces are easily manipulated with Javascript. Which means there are quite a few developers out there equipped to leverage HTML Canvas and just as many opportunities to peer at how other coders do things. The AJAX  phenomenon started with a similar mix of cool technology and access to sample code.

But we've heard about browser-based vector graphics before, haven't we? Yes we have. Microsoft's Vector Markup Language (VML) debuted in 1998 but failed to catch on. Trouble then was we were in the middle of the browser wars and no one other than Microsoft's Internet Explorer (IE) wanted to implement it.

Times have changed thankfully. In 2007 many browsers have already adopted
HTML Canvas. And the major one that hasn't yet (IE) can work with Canvas tags in an emulation mode. For a proprietary tag that emerged just four years ago that's quite an accomplishment.

There are other reasons to keep an eye on Canvas. In the 2nd part of this blog entry I'll discuss some of the catalysts that could propel Canvas forward and talk about one issue that could derail it.