Simple Navigation Bars

In this section, I describe how to create simple navigation bars. The navigation furniture that is produced is not necessarily of a type you use in a production Web page, but the techniques I show you are useful in many settings. As with so many other aspects of SVG, what I am showing you are visual components you can use with other SVG visual components to produce your own SVG graphics.

The navigation bars I show you how to create in this section are typically in their own nested <svg> elements to allow you to reposition the navigation bar as a unit on the Web page while preserving the relative positions of its parts.

If you want to test these bars embedded within HTML and XHTML Web pages, see Chapter 10, “Embedding SVG ...

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

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.