SVG Tutorial
SVG Introduction
SVG Examples
SVG Simple Example
SVG in Web Browsers
SVG Coordinate System
 
SVG svg
SVG g
SVG rect
SVG circle
SVG ellipse
SVG line
SVG polyline
SVG polygon
SVG path
SVG marker
SVG text
SVG tspan
SVG tref
SVG textpath
SVG switch
SVG image
SVG a
SVG defs
SVG symbol
SVG use
 
SVG and CSS
SVG Stroke
SVG Fill
SVG Viewport and View Box
SVG Animation
SVG Scripting
SVG Transformation
SVG Gradients
SVG Fill Patterns
SVG Clip Path
SVG Mask
SVG Filters
 
 


SVG a element

Connect with me:  
  Jenkov.com - News

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:


NextNext : SVG defs

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