APEX@IGP
Lesson 24
Gradients Linear and Radial
Objective: Learn to create and use <linearGradient> and radialGradient.
Gradients are used to fill a shape using colors that change by chroma or shade in various patterns. Gradients are very useful in a number of illustration contexts and you should not be afraid to use them as browsers hardware accelerate their rendering and their is little processing overhead.
Linear Gradients
Linear gradients change colours as a percentage of a straight line. There can be any number of colours and the line can go in any direction. The line has an x1, y1 start position and a x2, y2 end position.
Attributes
id You must give every gradient a unique ID so it can be referenced by other elements in the SVG.
x1, y1 The x1 and y1 vector starting point defining the direction of the gradient. Specified as percentages (%) of the distance between x1,y1 and x2,y2 of the shape to which the gradient is applied.
x2, y2 The x2 and y2 end point of the vector defining the direction of the gradient.
spreadMethod This value defines how the gradient is spread out through the shape. There are 3 possible values:
pad: means that the first/last color of the gradient is padded (spread out) before and after the gradient
repeat: means that the gradient is repeated throughout the shape.
reflect: means that gradient is mirrored in the shape.
gradientTransform You can transform (e.g. rotate) the gradient before it is applied. See SVG Transformation for more details.
gradientUnits Sets whether you want to use the viewbox ('userSpaceOnUse') or the the shape the gradient is applied to, for the calculation of x1, y1 and x2,y2.
xlink:href An id of another gradient from which this gradient should 'inherit' its attributes. In other words, for any attribute the attribute value of the referenced gradient will be the default value of this gradient, if no attribute value is set in this gradient.
Linear Gradient Elements
Linear Gradients contain one element with attributes. It defines the colour and distance a color is applied.
<stop offset="0%" stop-color="blue" stop-opacity="1">
<stop> stop has the following attributes:
offset="0%" offset defines the percentage across the shape the gradient .
stop-color="blue" states the gradient colour at the offset point.
stop-opacity="1" a value from 0-1 defining the opacity of a stop. If stop-opacity is not used it defaults to 1.
You can use as many stop elements as you like but the the offset must always increase from 0% to 100%.
OK. That's a lot of attributes and it is best to dive right in and see how they look in SVG. Gradients are defined in <defs> (of course)
<svg xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="0%" stop-color="red" stop-opacity="1"/> <stop offset="50%" stop-color="yellow" stop-opacity="1"/> <stop offset="100%" stop-color="magenta" stop-opacity="1"/> </linearGradient> </defs> <rect x="10" y="10" width="180" height="180" fill="url(#myLinearGradient1)" stroke="#005000" stroke-width="10" /> <rect x="210" y="10" width="180" height="180" fill="white" stroke="url(#myLinearGradient1)" stroke-width="10" />
We have used some "strong" colors here to make the gradient transitions stand out. We are sure you will have better taste when executing your artwork! The minimum requirement is two stops: 0% and 100%.
You can give a <stop> an ID or class and define the colors from CSS.
G1 shows a gradient can be applied to fill.
G2 shows a gradient applied to a stroke. These could of course be different gradients.
G3 Shows the gradient points starting at the top left and ending bottom right rather than horizontal or vertical. Eg: x1="0%" x2="100%" y1="0%" y2="100%"
G4 shows opacity set at 0.0 in the last stop. Eg: <stop offset="100%" stop-opacity="0.0"></stop>
Radial Gradients
Radial gradients are gradients that are based on a circle. The gradient colors change as a percentage of the radius of the circle. The gradient starts in the middle of the circle and moves to the outer circumference of the defined circle.
Radial Gradient Attributes
id You must give every gradient a unique ID so it can be referenced by other elements in the SVG.
cx, cy These define the center of the radial gradient. These are set as a percentage of the width and height of shape to fill. You can leave them out and the default is 50%, 50%. You can also use 0-1. Eg: 0.5, 0.5.
fx, fy These define the focal point of the radial gradient. That means the angle point from where the source light is coming from. Again these are set as percentages of the width and height of the target shape(s). The default is 50%, 50% or 0.5, 0.5.
r The gradient radius.
spreadMethod This value defines how the gradient is spread out through the shape. There are 3 possible values:
pad: means that the first/last color of the gradient is padded (spread out) before and after the gradient
repeat: means that the gradient is repeated throughout the shape.
reflect: means that gradient is mirrored in the shape.
gradientTransform You can transform (e.g. rotate) the gradient before it is applied.
gradientUnits Sets whether you want to use the viewbox ('userSpaceOnUse') or the the shape the gradient is applied to, for the calculation of cx, cy and fx, fy. By default it uses the target shape.
xlink:href An id of another gradient from which this gradient can 'inherit' its attributes.
Radial Gradient Elements.
This is identical to linearGradient. There is one element <stop>. The attributes for a radialGradient are the same as a linearGradient.
<stop offset="0%" stop-color="blue" stop-opacity="1">
<stop> stop has the following attributes:
offset="0%" offset defines the percentage across the shape the gradient .
stop-color="blue" states the gradient colour at the offset point.
stop-opacity="1" a value from 0-1 defining the opacity of a stop. If stop-opacity is not used it defaults to 1.
You can use as many stop elements as you like but the the offset must always increase from 0% to 100%.
OK. That's a lot of attributes and it is best to dive right in and see how they look in SVG. Gradients are defined in <defs> (of course)
Radial Gradient Basics
G1
This shows three colours evenly spread in a circle. The code is as simple as it can be using all the defaults. There is only the ID and three <stop> settings defined. The center of the gradient is in the center of the shape and the focus point is aligned with the center.
<!-- GRADIENT 1-->
<radialGradient id="RGradient1">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="green"></stop>
</radialGradient>
G2
Here the cx and cy attributes have been added. You can see the center of the radial gradient is moved up and to the left at 30% left and 30% down from the rectangle containing the shape.
<!-- GRADIENT 2-->
<radialGradient id="RGradient2" cx="0.3" cy="0.3">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="green"></stop>
</radialGradient>
G3
Here the fx and fy attributes have been added. (cy and cy in the center by default) You can see their effect. The focal point moves the center inside the radial gradient.
<!-- GRADIENT 3--> <radialGradient id="RGradient3" fx="0.3" fy="0.3"> <stop offset="0%" stop-color="red"></stop> <stop offset="50%" stop-color="yellow"></stop> <stop offset="100%" stop-color="green"></stop> </radialGradient>
G4
Here center AND focal point attributes have been applied. You can get some pretty dramatic effects with large differences. This example moves the center of the gradient to the bottom left, then puts the focus to the top right. NOTE: This appears to be too dramatic for Google Chrome so use it with care and test.
<!-- GRADIENT 4-->
<radialGradient id="RGradient4"
cx="0.25" cy="0.8"
fx="0.9" fy="0.1">
<stop offset="0%" stop-color="red"></stop>
<stop offset="70%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="green"></stop>
</radialGradient>
Working with Radius and spreadMethod
You can modify both linear and radial gradients with spreadMethod. In these examples the repeat and a radius of 10% and the reflect value has a radius of 25%. Look at the code in the box and explore.
Some gradient art
Here we have made a nice metal bar using a linear gradient on a rectangle and radial gradient on an ellipse at the top. A clip-path has been applied to give the ellipse shape at the bottom.
Next to it is a nice steel ball bearing with a sparkling highlight and below that a glowing gold orb thing using two circles and gradients. Click on the box to look at the SVG.
24.6 Exercises
Use the samples above to experiment with <linearGradient> and <radialGradient> elements and attribute values until you are comfortable with creating gradients for any specific illustration.
SVG Cheatsheets and Resources
Here are our standard SVG Cheatsheets you can download, print out and have ready when needed. There is also a text file containing annotated quickstarts for all major shapes and techniques.
SVG Editor. Access a full SVG Editor online at any time.