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.

The link to follow when clicked.
The link title. Shown on mouse hover.
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>
Code 1. A link to this tutorial.
The same area in the same frame is replaced.
The same frame is replaced. This is the default.
The immediate parent frame of the content is replaced.
The entire content of window is replaced.
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;
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 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" />
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.

Related Topics