SVG - Gradients

Gradient refers to smooth transition of one color to another color within a shape. SVG provides two types of gradients.

  • Linear Gradients − Represents linear transition of one color to another from one direction to another.

  • Radial Gradients − Represents circular transition of one color to another from one direction to another.

Linear Gradients

Declaration

Following is the syntax declaration of <linearGradient> element. We've shown main attributes only.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Attributes

Sr.No. Name & Description
1 gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2 x1 − x-axis co-ordinate of the gradient vector. Defeault is 0.
3 y1 − y-axis co-ordinate of the gradient vector. Default is 0.
4 x2 − x-axis co-ordinate of the gradient vector. Defeault is 0.
5 y2 − y-axis co-ordinate of the gradient vector. Default is 0.
6 spreadMethod − indicates method of spreading the gradient within graphics element. Default is 'pad'.
7 xlink:href − used to refer to another gradient.

Example

testSVG.htm 
<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample 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" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

  • One <linearGradient> element defined as sampleGradient.

  • In linearGradient, two offsets are defined with two colors.

  • in rect element, in fill attribute, url of the gradient is specified to fill the rectangle with gradient created earlier.

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.

Radial Gradients

Declaration

Following is the syntax declaration of <radialGradient> element. We've shown main attributes only.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Attributes

Sr.No. Name & Description
1 gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2 cx − x-axis co-ordinate of the center of largest circle of gradient vector. Defeault is 0.
3 cy − y-axis co-ordinate of the center of largest circle of gradient vector. Default is 0.
4 r − radius of the center of largest circle of gradient vector. Defeault is 0.
5 fx − focal point of radial gradient. Default is 0.
6 fy − focal point of radial gradient. Default is 0.
7 spreadMethod − indicates method of spreading the gradient within graphics element. Default is 'pad'.
8 xlink:href − used to refer to another gradient.

Example

testSVG.htm 
<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample 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>

  • One <radialGradient> element defined as sampleGradient.

  • In radialGradient, two offsets are defined with two colors.

  • in rect element, in fill attribute, url of the gradient is specified to fill the rectangle with gradient created earlier.

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.

Advertisements