Pro HTML5 Programming, Second Edition

C H A P T E R  3

Scalable Vector Graphics

In this chapter, we’ll explore what you can do with another graphics feature in HTML5: Scalable Vector Graphics. Scalable Vector Graphics, or SVG, is an expressive language for two dimensional graphics.

Overview of SVG

In this section we’ll look at the standard vector graphics support in HTML5 browsers, but first, let’s review a couple of graphics concepts: raster and vector graphics.

In raster graphics, an image is represented by a two dimensional grid of pixels. The HTML5 Canvas 2d API is an example of a raster graphics API. Drawing with the Canvas API updates the canvas’s pixels. PNG and JPEG are examples of raster image formats. The data in PNG and JPEG images also represents pixels.

Vector graphics ...