Designing SVG Web Graphics

Using <svg> Elements to Aid Positioning

Back in Chapter 2, “SVG Document Overview,” I mentioned that you could nest one <svg> element inside another and that you could use the nested <svg> element as a container for an SVG component. Creating navigation bars, as you have seen in the examples in this chapter, can be a useful application of that technique.

A navigation bar can consist of many individual components, including graphical shapes and text. If you nest within a <svg> element all the SVG elements that make up the navigation bar, all the positioning of the elements within a group relative to each other remains fixed. By altering the values of the x and y attributes of the nested <svg> element, the whole navigation bar and its component ...