Chapter 4: SVG pattern, Grid Patterns, and clipPath

---

Defining an SVG pattern Element

The SVG document in Listing 4.1 demonstrates how to use the SVG pattern element in order to define a 2x2 grid of rectangles whose color alternates between red and blue. When this pattern is referenced in the fill attribute of an SVG element, the graphics element defined therein is repeated in a grid-like pattern.

Listing 4.1 patternDef1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="800" height="500">   <defs>   <pattern             width="80" height="80"            patternUnits="userSpaceOnUse">      <rect fill="red"            x="0"  y="0"  width="40" height="40"/>      <rect fill="blue"            x="40" y="0"  width="40" height="40"/>      <rect fill="blue"            x="0"  y="40" width="40" height="40"/>      <rect fill="red"            x="40" y="40" width="40" height="40"/>   </pattern>   </defs> </svg>

Remarks

The SVG defs element in Listing 4.1 contains an SVG pattern element that has an id attribute with the value checkerPattern. This pattern consists of an outer square whose length is 80 pixels. The inside of the pattern consists of a 2x2 grid of squares (each with side length of 40 pixels) whose colors form a checkerboard pattern.

You use the id value in order to reference this pattern definition when rendering other SVG components. Note that if you double-click on this file, you will not see anything in your browser; it is simply the definition of a pattern. The next example shows you how to specify this pattern definition and reference it while rendering a set of rectangles.

---