SVG Links

Last Updated:

How to Create a Link?

The <a> SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's <a> element.

Learn SVG!

In this example. we will create a link for SVG text by using <a> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="20" width="80" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="/svg" target="_blank"> <text x="0" y="15" fill="red">Learn SVG!</text> </a> </svg> </body> </html>

Link for SVG Circle

As same as above example. This example will create a link for SVG circle by using <a> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg circle{ stroke:red; stroke-width:3; fill:green; } </style> </head> <body> <svg height="100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="/svg" target="_blank"> <circle cx="50" cy="50" r="40" /> </a> </svg> </body> </html>

Attributes Value

AttributeExplanation
xmlns:xlink Specifies the xml namespace for a document.
xlink:href Specifies the location of the referenced object.
target Specifies where to open a document.

Share this Page

Meet the Author