SVG Colors, Patterns & Gradients

Chapter 8. And Repeat

As we manipulated the gradient vector and the gradient transform in Chapter 7, we pointed out a few times how areas beyond the end of the gradient vector are filled in with solid color. We’ve also mentioned how this is only the default behavior.

This chapter examines the alternative: repeating gradients that continue to transition for as long as required to fill the shape. Again, there are both SVG and CSS ways of achieving this, and we’ll compare the two.

With all the features of linear gradients now introduced, the chapter concludes with some examples of one of the more common—but, unfortunately, more problematic—uses of SVG gradients: to style re-usable SVG icons within an HTML page. There are a number of web browser bugs you’ll need to avoid to get everything working as intended.

How to Spread Your Gradient

The appearance of a gradient beyond the ends of the gradient vector is set by the spreadMethod attribute on the <linearGradient> element. It controls how the gradient spreads out toward infinity.

The default value for this attribute is pad. With it, everything before the start of the vector is padded with the first stop-color, while everything beyond the end point is padded with the last stop-color. The examples we’ve seen so far have all used the padding behavior by default, but Example 8-1 does so explicitly; the x1 and x2 attributes limit the gradient to the middle 10% of the object bounding box, but the rest of the shape will be padded in blue ...