O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The <g> Element

The <g> element is, like a nested <svg> element, provided so that you can group several SVG elements within it. A <g> element has one important facility that a nested <svg> element does not have: A <g> element can be transformed. Transformation is a powerful tool in SVG whereby either statically or in an animation the shape, size, or position, for example, of a group of SVG elements can be changed.

The following code allows you to rotate a pair of rectangles contained within a grouping <g> element through 360 degrees over a period of ten seconds. Don’t worry about how the animation works; this subject is discussed in Chapter 8, “Animation: SVG and SMIL Animation.” Figure 02.02 shows the animation part completed. If the rectangles ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required