SVG - SPLessons

Chapter 14

SVG Gradient

SVG Gradient

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
  • Radial

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>
	<title>SVG Linear Gradient</title>
	<body>   
		<h1>SVG Linear Gradient</h1>  
		<svg width="600" height="600">      
			<defs>
				<linearGradient id="sampleGradient">
					<stop offset="0%" stop-color="#FF0000" />
					<stop offset="100%" stop-color="#00FFF00" />
				</linearGradient>
			</defs>
            <g>
				<text x="30" y="50" >Linear Gradient: </text>
				<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
				fill="url(#sampleGradient)" />
			</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>
				<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
					<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" />
				</linearGradient>
			</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.

Radial

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.

The code below demonstrates the radial gradient with the multiple colors.

<html>
	<title>SVG Radial Gradient</title>
	<body>     
		<h1>SVG Radial Gradient</h1>      
		<svg width="600" height="600">
			<defs>
				<radialGradient id="sampleGradient">
					<stop offset="0%" stop-color="#FF0000" />
					<stop offset="100%" stop-color="#00FFF00" />
				</radialGradient>
			</defs>        
			<g>
				<text x="30" y="50" >Using Radial Gradient: </text>
				<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
				fill="url(#sampleGradient)" />
			</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>
				<radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
					<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" />
				</radialGradient>
			</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.