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

Linking Web Pages Using SVG

SVG provides two mechanisms for linking that operate in slightly different ways: the <a> element and XLinks.

To use SVG for navigating between Web pages, whether those are standard HTML or XHTML Web pages or SVG Web pages (as described in Chapter 12), you typically use the SVG <a> element.

The <a> element

Functionally, the SVG <a> element closely resembles an HTML or XTHML <a> element. The graphic or text that defines the link is nested within the <a> element, like this:

Listing 5.1. (SimpleA01.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"> <svg> <a xlink:href="PageToGoTo.html"> <text x="20" y="20" style="fill:blue; ...

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