apike.ca

SVG Gradients

By mbystedt on Feb 27, 2014, 6:56:59 PM

All gradients and patterns in SVG are first defined within a <defs> (Definitions) tag and referenced using URIs. All attributes needing a color can use a gradient. See: defs tag

<defs>
    <linearGradient x1="10%" x2="90%" id="myFillGrad" >
        <stop offset="5%" stop-color="red" />
        <stop offset="95%" stop-color="blue" stop-opacity="0.5" />
    </linearGradient>
</defs>
...
<rect x="0" y="0" width="100%" height="100%" fill="url(#myFillGrad)"/>	
A rectangle filled with a linear gradient.

For simple colors, please look at the color page.

Gradient Stops

Gradients are a smooth transition from one state to another. The end points of these sections are called stops. In SVG stops are placed between 0 and 1 and are later scaled to fit into the area chosen for the gradient. These stops have color, opacity and an offset attributes.

Example 1. See Code 1 for the stops used for this gradient. (Download)
    <stop offset="5%" stop-color="red" />
    <stop offset="95%" stop-color="blue" stop-opacity="0.5" />
Code 1. The stops for a gradient.
<stop>
Attribute
Explanation
offset
The offset for this stop from 0 to 1 or 0% to 100%. Values outside this range can be used. Required
stop-color
The color of this stop. See colors. 'currentColor' can be used as well. (default black)
stop-opacity
The opacity of this stop. A number from 0 to 1. (default 1)

Great! We can make stops and create a nice looking gradient but how can we turn it into something we can use? We need to describe how we want the gradient to fill into objects. In SVG these stops are placed inside a 'linearGradient' or 'radialGradient' element to define how the gradient fills the object it is placed in.

Linear Gradients

Linear gradients fill the object by using a vector. The vector becomes the line on which the gradient's stops transitions between. The vector's first point is the start (0% or 0) and the second point is the end (100% or 1). All points at right angles to points on the line are the same color. The vector point's position can written using percentages or using distances.

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%">
    <stop offset="5%" stop-color="red" />
    <stop offset="95%" stop-color="blue" stop-opacity="0.5" />
</linearGradient>
Code 1. Linear Gradient.
<linearGradient>
Attribute
Explanation
Example
id
The unique id required to reference this gradient.
gradientUnits
'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox')
gradientTransform
The transformation to apply to the gradient. See transformations.
x1
The 'x' start point of the gradient vector. A number or percentage. (0% default)
y1
The 'y' start point of the gradient vector. (0% default)
x2
The 'x' end point of the gradient vector. (100% default)
y2
The 'y' end point of the gradient vector. (0% default)
spreadMethod
'pad' or 'reflect' or 'repeat'
xlink:href
Reference to another gradient (linear or radial) whose attribute values are used as defaults and stops included. Recursive.
Linear Gradient Attributes

What are 'pad', 'reflect' and 'repeat'? The attribute name, spreadMethod, doesn't help much. Pictures are worth a thousand words. The lines are at 0% and 100% of the stops. The x points of the gradient vector is now 10% and 50%. This makes the beginning and end values for the gradient stops at a tenth and a half of the way across the object.

Example 2. From top to bottom: 'pad', 'reflect' and 'repeat'. Note: Many SVG viewers don't implement all these options. (Download)

Radial Gradients

Radial gradients are created by taking a circle and smoothly changing values between gradient stops from the focus point (which does not have to be at the center) to the outside radius.

<radialGradient id="myRadGrad" cx="80%" r="10%" spreadMethod="reflect">
    <stop offset="5%" stop-color="red"/>
    <stop offset="95%" stop-color="blue" stop-opacity="0.5"/>
</radialGradient>
Code 2. Radial Gradient.
<radialGradient>
Attribute
Explanation
Example
id
The unique id required to reference this gradient.
gradientUnits
'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox')
gradientTransform
The transformation to apply to the gradient. See transformations.
cx
The center point of the gradient. A number or percentage. (50% default)
cy
The center point of the gradient. (50% default)
r
The radius of the gradient. (50% default)
fx
The focus point of the gradient. (0% default)
fy
The focus point of the gradient. (0% default)
spreadMethod
'pad' or 'reflect' or 'repeat'
xlink:href
Reference to another gradient (linear or radial) whose attribute values are used as defaults and stops included. Recursive.
Radial Gradient Attributes. Example will update the center point (cx, cy) with your mouse position.

The focus point (fx, fy) is the location where the gradient value is at 0% or 0. By offsetting the focus point then the parts closer to the radius where the gradient value is 100% or 1 will compress and the opposite side will expand.

Example 3. Animated offset radial gradient. Place mouse over rectangle. (fx:80% to 20% to 80%) (Download)
Related Topics