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

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

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