SVG a element

Shapes as Links

Jakob Jenkov
Last update: 2014-06-15

The SVG <a> element is used to create links in SVG images. SVG links work just like HTML links. Here are a few simple examples:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/index.html">
        <text x="10" y="20">/svg/index.html</text>
    </a>

    <a xlink:href="/svg/index.html" xlink:show="new">
        <text x="10" y="40">/svg/index.html
         (xlink:show="new")</text>
    </a>

    <a xlink:href="/svg/index.html" xlink:show="replace">
        <text x="10" y="60">/svg/index.html
         (xlink:show="replace")</text>
    </a>

    <a xlink:href="/svg/index.html" target="_blank">
        <text x="10" y="80">m/svg/index.html
         (target="_blank")</text>
    </a>

    <a xlink:href="/svg/index.html" target="_top">
        <text x="10" y="100">/svg/index.html
         (target="_top")</text>
    </a>

</svg>

Here is the resulting image:

You can set the xlink:show attribute on the <a>-element to either new or replace, to tell whether the content the link points to should be displayed in a new window, or replace the content of the existing window.

Note, that if you use replace and you display the SVG image inside an iframe, the iframe will be the target of the link and not the browser window. If you want the browser window to be the target instead of the iframe, use the target attribute with a value of _top instead.

You can also set the target attribute to tell the browser to open the link in a specific frame or specific window. This works just like the target attribute of links in HTML (at least in theory). Be aware that the browsers interprets the value of the target attribute in different ways. See the last section on this page for more detail.

Shapes as Links

It is also possible to use shapes as links. All you need to do is to put the SVG shape you want to use as link between the <a> and </a> tags. Here is an example that uses a rectangle as link instead of a text:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/index.html" target="_top">
        <rect x="10" y="20" width="75" height="30"
                style="stroke: #333366; fill: #6666cc"/>
    </a>
    
</svg>

And here is the resulting image:

Next: SVG defs Elements

Tweet
	Jakob Jenkov