O'Reilly logo

Social Data Visualization with HTML5 and JavaScript by Simon Timms

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required