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 |
---|---|
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" >
< 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" >
< 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: