SVG - Linking


<a> element is used to create hyperlink. "xlink:href" attribute is used to pass the IRI (Internationalized Resource Identifiers) which is complementary to URI (Uniform Resource Identifiers).


Following is the syntax declaration of <a> element. We've shown main attributes only.

   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >


Sr.No. Name & Description
1 xlink:show − for documentation purpose for XLink aware processors. Default is new.
2 xlink:actuate − for documentation purpose for XLink aware processors.
3 xlink:href − location of the referenced object.
4 target − used when targets for the ending resource are possible.


   <title>SVG Linking</title>
      <h1>Sample Link</h1>
      <svg width="800" height="800">
            <a xlink:href=""> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            <a xlink:href=""> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 


Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering. Click on link and rectangle to see the result.