Linear Color Gradients

---

Using the SVG defs Element

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

Listing 2.1 linearDef1.svg

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

Remarks

The SVG defs element in Listing 2.1 contains a linear gradient identified as gradientDefinition via the id attribute. The gradient ranges in a linear 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 id value in order to specify this color definition when rendering other SVG components. Note that if you double-click on this file, you will not see anything in your browser; it is simply the definition of a linear gradient element. The next example shows you how to specify this color definition as the color of a rectangle in an SVG document.

---