Special Edition Using XML, Second Edition

Gradients in SVG

SVG provides us with a technique to create gradients within vector graphics shapes. As with so many other parts of SVG, we simply state how we want the gradient to look. The gradient is defined in the definitions section of an SVG document and is then referenced later in the document when the gradient is being applied to a particular shape.

SVG provides two types of gradients—linear and radial. Let's look at using linear gradients.

Linear Gradients

The rollover button example you saw in Listing 23.1 shows the use of a vertical gradient. But you can also create horizontal gradients. Listing 23.25 shows a vertical bar that you might use as a side decoration on a Web page or as a separator between columns.

Listing 23.25. Using a ...