SVG Linear
Description of SVG gradients
A gradient is a fluid transition from one color to another. It is possible to apply multiple color transitions to the same element.
There exist two main kinds of gradients in SVG:
- linear
- radial
The <linearGradient> element
The <linearGradient> element specifies linear gradients that fill graphical elements. It should be nested inside of a <defs> tag that contains definition of particular elements, like gradients.
Linear gradients can be horizontal, vertical, or angular:
- Horizontal gradients - y1 and y2 are equal, and x1 and x2 differ.
- Vertical gradients - x1 and x2 are equal, and y1 and y2 differ.
- Angular gradients - x1 and x2 vary, and y1 and y2 differ, too.
DANGER
Never confuse an SVG linear gradient with the CSS radial-gradient property. CSS gradients apply to HTML elements, while the SVG gradients apply to SVG elements.
Example of the <linearGradient> element to create an ellipse with a horizontal linear gradient:
Example of the <linearGradient> element to create an ellipse with a horizontal linear gradient
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
</svg>
</body>
</html>Example of the <linearGradient> element to create an ellipse with a vertical linear gradient:
Example of the <linearGradient> element to create an ellipse with a vertical linear gradient
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
</svg>
</body>
</html>Attributes
| Value | Description |
|---|---|
| gradientUnits | This attribute specifies the coordinate system for attributes x1, x2, y1, y2. Values: userSpaceOnUse, objectBoundingBox. |
| gradientTransform | This attribute gives extra transformation to the gradient coordinate system. |
| href | This attribute specifies a reference to another <linearGradient> element. |
| spreadMethod | This attribute specifies how the gradient behaves if it starts or ends within the bounds of the shape that contains the gradient. Values: pad, repeat, reflect. |
| x1 | This attribute specifies the x coordinate of the beginning point of the vector gradient along which the linear gradient is being drawn. |
| x2 | This attribute specifies the x coordinate of the ending point of the vector gradient along which the linear gradient is being drawn. |
| y1 | This attribute specifies the y coordinate of the beginning point of the vector gradient along which the linear gradient is drawn. |
| y2 | This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. |
The SVG <linearGradient> element also supports the Global Attributes and Event Attributes.
Practice
What are the uses of 'x1','y1','x2', and 'y2' attributes in an SVG linear gradient in HTML?