Jenkov.com
Tutorials Books About
Svg

1 SVG Tutorial
2 SVG Examples
3 A Simple SVG Example
4 Displaying SVG in Web Browsers
5 SVG Coordinate System
6 SVG svg element
7 SVG g element
8 SVG rect element
9 SVG circle element
10 SVG ellipse element
11 SVG line element
12 SVG polyline element
13 SVG polygon element
14 SVG path element
15 SVG marker element
16 SVG text element
17 SVG tspan element
18 SVG tref element
19 SVG textpath element
20 SVG switch element
21 SVG image element
22 SVG a element
23 SVG defs Elements
24 SVG symbol Element
25 SVG use Element
26 SVG and CSS - Cascading Style Sheets
27 SVG Stroke
28 SVG Fill
29 SVG Viewport and View Box
30 SVG Animation
31 SVG Scripting
32 SVG Transformation
33 SVG Gradients
34 SVG Fill Patterns
35 SVG Clip Path
36 SVG Masks
37 SVG Filters




SVG Gradients


SVG gradients are a way of filling shapes with color, in an uneven fashion. That way the fill or stroke of a shape can change from one color to another. This can look really nice for some types of graphics.

Gradient Example

Here is how applying gradients to a shape fill and stroke could look:

The first rectangle has the same stroke color all the way through, but a gradient fill color (light to darker green).
The second rectangle has a gradient applied to both its stroke and fill color.
The third rectangle has a gradient applied to the stroke, but has no fill.
The fourth rectangle has a gradient applied to the fill, but has no stroke.

There are two types of gradients:

  1. Linear Gradients
  2. Radial Gradients

Both of these are covered in the following sections.

Linear Gradients

Linear gradients changes evenly from one color to another in a linear fashion. You already saw some simple examples of linear gradients in the beginning of this text.

The color can change either vertically, horizontally, or along a vector you define. You can also just fill part of a shape with a gradient instead of the whole shape. Here are a few visual examples before we continue onto the explanation:

The first rectangle uses a vertical gradient. The second rectangle uses a horizontal gradient. The third rectangle uses a diagonal gradient (gets darker towards lower right corner). The fourth rectangle only fills the right half of the rectangle with gradient. All this is possible using SVG's linear gradients.

Linear gradients are defined using the <linearGradient> element. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="75" height="100" rx="10" ry="10"
     style="fill:url(#myLinearGradient1);
            stroke: #005000;
            stroke-width: 3;" />

</svg>

As you can see the <linearGradient>-element is nested inside a <defs>-element. Gradient definitions must always be nested inside a <defs>-element, so you can reference them later in the SVG image. In this example the linear gradient is referenced by the <rect>-element inside its style attribute, in the fill CSS property (fill:url(#myLinearGradient1))

The <linearGradient>-element has two nested <stop>-elements. The <linearGradient>-element controls the direction of the gradient and what happens before and after the gradient is applied (the spreadMethod attribute). The <stop>-elements control the colors used in the gradient, how far into the shape the colors start and stop, plus the opacity of the gradient.

Here is a list of the attributes of the <linearGradient>-element:

Attribute Description
id A unique ID used to reference this gradient definition from shapes.
x1, y1 The x1 and y1 (starting point) of the vector defining the direction of the gradient. Specified as percentages (%) of x1,y1 and x2,y2 of the shape the gradient is applied to. (Note: You should be able to use absolute numbers, but this doesn't seem to work in the browsers).
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, repeat, and reflect. '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. The spread method is only relevant if the gradient does not fill out the shape completely (see offset attributes of the <stop> elements).
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.

Here is a list of the <stop> element attributes:

Attribute Description
offset How far into the shape this color starts (if the first color of the gradient) or stops (if the last color of the gradient). Specified as percentages of the shape (really the gradient vector) the gradient is applied to. For instance, 10% means that the color should start / stop 10% into the shape.
stop-color The color of this stop-point. The color the gradient changes from / to.
stop-opacity The opacity of the color of this stop-point. If opacity changes from one stop-point with 1 to another stop-point with opacity 0, then the color will gradually become more and more transparent.

Reading all of these attribute descriptions can be very confusing. Therefore I have created an image that illustrates the meaning of these attributes:


And here is the linear gradient definition matching the image:

    <svg xmlns="http://www.w3.org/2000/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="10%" stop-color="#00cc00" stop-opacity="1"/>
        <stop offset="30%" stop-color="#006600" stop-opacity="1"/>

        <stop offset="70%" stop-color="#cc0000" stop-opacity="1"/>
        <stop offset="90%" stop-color="#000099" stop-opacity="1"/>

      </linearGradient>

    </defs>

    <rect x="10" y="10" width="500" height="50" rx="10" ry="10"
       style="fill:url(#myLinearGradient1); stroke: #005000;
              stroke-width: 3;" />

    </svg>

The first stop color is #00cc00 which is to begin 10% into the rectangle. Because the spreadMethod is set to "pad", the first color is also filled into the rectangle before the first stop color (0-10%).

From the first stop color at 10% the color changes towards the second stop color, #006600, which is reached 30% into the rectangle.

From the second stop color at 30% the color changes to the third stop color, #cc0000 (red), which is reached 70% into the rectangle.

From the third stop color at 70% the color changes towards the fourth and final stop color, #000099 (blue), which is reached at 90%. From 90% and the rest of the rectangle the last stop color (#000099) is filled into the rectangle, because the spreadMethod attribute of the <linearGradient> element is set to "pad".

Radial Gradients

Radial gradients are gradients in which the colors change circularly rather than linearly. Here is an example image:

As you can see the colors now change in a circular fashion. The three last (green) rectangles only vary in the center of the radiation of the lightest green color. The first green rectangle has the colors spread out from the center of the rectangle. The second rectangle uses the top mid of the rectangle. The third rectangle uses the top left corner as center.

Radial gradients are defined using the <radialGradient> element. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <radialGradient id="myRadialGradient4"
           fx="5%" fy="5%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
          <stop offset="100%" stop-color="#006600" stop-opacity="1" />
        </radialGradient>
    </defs>

    <rect x="340" y="10" width="100" height="100" rx="10" ry="10"
           style="fill:url(#myRadialGradient4);
                  stroke: #005000; stroke-width: 3;" />
</svg>
    

This SVG code actually defines the 4th rectangle shown in the example above. Notice how the colors are defined using <stop> elements just like for linear gradients (see linear gradients for an explanation).

Here is a list of the attributes of the <radialGradient> element:

Attribute Description
id A unique ID used to reference this gradient definition from shapes.
cx, cy The x and y of the center of the radial gradient. Specified as percentages of width and height of shape to fill. Both defaults to 50% if omitted.
fx, fy The x and y of the focal point of the radial gradient. Specified as percentages of width and height of shape to fill. Both defaults to 50% if omitted.
NOTE: Firefox 3.0.5 seems to have problems with values below 5%.
r The radius of the gradient.
spreadMethod This value defines how the gradient is spread out through the shape. There are 3 possible values: pad, repeat, and reflect. '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. The spread method is only relevant if the gradient does not fill out the shape completely (see offset attributes of the <stop> elements).
gradientTransform You can transform (e.g. rotate) the gradient before it is applied. See SVG Transformation for more details about transformations in general.
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. You can often omit this attribute.
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.

The center of a radial gradient is the center of the circular color spread. If you picture your radial gradient as being a circle, cx and cy marks the center of this circle.

The focal point of a radial gradient is the "angle" of the color radiation. If you think of the radial gradient as a lamp, the focal point decides what angle the light from the lamp hits the shape with. 50%, 50% means directly from above. 5%, 5% means from the top left corner and down. The gradient then looks a bit like a light source hitting your shape.

You will most likely have to play around with the center and focal point of your gradients before you get them right. I know I did that, just to create these simple samples.

Transforming Gradients

You can transform a gradient using the standard SVG Transformation functions. You do so using the gradientTransform attribute in either the <linearGradient> and <radialGradient> . Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad"
                    gradientTransform="rotate(45)"
    >
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="75" height="100" rx="10" ry="10"
     style="fill:url(#myLinearGradient1);
            stroke: #005000;
            stroke-width: 3;" />

</svg>    

This example defines a linear gradient with a gradientTransform() attribute, which rotates the gradient 45 degrees. Normally the gradient would have graded the color from top to bottom, but with the rotation it now goes from the upper right corner to the lower left corner.

Here is the resulting image:



Connect with me: Newsletter - Get all my free tips!