SVG Colors, Patterns & Gradients

Chapter 10. Tiles and Textures

While introducing paint servers in Chapter 5, we mentioned that there were a number of different sources you might wish to use to paint a shape: a single color, one or more gradients, repeating patterns, bitmap graphics, text, even other SVG files. So far, we have described how to use a solid color or a single gradient. All the remaining possibilites will use a single paint server element: <pattern>.

An SVG pattern defines a block of SVG graphics that will be used as a paint server for other shapes. Any SVG content can be used, including images, text, and shapes filled with gradients. A pattern is repeated in a rectangular (or transformed rectangular) tiled layout. You can, however, make one tile the full size of the shape to create a non-repeating fill; that opens so many possibilities it will be discussed separately, in Chapter 11.

There are a number of options for sizing both the tiles and the pattern content. This make many different designs possible—but others remain difficult. This chapter tries to emphasize both what can and what can’t be done, and offers some workaround suggestions for the more frustrating situations. We also compare SVG patterns with a type of repeating pattern most web designers are familiar with: repeating CSS background images.

Building a Building Block

In many ways, the <pattern> element is similar to the gradient elements introduced in previous chapters. The attributes on the element itself define the shape and size ...