Rendering Rectangles with Linear Gradients

---

Radial Color Gradients

This is the second type of built-in color gradient that is available in SVG. A radial color gradient can be compared to the ripple effect that's created when you drop a stone in a pond, where each 'ripple' has a color that changes in a gradient fashion. Instead of specifying the color of every ripple, you need only specify a 'start' color and an 'end' color. For example, if you define a radial gradient with a start color of '#FF0000' (which is red) and an end color of '#000000' (which is black), then the resultant color gradient will range-in a radial fashion-from red to black. Radial gradients can also contain multiple start/stop color combinations. The point to keep in mind is that radial gradients change colors in a linear fashion, but the rendered colors are drawn in an expanding radial fashion.

Listing 2.3 demonstrates how to use the SVG defs element in order to define a radial color gradient that ranges from yellow to black.

Listing 2.3 radialDef1.svg

<defs> <radialGradient     gradientUnits="userSpaceOnUse">    <stop stop-color="yellow" offset="0%"/>    <stop stop-color="black"  offset="100%"/> </radialGradient> </defs>

Remarks

The SVG defs element in Listing 2.3 contains a radial gradient identified as gradientDefinition via the id attribute. The gradient ranges in a radial fashion from yellow to black. Multiple stop values can be specified, using standard colors, hexadecimal notation, or the (R, G, B) components of a color.

You can use the value of the id attribute in order to specify this color definition when rendering other SVG components. The next example shows you how to specify this color definition while rendering a rectangle.

---