Summary

---

 Download CD Content

Overview

This chapter demonstrates how to use the SVG elements pattern, clipPath, and path in conjunction with rectangles and ellipses in order to generate repeating patterns of graphics images. An SVG pattern element is akin to a 'template' definition in the sense that it specifies a graphics image by means of one or more SVG elements. An SVG pattern element is defined inside an SVG defs element and then referenced inside an SVG g element (by means of the value of the id attribute of the pattern) and the specified pattern is replicated in a rectangular, grid-like fashion. The actual replication of the pattern is based on the dimensions of the SVG rect element that is specified in the SVG g element.

Another powerful mechanism in SVG is the SVG clipPath element, which allows you to specify a 'window' for viewing geometric objects. Since your computer screen is limited in size, you are always looking at information through some type of window. For example, you can think of a rectangle as a 'clip path' that is used in spreadsheet programs and word processing software. The SVG clipPath element is extremely powerful and goes far beyond a simple rectangle: you can easily specify polygons and complex curves as the clip path for a geometric object.

The static images in this chapter give you a foundation for pattern-based images. In Chapter 6 you'll learn how to combine SVG functions with the SVG elements in this chapter in order to create complex animation effects. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 4 folder.

---