Tuesday, November 07, 2006

Vector Ajax on the web

Ajax technology sat unexplored in Internet Explorer for six years before it sparked Web 2.0 and enabled a revolution in web design. Originally created to support Microsoft Outlook Web Access, Ajax is such a powerful tool that it has enabled rival web-based mail clients to supplant its creator.

Could another hidden gem from the same era create a similar revolution on the web? I think it could - vector graphics.

For years, vector graphics has been a niche product, with specialist uses in diagramming and drawing applications (except Visio, the market leader). Scalable Vector Graphics (SVG), the XML standard for describing graphics such as circles, rectangles and lines, has been stuttering forward in web standards committees but has not gained major consumer attention. VML, an earlier, more basic standard, has sat unused in Internet Explorer since 1999.

Yet the first stirrings of take-up are appearing, in unexpected areas.

First, VML appeared in Google Maps, to draw driving routes. Second, Firefox was upgraded to include core SVG functionality - so all major browsers now support either VML or SVG.

But it's the rise of Ajax and the internet productivity suite that will drive demand for vector graphics. Google Spreadsheets, the Zoho Suite, and Writely all require drawing functionality that simple images like .jpegs cannot cater for. They use the browser in new, interactive ways - as document editors, not just document viewers - for which vector graphics is uniquely placed.

It's the combination of SVG with Ajax - "Vector Ajax" - that beats competing technologies like Flash. Imagine constructing charts or diagrams in the browser using XML and Javascript, allowing the user to interact with them, then posting the chart or diagram back to a server using a standard HTML form.

Using VML in Internet Explorer 5+ and SVG in Firefox 1.5+ and other browsers, websites are springing up that offer:

  • Diagramming (as per Visio) or CAD in the browser (see Cumulate Labs)
  • Interactive Charts and Graphs in the browser (see XY Graph)
  • Graphical widgets like clocks, sliders, and searchable maps in the browser (see SVG clock)
  • Javascript libraries to ease development (see Dojo 2D)
  • Data visualization and manipulation (e.g. drag-and-drop organization charts, garden designs, architectural blueprints, programming language flow etc) in the browser
  • Improved user experience across all websites
These sites are not yet fully featured - but they are a proof of concept and open up the marketplace for a huge range of software. Expect the big beasts (Microsoft, Google) to pour into the void within the next year. For example, drawing functionality should soon become available in Google Spreadsheets. This kind of application should work even better in the browser than in a stand-alone client application, because SVG/VML are just branches of XML, opening up technologies like collaboration, wikis, cacheing, syndication / alerting, single sign on, storage, etc.

Ajax has opened developer's eyes to the browser's strengths as a platform. Now Vector Ajax can do the same for the browser as a powerful presentation layer.

Conclusion: Six years since its introduction to the browser, vector graphics is about to revolutionize the web as Ajax did before it, enabling a new generation of rich interactive websites.

1 comment:

Parag Mathur said...

Chris,

Check out ZCubes (http://www.zcubes.com). It contains a rich vector based graphics drawing tool called ZPaint that uses VML. We are currently in the process of building a SVG translator for non IE browser support. ZPaint provides a rich yet easy interface to the user to paint/draw/sketch/handwrite on the web. The website has a lot of examples of drawings made using ZPaint. Also, try the ZCubes platform itself and use ZPaint yourself.