Generating a Checkerboard Grid | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Generating a 3D Checkerboard Grid

Consider the three-dimensional checkerboard pattern rendered in Figure 4.3.

click to expand
Figure 4.3: A 3D checkerboard pattern.

The SVG document in Listing 4.4 demonstrates how to use the SVG pattern element in order to generate a three-dimensional checkerboard pattern.

Listing 4.4 checkerBoard3D1.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> <!-- top horizontal strip --> <g transform="translate(50,50)">   <path     d="M 0 0 L 400 0 L 430 -20 L 30 -20 z"     style="fill:black;stroke:none"/> </g> <!-- right vertical strip --> <g transform="translate(450,50)">   <path     d="M 0 0 L 30 -20 L 30 380 L 0 400 z"     style="fill:black;stroke:none"/> </g> </svg>

Remarks

The SVG defs element in Listing 4.4 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. The inside of the pattern consists of a 2x2 grid of squares whose colors form a checkerboard pattern.

The SVG g element defines a rectangle with a width of 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)"

The next two SVG path elements define parallelograms that are used for shading the checkerboard pattern: one parallelogram provides the upper shading, and the other provides the shading on the right side of the checkerboard. If you double-click on this file, you will see a rectangular grid of blue rectangles with a black horizontal strip at the top and a black vertical strip on the right of the checkerboard that create a three-dimensional effect.