• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 5. Creating Navigation Bars > Using <svg> Elements to Aid Positioning

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 parts or other visual components can be moved around without disturbing the carefully crafted relative positioning of its parts. This makes the reuse of SVG code much easier and saves you from lots of time writing new code (and thus saves time debugging it), making the whole operational use of SVG more pleasant, more fun, and more efficient.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint