#### Chapter 14

This chapter demonstrates about the SVG Gradient which is referred as transition of one color in addition to multiple colors are applied to the same element, following are the concepts covered in this chapter.

• Linear

## Linear

Linear Gradient is defined by the <linearGradient> element which is used with in the <defs> tags only which contains definitions of the special elements like gradients. Linear Gradients are defined by vertical gradients, horigental gradients and angular gradients.

The code below demonstrates the Linear gradients which consist of one color is addition with another color is as shown below.

<html>
<body>
<svg width="600" height="600">
<defs>
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</defs>
<g>
<text x="30" y="50" >Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
</g>
</svg>
</body>
</html>


Result
By running the above code in a preferred browser then user will get the output as shown below.

The code below demonstrates the Linear gradients which consist of one color in addition with another color as shown below.

<!DOCTYPE html>
<html>
<h1>SPLessons</h1>
<body>
<svg height="300" width="700">
<defs>
<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
</body>
</html>


Result
By running the above code in a preferred browser then user will get the output as shown below.

SVG Radial gradient is defined by the <radialGradient> element which inserted with in the <defs> tags only which contains definitions of the special elements like gradient. In the radial gradient two offsets are defined with the two colors. Following are the attributes of the radial gradient.

<html>
<body>
<svg width="600" height="600">
<defs>
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</defs>
<g>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
</g>
</svg>
</body>
</html>


Result
By running the above code in a preferred browser then user will get the output as shown below.

The code below demonstrates the radial SVG Gradient with the multiple colors.

<!DOCTYPE html>
<html>
<h1>SPLessons</h1>
<body>
<svg height="150" width="500">
<defs>
<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,150,255);stop-opacity:1" />
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>


Result
By running the above code in a preferred browser then user will get the output as shown below.

## Summary

• SVG Gradient are used insert multi colors in many forms.
• Two offset gradients defined with two colors.
• URL of the SVG Gradient is used to fill the colors.