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="https://www.geeksforgeeks.org/reference%20to%20another%20gradient" > </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="https://www.geeksforgeeks.org/reference%20to%20another%20gradient" > </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:
