linearGradient and radialGradient

You've already seen the linearGradient element in Chapter 1, Introducing Scalable Vector Graphics. There's also radialGradient that works in much the same way, except it renders gradients that radiate around a center point. Both elements are added to the defs section and each has a series of stops with offsets and stop-colors defining the gradient.

They are then referenced by their id attribute as the argument to the  fill attribute of rect:

<svg width="400" height="300" viewBox="0 0 400 300"  
 xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear">
            <stop offset="5%" stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
        <radialGradient id="radial">
            <stop offset="10%" stop-color="gold"/>
            <stop offset="95%" stop-color="green"/>
        </radialGradient>
    </defs>
    <rect x="50" y="20" width="100" height="100" fill="url(#radial)">
    </rect>
    <rect x="200" y="20" width="100" height="100" fill="url(#linear)"> 
    </rect>
</svg>

This produces the following output: