SVG Tutorial
SVG Demo
SVG Useful Resources
Selected Reading
- SVG - Linking
- SVG - Interactivity
- SVG - Gradients
- SVG - Patterns
- SVG - Filters
- SVG - Stroke
- SVG - Text
- SVG - Shapes
- SVG - Overview
- SVG - Home
SVG Demo
- SVG - Real Time SVG AD
- SVG - Demo Game
- SVG - Lazylinepainter.js Effects
- SVG - Full Screen Overlay Effects
- SVG - Transformation Effects
- SVG - Vague.js Effects
- SVG - zPath.js Effects
- SVG - Walkway.js Effects
- SVG - Velocity.js Effects
- SVG - Raphael.js Effects
- SVG - Tab Effects
- SVG - Side Show Effects
- SVG - Scroll Effects
- SVG - Playful Effects
- SVG - Gradients Effects
- SVG - Gooey Effects
- SVG - Brand Effects
- SVG - Arrow Effects
- SVG - Text With CSS Effects
- SVG - Text Effects
- SVG - Image Filter
- SVG - Flat Surface Shade
- SVG - Graph
- SVG - amChart
- SVG - Maps
- SVG - Key point
- SVG - Drag
- SVG - Clock
- SVG - Icons
- SVG - Dialog
- SVG - Loaders
SVG Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
SVG - Gradients
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 pnear 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 <pnearGradient> element. We ve shown main attributes only.
<pnearGradient 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" xpnk:href="reference to another gradient" > </pnearGradient>
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 | xpnk: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>
<pnearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</pnearGradient>
</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 <pnearGradient> element defined as sampleGradient.
In pnearGradient, 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 earper.
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" xpnk: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 | xpnk: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 earper.
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