While CSS gradients are now a standard approach for most web designers, SVG gradients still hold a few advantages… and if you’re going to use SVG elements, it makes sense to understand how gradients work in that context.

Kissing Cousins

Gradients in CSS and SVG are essentially cousins, with the final CSS specification taking a great deal of inspiration from the SVG spec. The major difference is that SVG - like everything else in the language - presents the gradient as markup. This makes SVG gradients more verbose, but also potentially easier to read and understand.

In SVG, a linear gradient (a gradient that shifts from one color to the next along a line) is defined in the following way: 

<linearGradient id="testbed">
    <stop stop-color="salmon" offset="0" />
    <stop stop-color="aliceblue" offset="1" />
</linearGradient>

This gradient isn’t displayed by default; to do so, we must create an SVG document with an element that references the gradient via its id. The gradient itself is usually left in the <defs> section of the document: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 50">
  <defs>
        <linearGradient id="testbed1">
            <stop stop-color="salmon" offset="0" />
            <stop stop-color="aliceblue" offset="1" />
        </linearGradient>
  </defs>
<rect x="0" y="0" width="100" height="50" fill="url(#testbed1)" />
</svg>

The result:

A few things should be pointed out at this stage:

  1. By default the gradient proceeds left to right, although that can be changed easily; I’ll show you how in a moment.
  2. The stop elements are similar to the “stop” handles for gradients in PhotoShop and other Adobe products.
  3. The offset positions - written as values from 0 to 1 or as percentages from 0% to 100% - indicate where the specified colors radiate from.
  4. The colors used in the gradient can derive from any of the CSS color systems.
  5. The fill reference could also be written as pure CSS. The markup for the rectangle would change to: 
<rect x="0" y="0" width="100" height="33" />

And the CSS: 

rect {
    fill: url(#testbed);
}

In general, my preference would be to use the CSS method, as it’s more flexible, but the choice is yours.

Hard Stops

Gradients don’t have to appear as subtle washes from one color gradually shading into another. Place the stops close enough together, and you can create hard transitions: 

<linearGradient id="testbed2">
    <stop stop-color="red" offset="0.5" />
    <stop stop-color="blue" offset="0.5" />
</linearGradient>

Creating:

Opacity

At the other end of the scale, it’s also possible to create gradient color components with levels of opacity using the stop-opacity attribute: 

<linearGradient id="testbed3">
    <stop stop-color="yellow" offset="0" stop-opacity="0" />
    <stop stop-color="blue" offset="0.5" />
    <stop stop-color="black" offset="1" stop-opacity="0.5" />
</linearGradient>

Which creates:

Directionality

Rather than taking an angle, as CSS does, SVG gradients take points, defined as x1, y1, x2 and y2, to define the direction of a linear gradient. These points are just like the points used to define an SVG line.

A diagonal gradient will therefore be created by setting y2 to a value of 100%: 

<linearGradient id="testbed4" y2="100%">
    <stop stop-color="yellow" offset="0" />
    <stop stop-color="blue" offset="0.5" />
    <stop stop-color="black" offset="1" />
</linearGradient>

Note that this does not create a 45° gradient, as the values are relative to the dimensions of the element, not an absolute position:

Other Possibilities

It’s also possible to create repeated and reflected gradients in SVG; I will cover those in a separate article, since the same is true for radial gradients (which I will look at next).

Advantages & Conclusion

There are a few advantages to SVG gradients, mostly related to animation: while CSS gradients should be animatable, very few browsers support that feature at the moment. SVG gradients can be animated: either using SMIL (with the exception of Internet Explorer / Edge, which has never supported SMIL) or with JavaScript. Obviously, SVG gradients are also a natural match when creating SVG.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.