Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Links

Posted in SVG Tutorial
Updated on May 20, 2024
By Mari Selvan
πŸ‘οΈ 186 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
SVG Links

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
Copy To Clipboard
<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
Copy To Clipboard
<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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy