Data Visualization: Representing Information on Modern Web

Scalable Vector Graphics

Scalable Vector Graphics, or as they are more commonly known, SVGs, are another feature relatively new to HTML. They fulfill a similar role to canvas, but differ by the fact that they are vector-based instead of raster-based. This means that every image is made up of a series of basic shapes. This might sound a bit like canvas, after all, we created all our canvas images using basic shapes. The difference is that with SVG, the basic shapes remain as distinct objects after they've been drawn. With canvas, the source commands used to create the image are lost as soon as it is rendered. The information about the source of the pixel is lost in a jumble of canvas commands.

Conveniently, SVGs are stored as XML files. While I ...