Open In App

SVG <a> Element

Last Updated : 08 Mar, 2024
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:



Previous Article
Next Article

Similar Reads

SVG &lt;svg&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh
2 min read
SVG &lt;linearGradient&gt; Element
SVG &lt;linearGradient&gt; Element allows the developer to define linear gradients to apply SVG elements. It allows a smooth transition from one color to another. This is the most reliable technique. Linear gradients can be defined as vertical, angular gradients or horizontal: Vertical gradients are created when x1 and x2 are equal and y1 and y2 di
3 min read
SVG pattern Element
SVG (Scalable Vector Graphic) pattern is an element which defines the pattern in graphics using HTML. To work with create SVG pattern you have to define a &lt;pattern&gt; inside in an SVG after that, you can define the shapes inside of that &lt;pattern&gt;. Now have to define shapes area by specifying its color, borders, etc. Syntax of Declaration:
3 min read
SVG Path Element
SVG stands for Scalable Vector Graphic. The SVG element path is used to define a path that starts from a position and ends to a particular position. SVG path can be used to create any basic shapes. Syntax: &lt;path d="Shape of path using keyword like M, L, C etc." pathLength="Length of path" stroke="stroke color name" fill="color name"&gt; &lt;/pat
2 min read
SVG Polyline element
The &lt;polyline&gt; element of SVG in HTML is used to create a shape by connecting lines through different points. It is different from &lt;polygon&gt; as it can be used to create open shapes. Syntax: &lt;polyline points="Pair of points required to draw the shape" stroke="stroke color" fill="fill color for colored closed shapes"&gt; Attributes: po
1 min read
SVG defs Element
The &lt;defs&gt; in SVG is used whenever we want a particular element to render only when required or when it is called. objects that are created inside &lt;defs&gt; element are not rendered directly they are needed to be called by &lt;use&gt; element to render them on the browser. Syntax: &lt;defs&gt;&lt;/defs&gt; Property values: It does not have
2 min read
SVG polygon Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The &lt;polygon&gt; element of SVG is used to make any type of polygon on the SVG and defines a closed shape consisting of a set of connected straight line segments. Syntax: &lt;polygon points="Pair of points required to draw the shape" strok
2 min read
SVG &lt;marker&gt; Element
The &lt;marker&gt; element in SVG is used to define the graphics that is mostly used for the drawing purpose. It may be used in graphs, charts for making arrowheads and polymarkers on a given path. Syntax: &lt;marker&gt;&lt;/marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient=""&gt; Property Values: This element contains the fol
2 min read
SVG &lt;desc&gt; Element
The &lt;desc&gt; element in SVG is used to provide an accessible text description to any of the available SVG elements whether it is a container or graphic element. Syntax: &lt;desc&gt;&lt;/desc&gt; Property Values: It does not have any property values. Below given are a few examples of the function given above. Example1: When text inside the desc
1 min read
SVG Circle Element
The SVG &lt;circle&gt; element is used to draw circle. The center point and radius are given. Syntax: &lt;circle cx="x-axis co-ordinate" cy="y-axis co-ordinate" r="length" &gt; &lt;/circle&gt; Attributes: cx: x-axis co-ordinate of the center.cy: y-axis co-ordinate of the centerr: Radius of the circle. Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;g
1 min read