Linking and views

SVG enables linking out of SVG content to other pages, as well as predefined views of SVG documents. Views are useful when you want to link directly to, for instance, a close-up of a diagram.

Windows Internet Explorer 9 introduced support for SVG linking and views, as specified in the Linking module of the SVG 1.1 (Second Edition) specification. This includes support for the a and view elements.

The Linking module’s associated DOM interfaces—SVGAElement and SVGViewElement—are also supported.

Linking

Just like in HTML, the a element is used to create a hyperlink in SVG. For instance, the following markup provides a hyperlink on a rectangle.

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <a xlink:href="https://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
 </a>

 </svg>

Views

Views can be used to instruct the browser to display an SVG image in a certain way. For instance, the following markup defines a link to a view.

...
 <a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
 </a>
 <view id="rect-view" viewBox="280 245 135 85" />
 <rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
 ...

In this example, the rect-view view is defined as a viewBox with the given coordinates. When the link (the text “Go to Rectangle”) is clicked, the rect-view view appears, which reveals the red rectangle.

The following markup defines another link to a view.

...
 <a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
 </a>
 <view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
 <circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
 ...

In this example, the circle-view view has the attribute preserveAspectRatio set to none. This means that, even though the shape is a circle, it will not scale uniformly to fill the specified viewBox rectangle when the view is invoked. Instead, it will stretch non-uniformly so that its bounding box exactly matches the viewBox rectangle. This markup appears as follows in Internet Explorer 9 when the page is first loaded.

When you click “Go to Circle”, the circle-view view is invoked, and the circle is stretched to fill the viewBox rectangle. This makes it appear to be an ellipse.

Related topics

SVG