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