SVG Colors, Patterns & Gradients

Chapter 6. Simple Gradients

Vector graphics are often thought of as “line drawings,” with sharp edges and consistent blocks of color. That clean, minimalist style can often be just what your design needs. But a complete graphics language should also have the option to create soft edges and color transitions. Gradients are the simplest way to create these effects in SVG.

Gradients consist of smooth transitions from one color or opacity state to another. SVG currently supports two types of gradients: linear gradients, where each color in the transition is stretched out along parallel lines, and radial gradients, where each color makes a circular shape.

This chapter introduces the basic structure of the SVG gradient elements, and the different color transitions they can create. The SVG syntax will be contrasted with the CSS syntax to create similar effects. For now, the examples will use the default orientation and scale of each gradient, and will use them to fill simple rectangles. The following chapters will explore the full flexibility of SVG gradients.

Gradiated Gradients

The single-color gradients from Example 5-1 demonstrated the bare-minimum markup for a gradient. However, they didn’t use any of the features that create a gradiated result. For that, we’ll need at least two color stops so that a color transition can be displayed.

The basic structure of a two-color linear gradient is as follows:

<linearGradient id="red-blue">
    <stop stop-color="red" offset="0"/>
    <stop stop-color= ...