A gradient is a smooth transition from one color to another. In addition,
several color transitions can be applied to the same element.
There are two main types of gradients in SVG:
Linear
Radial
SVG Linear Gradient - <linearGradient>
The <linearGradient> element is used to define a linear gradient.
The <linearGradient> element must be nested within a <defs> tag. The <defs> tag is short
for definitions and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
Angular gradients are created when x1 and x2 differ and y1 and y2 differ
Example 1
Define an ellipse with a horizontal linear gradient from yellow to red:
The id attribute of the <linearGradient> tag defines a unique name for the gradient
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop>
tag. The offset attribute is used to define where the gradient color begin and end
The fill attribute links the ellipse element to the gradient
Example 2
Define an ellipse with a vertical linear gradient from yellow to red: