SVG Gradient - Linear

SVG Gradient

The gradient is a smooth transition from one to another color to color. In addition, the transition can be applied to a plurality of colors on the same element.

There are two main types of SVG Gradient:

• Linear
• Radial

SVG linear gradients - <linearGradient>

<LinearGradient> element is used to define a linear gradient.

<LinearGradient> tag must be nested inside <defs> interior. <Defs> tag is the acronym definitions, such as special elements that can be defined like gradient.

Linear gradient can be defined as horizontal, vertical or angle gradient:

• When y1 and y2 are equal, but not both x1 and x2, create a horizontal gradient
• When x1 and x2 equal, y1 and y2 are not the same, you can create a vertical gradient
• When x1 and x2 are different and y1 and y2 are not the same, you can create a gradient angle

Example 1

It defines the horizontal linear gradient from yellow to red oval:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• id attribute <linearGradient> tag can be a unique name for the gradient definition
• <LinearGradient> tag X1, X2, Y1, Y2 attribute defines the beginning and end of the gradient
• Gradient color range by two or more colors. Each color by a <stop> tag to specify. offset is used to define the start and end position of the gradient.
• Fill property element to link to the gradient of the ellipse

Example 2

Define a vertical linear gradient from yellow to red oval:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Example 3

The definition of an ellipse, the horizontal linear gradient from yellow to red within the text and add an ellipse:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• <Text> element is used to add a text