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.
No comments:
Post a Comment