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

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.