SVG Links

Posted in SVG Tutorial

Updated on May 20, 2024

By Mari Selvan

👁️ 232 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Scalable Vector Graphics (SVG) is not only about drawing shapes and creating visual elements but also about enhancing interactivity within your graphics. One of the ways to add interactivity is through links. SVG allows you to create hyperlinks using the <a> element, enabling users to click on SVG elements to navigate to other pages or perform actions.

In this guide, we'll explore how to create and use SVG links effectively.

💡 Syntax

The syntax for creating an SVG link involves wrapping SVG elements with the <a> element. The <a> element in SVG works similarly to the HTML <a> tag, using the xlink:href attribute to specify the URL.

Here’s the basic structure:

Syntax

Copied

<svg>
  <a xlink:href="URL">
    <!-- SVG elements go here -->
  </a>
</svg>

🧰 Attributes

xlink:href: Specifies the URL of the link. This is the destination that will be navigated to when the SVG element is clicked.
target: Specifies where to open the linked document (similar to the HTML target attribute). Common values include _self, _blank, _parent, and _top.

📄 Example

Let's create an SVG link that navigates to an external website when a rectangle is clicked:

index.html

Copied

<svg width="200" height="200">
  <a xlink:href="https://www.example.com" target="_blank">
    <rect x="50" y="50" width="100" height="80" fill="green" />
  </a>
</svg>

🧠 How it works?

In this example, the green rectangle is a clickable link that opens https://www.example.com in a new tab or window.

🎉 Conclusion

SVG links are a powerful feature that brings interactivity to your SVG graphics. By using the <a> element and the xlink:href attribute, you can create clickable SVG elements that enhance user experience and functionality.

Whether you're linking to external websites, internal pages, or other resources, SVG links provide a seamless way to integrate navigation within your graphics.