SVG Linear Gradients

SVG Gradients

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 types of gradients in SVG:

• Linear gradients - defined with <linearGradient>
• Radial gradients - defined with <radialGradient>

The gradient definitions are placed within the <defs> or the <svg> element. The <defs> element is short for "definitions", and contains definition of special elements (such as gradients).

Each gradient must have an id attribute which identifies the gradient. The graphic/image then points to the gradient to use.

SVG Linear Gradient - <linearGradient>

The <linearGradient> element is used to define a linear gradient (a linear transition from one color to another, from one direction to another).

The <linearGradient> element is often nested within a <defs> element.

Linear gradients can be defined as horizontal, vertical or angular gradients:

• Horizontal linear gradients (this is default) goes from left to right (where x1 and x2 differ and y1 and y2 are equal)
• Vertical linear gradients goes from top to bottom (where x1 and x2 are equal and y1 and y2 differ)
• Angular linear gradients are created when x1 and x2 differ and y1 and y2 differ

Horizontal Linear Gradient

An ellipse with a horizontal linear gradient that goes from yellow to red:

Here is the SVG code:

Code explanation:

• The id attribute of the <linearGradient> element defines a unique name for the gradient
• The x1, x2, y1,y2 attributes of the <linearGradient> element define the x and y starting and ending points of the gradient
• The colors of a gradient are defined with two or more <stop> elements
• The stop-color attribute in <stop> defines the color of the gradient stop
• The offset attribute in <stop> defines where the gradient stop is placed
• The fill attribute of the <ellipse> element points the element to the "grad1" gradient

Horizontal Linear Gradient

An ellipse with a horizontal linear gradient that goes from yellow to green to red:

Here is the SVG code:

Vertical Linear Gradient

An ellipse with a vertical linear gradient that goes from yellow to red:

Here is the SVG code:

Horizontal Linear Gradient with Text

An ellipse with a horizontal linear gradient from yellow to red, and add a text inside the ellipse:

Here is the SVG code:

Code explanation:

• The <text> element is used to add a text

Angular Linear Gradient

An ellipse with an angular linear gradient that goes from yellow to red:

Here is the SVG code:

SVG <linearGradient> Attributes