SVG for Web Developers

Gradients

Objects in SVG can be filled or stroked with gradients, as well as with solid colors. A gradient is a smooth transition, or fade, from one color to another, or through a series of colors into other colors. You can use two types of gradients in SVG, linear gradients and radial gradients.

Linear Gradients

Figure 5-2 shows a rectangle filled with a linear gradient.

Figure 5-2. Rectangle with linear gradient fill (linearGrad01.svg).

This rectangle has a two-color gradient that spans from red on the left to yellow on the right. (The image shown is in grayscale for this book). Example 5-2 provides the code for this image in Figure 5-2.

Example ...