SVG Linear Gradient in HTML

SVG Linear Gradients in HTML

All SVG filters are defined by < defs > element. It is used for the definition of the filter which is to be used.

The < filter > element is used to define an SVG filter. The element has a required id attribute that identifies the filter.

A gradient is a smooth transition from one color to another. Moreover, we can apply several color transitions to the same element.

The < linearGradient > element is used to define a linear gradient. Like filters, it must also be nested in < defs > tag.

Code explanation of code below is as:-

• 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 starting and ending positions of the gradient.
• Each color is specified with a < stop > tag. The offset attribute is used to define where the gradient color begins and ends.
• The fill attribute links the ellipse element to the gradient

Observations are:-

• Horizontal gradients are created when y1 and y2 are equal and x1 and x2 have different values.
• Vertical gradients are created when x1 and x2 are equal and y1 and y2 have different values.
• Angular gradients are created when x1 and x2 differ and y1 and y2 have different values.