Text Navigation Bars

A text navigation bar has just about the simplest design you can create. The code for a three-page text navigation bar is shown in Listing 5.10. The purpose of the deep blue rectangle is simply to show you the boundary of the navigation bar. The navigation bar is contained within a nested <svg> element. If you want to move the navigation bar slightly up or to the side (or even to the right side of the page), you can do that by changing only the x and y attributes of the nested <svg> element and maintaining the relative positioning of everything inside it.

Listing 5.10. (TextNavBar01.svg)
 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> ...

Get Designing SVG Web Graphics now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.