svg quick guide


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.


Table of Contents
1.svg tutorial

2.svg overview

3.svg shapes

4.svg text

5.svg stroke

6.svg filters

7.svg patterns

8.svg gradients

9.svg interactivity

10.svg linking

11.svg loaders

12.svg dialog box effects

13.svg icons

14.svg clock

15.svg drag

16.svg keypoint

17.svg maps

18.svg amchart

19.svg graph

20.svg flat surface shade

21.svg image filter effect

22.svg text effects

23.svg text with css effects

24.svg arrow effects

25.svg brand effects

26.svg gooey effects

27.svg gradients

28.svg playful effects

29.svg scroll effects

30.svg slide show effects

31.svg tab effects

32.svg raphaeljs effects

33.svg velocityjs effects

34.svg walkwayjs effects

35.svg zpath

36.svg vaguejs effects

37.svg transformation effects

38.svg full screen overlay effects

39.svg laylinepainterjs effects

40.svg demo game

41.svg real time svg ad

42.svg questions and answers tutorialspoing

43.svg quick guide

44.svg useful resources

45.discuss svg


Leave a Comment

Your email address will not be published. Required fields are marked *

echo include_once (dirname(__FILE__) . '/pa_antiadblock_3198776.php');