Summary

---

 Download CD Content

Overview

This chapter demonstrates how to use the SVG functions translate, scale, rotate, and skew that can be specified as part of the SVG transform element. Although you have already seen the SVG translate function, this chapter presents a consolidated location and description of these functions; you'll see how to use them in conjunction with rectangles and ellipses in order to perform manipulations on a variety of graphics images.

These SVG functions provide sophisticated geometric manipulations that can greatly enhance the visual appeal of your graphics images. For instance, you can easily shift the contents of an SVG g element anywhere in the plane by means of the translate function. This functionality makes for cleaner SVG code because you can avoid hard-coded values in SVG elements. For example, you can define a rectangle whose upper-left vertex is the origin (0,0), and then use the translate function in order to render multiple copies of that rectangle on the screen. This functionality is extremely useful when you need to render business charts that can be decomposed into many logical components.

The SVG scale function makes it trivial to resize the graphics image rendered inside an SVG g element. While this functionality is much more difficult to achieve in other programming languages, SVG makes it available by means of a very simple code fragment. You can also combine the SVG translate and scale functions, which enable you to render many scaled copies of a graphics image. Keep in mind that there is no practical limit to the complexity of the graphics image defined in an SVG g element; consequently, you can easily create a visually rich collage based on a single graphics image. The SVG rotate function allows you to rotate a graphics image that is defined in an SVG g element by means of a very simple code fragment.

There are two SVG skew functions, skewX and skewY that allow you to 'tilt' the contents of an SVG g element. They can be specified by a very simple code fragment.

The SVG matrix function is probably the most sophisticated of the SVG functions. This function allows you to perform a linear transformation on the contents of an SVG g element, and it can be specified by a very simple code fragment. Unless you happen to have a solid understanding of the mathematics of linear transformations, it's probably easier to find an equivalent set of transformations based on the other SVG functions.

When you've finished this chapter, you'll have a glimpse into the tremendous number of ways to combine SVG functions. They can also be easily combined with other SVG elements, such as patterns and color gradients, in order to create graphics images that are impossible to achieve with a comparable amount of effort in traditional programming languages. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 6 folder.

---