Open In App

SVG <a> Element

Improve
Improve
Like Article
Like
Save
Share
Report

The SVG <a> element creates a hyperlink within SVG graphics. It functions similarly to the HTML <a> element. It’s used to link to external resources or other parts of the SVG document.

Syntax:

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

SVG <a> Attributes

Name

Description

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.

Examples of SVG <a> Element

Example 1: In this example we creates a green circle inside an SVG element. It’s wrapped with an anchor (<a>) tag, making it a clickable link that redirects to “geeksforgeeks.org” upon click.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <title>SVG a Tag</title>
</head>
  
<body>
    <div style="width:300px; height:300px;">
            <h2>
                SVG <a> Tag 
            </h2>
          
        <svg width="500" 
             height="500">
            <a href="http://geeksforgeeks.org">
                <circle cx="150" 
                        cy="100" 
                        r="80" 
                        fill="green">
                </circle>
            </a>
        </svg>
    </div>
</body>
  
</html>


Output:

SVG  a tag Example output

SVG a tag Example output

Example 2: In this example we defines a green rectangle within an SVG element. It’s encapsulated by an anchor (<a>) tag, creating a clickable area that redirects to another tab at “geeksforgeeks.org” using target blank upon click.

HTML




<!DOCTYPE html> 
<html lang="en"
<head
    <title>SVG a Element</title
</head>
<body
    <div style="width:300px; height:300px;">
            <h2>
                <a> Tag SVG
            </h2
        <svg width="500" 
             height="500">
            <a href="http://geeksforgeeks.org" target="_blank">
                <rect x="80" 
                      y="30" 
                      width="150" 
                      height="80" 
                      fill="green">
                </rect>
            </a>
        </svg>
    </div>
</body
</html>


Output:

svg <a> example output
SVG a tag Example output

Supported Browsers

The browser supported by value attribute in option tag are listed below:



Last Updated : 08 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads