SVG Gradient is used to smooth transition one color to another color within a shape. SVG provides two types of gradients.
- Linear Gradients: Transition from one direction to another.
- Radial Gradients: Transition circularly from one color to another from one direction to another.
Linear Gradients: The linear-gradient() CSS function is used to create an image which consist a progressive transition between two or more colors along a straight line.
Syntax:
<linearGradient
gradientUnits =”units to define 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>
Attribute:
- gradientUnits: Units to define the coordinate system for the various length values within the gradient.
- x1: x-axis co-ordinate of the gradient vector.
- y1: y-axis co-ordinate of the gradient vector.
- x2: x-axis co-ordinate of the gradient vector.
- y2: y-axis co-ordinate of the gradient vector.
- spreadMethod: Indicates method of spreading the gradient within graphics element. Default is ‘pad’.
- xlink:href: Used to refer to another gradient.
Example:
<!DOCTYPE html> <html>
<body>
<svg width="400" height="400">
<defs>
<linearGradient id="GFGGradient">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<g>
<rect x="100" y="100" width="200" height="200" stroke="black" stroke-width="3" fill="url(#GFGGradient)" />
</g>
</svg>
</body>
</html>
|
Output:
Radial Gradients: The radial-gradient() CSS function is used to create an image which consist of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse.
Syntax:
<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>
Attribute:
- gradientUnits: Units to define the coordinate system for the various length values within the gradient.
- cx: x-axis co-ordinate of the center
- cy: y-axis co-ordinate of the center
- r: Radius of the center.
- fx: Focal point of radial gradient.
- fy: focal point of radial gradient.
- spreadMethod: Indicates method of spreading the gradient within graphics element. Default is ‘pad’.
- xlink:href: Used to refer to another gradient.
Example:
<!DOCTYPE html> <html>
<body>
<svg width="400" height="400">
<defs>
<radialGradient id="GFGGradient">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="green" />
</radialGradient>
</defs>
<g>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" fill="url(#GFGGradient)" />
</g>
</svg>
</body>
</html>
|
Output: