Skip to content
Related Articles

Related Articles

SVG <a> Element

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Jun, 2022
View Discussion
Improve Article
Save Article

The “<a>” element in SVG is used to create a hyperlink to other webpages or any URL. This tag works in the same way as HTML “<a>”  tag.

Syntax:

<a href="" 
   target="" 
   type="" 
   rel="" 
   download=""></a>

Attributes:

  • href: It stands for hypertext reference and takes the link to the other documents. 
  • download: It instructs the browser to download a file.
  • hreflang: It is the human language of the URL or in simple words the URL fragment that hyperlink point is the hreflang.
  • rel: It tells the relationship between the target and source documents.
  • target: It tells about where the webpage is to be displayed.
  • type: It tells about the MIME type of the document linked with URL.
  • ping: It is the space-separated list of URLs.

Below given are a few examples of the above function.

Example 1:

html




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            property="viewport"
            content="width=device-width,
                    initial-scale=1.0"/>
        <title>GeeksforGeeks</title>
    </head>
    <body>
        <div style="width:300px; height:300px;">
            <center>
                <h1 style="color:green">
                    GeeksforGeeks
                </h1>
                <h2>
                    &lt;a&gt; Tag SVG
                </h2>
            </center>
            <svg width="500" height="500">
                <a href="http://geeksforgeeks.org">
                    <circle cx="150" cy="100"
                            r="80" fill="green">
                </a>
            </svg>
        </div>
    </body>
</html>

Output:

Example 2:

html




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            property="viewport"
            content="width=device-width,
                    initial-scale=1.0"/>
        <title>GeeksforGeeks</title>
    </head>
    <body>
        <div style="width:300px; height:300px;">
            <center>
                <h1 style="color:green">
                    GeeksforGeeks
                </h1>
                <h2>
                    &lt;a&gt; Tag SVG
                </h2>
            </center>
            <svg width="500" height="500">
                <a href="http://geeksforgeeks.org">
                    <rect x="80" y="30" width="150"
                          height="80" fill="green">
                </a>
            </svg>
        </div>
    </body>
</html>

Output:

Browsers Supported: The following browsers are supported by this SVG element:

  • Chrome 1 and above
  • Edge 12 and above
  • Firefox 1.5 and above
  • Internet Explorer 9 and above
  • Safari 3.1 and above
  • Opera 9 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!