Using the SVG scale Function with Checkerboards

---

Using Multiple SVG scale Elements

Consider the checkerboard pattern rendered in Figure 6.4.

Figure 6.4: Rendering multiple scaled checkerboards.

The SVG document in Listing 6.4 demonstrates multiple invocations of the SVG scale function in order to scale a checkerboard pattern.

Listing 6.4 multiScaledCheckerBoard1.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)">   <g transform="scale(1)">     <rect        fill="url(#checkerPattern)"        style="stroke:white"        x="0" y="0" width="320" height="320">     </rect>   </g> </g> <g transform="translate(50,50)">   <g transform="scale(.6)">     <rect        fill="url(#checkerPattern)"        style="stroke:white"        x="0" y="0" width="320" height="320">     </rect>   </g> </g> <g transform="translate(50,50)">   <g transform="scale(.2)">     <rect        fill="url(#checkerPattern)"        style="stroke:white"        x="0" y="0" width="320" height="320">     </rect>   </g> </g> </svg>

Remarks

The SVG defs element in Listing 6.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 first SVG g element is given below:

<g transform="translate(50,50)">   <g transform="scale(1)">     <rect        fill="url(#checkerPattern)"        style="stroke:white"        x="0" y="0" width="320" height="320">     </rect>   </g> </g>

As you can see, the preceding SVG g element defines a rectangle with width 320 and a height of 320 that refers to the pattern checkerPattern defined in the SVG defs element. As a result, this SVG g element renders a checkerboard pattern.

Since a scale value of 1 means that no scaling takes place, the following pair of SVG lines:

<g transform="translate(50,50)">   <g transform="scale(1)">

is functionally equivalent to the following:

<g transform="translate(50,50)">

The second SVG g element is reproduced below:

<g transform="translate(50,50)">   <g transform="scale(.6)">     <rect        fill="url(#checkerPattern)"        style="stroke:white"        x="0" y="0" width="320" height="320">     </rect>   </g> </g>

The second SVG g element differs from the first SVG g element only in terms of the scale factor; the former specifies 1 whereas the latter specifies .6. The second SVG g element also defines a rectangle with width 320 and a height of 320 that refers to the pattern checkerPattern defined in the SVG defs element. Thus, this SVG g element renders an image that is a 0.6 scaled version of the first checkerboard pattern.

The third and final SVG g element is given below:

<g transform="translate(50,50)">  <g transform="scale(.2)">    <rect       fill="url(#checkerPattern)"       style="stroke:white"       x="0" y="0" width="320" height="320">    </rect>  </g> </g>

The third SVG g element differs from the first SVG g element only in terms of the scale factor; the former specifies 1 whereas the latter specifies .2. The third SVG g element also defines a rectangle with width 320 and a height of 320 that refers to the pattern checkerPattern defined in the SVG defs element. Thus, this SVG g element renders an image that is a 0.2 scaled version of the first checkerboard pattern.

---