A gradient is a smooth transition from one color to another color. In addition to that, several color transitions can be applied to the same element.

There are mainly two types of gradients in SVG:

• Linear Gradients
• Radial Gradients

The <linearGradient> tag is used to define SVG linear gradients.

The <linearGradient> tag must be nested within <defs> tag. The <defs> tag is short for definition and it allows definition of special elements such as gradients.

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

• Vertical gradients are created when x1 and x2 are equal and y1 and y2 are differed.

• Horizontal gradients are created when y1 and y2 are equal and x1 and x2 are differed.

• Angular gradients are created when x1 and x2 differ and y1 and y2 are differed.

Copy the following code into Notepad and save the file as "linear.svg". Place the file in your Web directory only:

• The id attribute of the <linearGradient> tag defines a unique name for the gradients

• The fill:url(#orange_red) property links the ellipse element to the gradients

• The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradients

• The color range for a gradient can be composed of two or more color. Each color is specified with <stop> tag. The offset attribute is used to define where the gradient color begin and the end