Using a gradient to fill a shape is a simple and efficient way to make a picture more attractive. The SVG specification defines two types of gradients: linear and radial. Here I show you how to use them.
You use the linearGradient element to define a linear gradient. This element contains stop child elements that define which colors are used to create the gradient and the origin of the transition. Here is an example:
<linearGradient> <stop offset="0%" stop-color="#666"/> <stop offset="100%" stop-color="#fff"/> </linearGradient>
In this example you specify a gradient in which a shadow of gray changes to white and the transition starts and ends on the edges of the shape. To see how this looks, use the gradient ...