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

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 ...

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