Using an SVG pattern Element

---

Generating a Checkerboard Grid

Consider the checkerboard pattern rendered in Figure 4.2.

Figure 4.2: A checkerboard pattern.

The SVG document in Listing 4.3 demonstrates how to define and then reference an SVG pattern element in order to render a checkerboard pattern. Note that the bulk of the code is mainly for defining the 2x2 checkerboard pattern in the SVG defs element.

Listing 4.3 checkerBoard1.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> <g transform="translate(50,50)">   <rect      fill="url(#checkerPattern)"      style="stroke:white"      x="0" y="0" width="400" height="400"/> </g> </svg>

Remarks

The SVG defs element in Listing 4.3 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, whose 'interior' consists of a 2x2 grid of squares with alternating red and blue colors that form a 2x2 checkerboard pattern.

The SVG g element defines a rectangle with width 400 and a height of 400. This rectangle has a fill attribute that refers to the pattern checkerPattern defined in the SVG defs element by using the following syntax:

     fill="url(#checkerPattern)"

If you double-click on this file, you will see a checkerboard pattern.

---