O'Reilly logo

Special Edition Using XML, Second Edition by - et al. David Gulbransen

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

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

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