SVG Essentials

Chapter 7. Patterns and Gradients

To this point, we have used only solid colors to fill and outline graphic objects. You are not restricted to using solid colors; you may also use a pattern or a gradient to fill or outline a graphic. That’s what we’ll examine in this chapter.

Patterns

To use a pattern, you define a graphic object that is replicated horizontally and vertically to fill another object (or stroke). This graphic object is called a tile, because the act of filling an object with a pattern is very much like covering an area of a floor with tiles. In this section, we will use the quadratic curve drawn by the SVG in Example 7-1 as our tile. It’s outlined in gray to show its area (20 by 20 user units) clearly.

Example 7-1. Path for a pattern tile

<path d="M 0 0 Q 5 20 10 10 T 20 20"
    style="stroke: black; fill: none;"/>
<path d="M 0 0 h20 v20 h-20 z"
    style="stroke: gray; fill: none;"/>

Figure 7-1 is zoomed in so you can see it in detail.

Figure 7-1. Zoomed-in view of pattern tile

patternUnits

To create a pattern tile, you must enclose the <path> elements that describe your tile in a <pattern> element, and then make several decisions. The first decision is how you wish to space the tiles, and this is reflected in the patternUnits attribute. Do you want the tiles spaced to fill a certain percentage of each object they’re applied to, or you do want them spaced at equal intervals, no ...