Post
Ask Question

SVG Gradients in HTML5

Introduction

 
In this article, we will discuss the SVG Gradients in HTML5. Gradients are a way of filling shapes with color, in an uneven fashion and they consist of continuously smooth color transitions along a vector from one color to another and we can apply several color transitions to the element.
 
There are basically two types of SVG Gradients in HTML5:
  • Linear Gradients.
  • Radial Gradients.
We will talk about both of these gradients in the following sections.
 

SVG Linear Gradient

 
The <linearGradient> element is used to define a linear gradient. Linear gradients change evenly from one color to another, in a linear fashion. The <linearGradient> element must be nested within a <defs> tag. The color can change either vertically, horizontally, or along a vector you define.
 
Example - 1
 
Fill a rectangle with a Horizontally Linear Gradient:
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5. <svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"  
  6.      xmlns="http://www.w3.org/2000/svg">  
  7.     <defs>  
  8.       <linearGradient id="LinerGradient">  
  9.         <stop offset="10%" stop-color="#F60" stop-opacity="0.9" />  
  10.         <stop offset="35%" stop-color="#FF6" />  
  11.         <stop offset="70%" stop-color="#cc0000" stop-opacity="1"/>  
  12.         <stop offset="90%" stop-color="#000099" stop-opacity="0.7"/>  
  13.       </linearGradient>  
  14.     </defs>  
  15.     <rect stroke="black" stroke-width="5" x="10" y="10" width="800" height="500" fill="url(#LinearGradient)" />  
  16. </svg>  
  17. </body>  
  18. </html> 
Output:
image 1.jpg
 
Example - 2 Filling an ellipse with a Vertically Linear Gradient:
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
  6.   <defs>  
  7.     <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">  
  8.       <stop offset="10%" style="stop-color:#ff0000;stop-opacity:1" />  
  9.       <stop offset="40%" style="stop-color:#ffff00;stop-opacity:1" />  
  10.       <stop offset="60%" style="stop-color:#009632;stop-opacity:1" />  
  11.       <stop offset="90%" style="stop-color:#00ffff;stop-opacity:1" />  
  12.     </linearGradient>  
  13.   </defs>  
  14.   <ellipse cx="200" cy="70" rx="100" ry="65" fill="url(#grad2)" />  
  15. </svg>  
  16. </body>  
  17. </html> 
Output:
image 2.jpg
 

SVG Radial Gradient 

 
Radial gradients are gradients in which the colors change circularly rather than linearly. The <radialGradient> element is used to define a radial gradient. The <radialGradient>  element must be nested within a <defs> tag.
 
Example - 1 Rectangle With Radial Gradient: 
  1. <html>  
  2. <head>  
  3. </head>  
  4. </body>  
  5. <svg width="10cm" height="10cm" viewBox="0 0 800 400" version="1.1"  
  6.      xmlns="http://www.w3.org/2000/svg">  
  7.     <defs>  
  8.       <radialGradient id="MG" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="250" fx="400" fy="500">  
  9.         <stop offset="15%" stop-color="orange" />  
  10.         <stop offset="40%" stop-color="blue" />  
  11.         <stop offset="70%" stop-color="pink" />  
  12.         <stop offset="90%" stop-color="green" />  
  13.       </radialGradient>  
  14.     </defs>  
  15.     <rect fill="url(#MG)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="400"/>  
  16. </svg>  
  17. </body>  
  18. </html> 
Output:
image 3.jpg
 
Example - 2 Ellipse with a radial gradient:
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
  6.   <defs>  
  7.     <radialGradient id="RadialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">  
  8.      <stop offset="25%" style="stop-color:#19ff00;stop-opacity:0.6" />  
  9.       <stop offset="55%" style="stop-color:#b400ff;stop-opacity:1.9" />  
  10.        <stop offset="90%" style="stop-color:#00b4ff;stop-opacity:1" />  
  11.     </radialGradient>  
  12.   </defs>  
  13.   <ellipse cx="200" cy="80" rx="100" ry="70" fill="url(#RadialGradient)" />  
  14. <text fill="#ffffff" font-size="30" font-family="Monotype Corsiva" x="157" y="86">  
  15.   Gaurav</text>  
  16. </svg>  
  17. </body>  
  18. </html> 
Output:
image 4.jpg
 


Similar Articles