Jenkov.com
Tutorials About




SVG a element


Last updated: 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:



Connect with me: Newsletter - Get all my free tips!
     



Close TOC
This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies), to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this website. We do not share our cookies with our advertisers, and our advertisers do not share cookies with us.
OK