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" >
< circle cx = "150"
cy = "100"
r = "80"
fill = "green" >
</ circle >
</ a >
</ svg >
</ div >
</ body >
</ html >
|
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" >
< 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:
Last Updated :
08 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...