SVG <a> Element

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>