Links in SVG

By mbystedt on Feb 27, 2014, 8:15:20 PM

Linking to content in SVG is similar to in HTML. One difference is the use of the 'xlink' namespace for some of the attributes. So, use xlink:href to denote where the link goes to and xlink:title for the link title. The target attribute is important if you are embedding the content within an HTML page.

<a>

Attribute	Explanation
xlink:href	The link to follow when clicked.
xlink:title	The link title. Shown on mouse hover.
target	The target to replace when link activated.

<a xlink:href="http://apike.ca/prog_svg.html" target="_blank">
  <text x="10" y="20">SVG Tutorial</text>
</a>

Code 1. A link to this tutorial.

Value	Comments
_replace	The same area in the same frame is replaced.
_self	The same frame is replaced. This is the default.
_parent	The immediate parent frame of the content is replaced.
_top	The entire content of window is replaced.
_blank	A new unnamed window is created. If unable to create a window the same action as _top is taken.

Table 1. The special values for target.

The 'a' element may contain pretty much anything but itself. So, a circle inside an 'a' element becomes a clickable link. It's possible to just link character data like in HTML.

There's one minor detail compared to HTML. Links in HTML are blue underlined text because of a stylesheet the browser provides. Your SVG viewer will provide very few stylesheet rules for links. You can probably assume it just has a rule for changing the cursor to a hand. So, you need to provide your own styling rules for links.

<style type="text/css"><![CDATA[
  a text {
    fill: darkblue;
    text-decoration: underline;
  }
  a:hover text {
    fill: blue;
  }
]]></style>

Code 1. Styling the 'a' element. This relies on the contained element not overriding its parent's style.

<a xlink:href="http://apike.ca/prog_svg.html" target="_parent" 
  xlink:title="This is a link title in SVG!">
  <text x="20" y="30" font-size="20" >Visit my SVG Tutorial!</text>
</a>
 
<a xlink:href="http://apike.ca/prog_svg.html" target="_parent"
  xlink:title="This is another link title in SVG!">
  <circle cx="300" cy="50" r="40" />
  <rect x="310" y="50" width="70" height="70" />
</a>

Example 1. Linking to other content within an SVG document (Download)

The target of '_parent' is used because this SVG document is embedded on an HTML page. The default of '_self' would load the content within the area the SVG is.