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)

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.

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.

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.