Painting the Web

SVG Elements

The power of SVG lies in the fact that it's relatively simple to use, can support large figures that don't require much bandwidth, and can scale from the tiny to the extremely large—without any decrease in quality. It is this last characteristic that sets the vector graphics like SVG apart from the rasters, such as JPEGs, covered earlier.

The SVG components I'll focus on are those currently supported in Mozilla-based browsers, which is most of SVG 1.1 and more than enough to get us started with this marvelous technology.

SVG objects fall into different categories:

• Common attributes shared by one or more SVG objects

• Visual objects, including shapes, such as rectangles or circles, images, freeform paths, and text

• Processing constructs, such as facilities to group objects, and including script for dynamic manipulation and performing conditional tests

• Informational elements, such as titles and metadata

• Visual attributes, such as fills, gradients, and filters

• SVG animation, which wasn't implemented in the version of Firefox I used when writing this book but is partially implemented with Safari and Opera. Examples are given in Chapter 8.

This isn't an official categorization—just a way of getting a handle on all the various elements that make up SVG, and as good a way of introducing the goodies as any.

Tip

Many of the examples that follow are standalone SVG applications, which means they'll work in an object or embed element and thus in HTML. Some of the examples will be inline SVG, ...