2.5. Nested Systems of Coordinates

You can establish a new viewport and system of coordinates at any time by putting another <svg> element into your document. The effect is to create a "mini-canvas" upon which you can draw. We used this technique to create illustrations such as Figure 2-5. Rather than drawing the rectangles, then rescaling and positioning the cat inside each one (the brute force approach), we took these steps:

• Draw the blue rectangles on the main canvas

• For each rectangle, define a new <svg> element with the appropriate preserveAspectRatio attribute

• Draw the cat into that new canvas (with <use>), and let SVG do the heavy lifting