SVG Linear Gradient

SVG linear gradient is used to represent the linear transition of one color to another.

The <linearGradient> element defines the linear gradient. We can use the <linearGradient> element within <defs> element.

Linear gradients can be vertical, horizontal or angular gradients:

1. Horizontal gradients are created when x1 and x2 differs and y1 and y2 equals.
2. Vertical gradients are created when y1 and y2 differs and x1 and x2 equals.
3. Angular gradients are created when both y1, y2 and x1, x2 differs.

Example

Explanation

• The id attribute defines a unique name for the gradient.
• The x1, x2, y1, y2 attributes define the start and end position of the gradient.
• A gradients color range may be composed of two or more colors and each color contains a tag. The offset attribute define that where the gradient color start and end.
• The fill attribute is used to link the element of eclipse to the gradient.