The SVG <a> element creates a hyperlink within SVG graphics. It functions similarly to the HTML <a> element. It links to external resources or other parts of the SVG document.
Syntax:
<a href=""
target=""
type=""
rel=""
download="">
</a>
SVG <a> Attributes
Name | Description |
|---|---|
It stands for hypertext reference and takes the link to the other documents. | |
download | It instructs the browser to download a file. |
It is the human language of the URL or in simple words the URL fragment that hyperlink point is the hreflang. | |
It tells the relationship between the target and source documents. | |
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.
<!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:
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.
<!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:
Supported Browsers
The browser supported by value attribute in option tag are listed below: