SVG <a> Element

Last Updated : 07 Sep, 2020

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:

<!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>
                    <a> 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:

<!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>
                    <a> 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
Edge
Firefox
Internet Explorer
Safari
Opera

My Personal Notes

Related Articles