SVG 'a' element

The SVG <a> element is used to indicate links. The destination for the link is defimed by the xlink:href attribute. Within this attribute you specify the URL of the destination object (an image, a video clip, a sound bite, a program, another SVG document, an HTML document, an element within the current document, an element within a different document, etc.). All the items within the <a> element are individually linked to the same destination.

Here is a simple example:

  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <text x="10" y="30" font-family="Times" font-size="18"> 
	See the usage of links in SVG
	<a xlink:href="http://www.w3.org/TR/SVG11/linking.html"
	  xlink:show="replace" font-style="italic"> 
	  here
	</a>
    </text>
  </svg>
							

Here is the resulting image:

Here is one more example:

  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <text x="10" y="10" font-family="Times" font-size="14">
	  This example shows assigning a link to a circle
    </text>
	<a xlink:href="http://www.w3.org/TR/SVG11/linking.html" xlink:show="new"> 
	  <circle cx="50" cy="50" r="30" fill="#9d1d20" stroke="grey"
		stroke-width="1pt"/>
	</a>
  </svg>
							

Clicking the circle in this example you will follow the link that is defined for it.

As you may see from the examples one more attribute of the <a> element is used. The attribute xlink:show indicates whether to load a destination object in the same window or in a new window, frame, pane, or other relevant presentation context. This attribute has thereby 2 values: replace and new. To find more attributes of the <a> element see W3C SVG 1.1 Recommendation.