Scalable Vector Graphics is good technology for drawing images on web pages. It's sort of a forgotten tech; SVG dates back to 1999 but lack of IE support hamstrung adoption. But it works great in every modern browser, including IE9, and it's beautiful. A lot of the focus for HTML5 drawing has been about canvas. But SVG is very capable and better suited for document presentation.

SVG is a vector graphics format: you write a description of objects in the drawing as a set of declarations: "red square at (50,50)", "the word vector rotated 30° and flipped". Then the browser renders the scene graph. The underlying XML isn't too verbose and the syntax for transformations and paths and the like is a shorter text format. SVG is remarkably capable in what it can draw and browsers do a beautiful job of rendering with anti-aliasing. Given how rare SVG usage has been it's amazing how good the implementations are.

This blog post contains some simple SVG: if you don't see a wind rose in the upper right click through to my blog. Should work in IE9, Firefox 4, and Chrome. (Doesn't work in Safari and older Firefox because of XML namespace issues unique to my blog). If you view the source you can see the code for the diagram. It's basically a bag of <path> elements, each of which draws a wedge and translates it.

I first understood SVG's value when talking to Mike Bostock about his genius Javascript visualization libraries Protovis, Polymaps, and D3. SVG is a declarative document, so it's very easy to manipulate the scene graph via DOM and Javascript. Mike's libraries have turned that capability into beautiful interactive visualizations.

SVG is pretty easy to program. You can write it by hand, but for building SVG in Javascript I recommend D3: it does for SVG what jQuery did for DHTML. A key debugging tool is DOM inspection. Browser developer tools let you easily examine and modify the generated SVG on live documents. For docs, the resource I keep going back to is the SVG spec; it's remarkably well written. O'Reilly also publishes a free online book.

techgood
  2011-03-21 22:36 Z