Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Interactivity

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

Photo Credit to CodeToFun

πŸ™‹ Introduction

SVG (Scalable Vector Graphics) not only allows you to create stunning graphics, but it also supports interactivity. This means you can make your SVG elements respond to user actions such as clicks, mouse movements, and more.

This guide will cover how to add interactivity to your SVG elements, enhancing the user experience on your web pages.

⏰ Adding Interactivity with Events

SVG elements can respond to various events, just like HTML elements. Common events include click, mouseover, mouseout, mousedown, mouseup, and mousemove. These events can be handled using JavaScript to create interactive SVG graphics.

πŸ’‘ Syntax

To add interactivity, you can use event listeners in JavaScript. Here’s the basic syntax for adding an event listener to an SVG element:

Syntax
Copied
Copy To Clipboard
element.addEventListener('event', function);

πŸ“„ Example: Click Event

Let's look at a practical example where a rectangle changes color when clicked:

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Interactivity</title>
</head>
<body>
  <svg width="200" height="200">
    <rect id="myRect" x="50" y="50" width="100" height="100" fill="blue" />
  </svg>

  <script>
    // Select the rectangle element
    const rect = document.getElementById('myRect');

    // Add a click event listener
    rect.addEventListener('click', function() {
      // Toggle the fill color between blue and red
      rect.setAttribute('fill', rect.getAttribute('fill') === 'blue' ? 'red' : 'blue');
    });
  </script>
</body>
</html>

🧠 How it works?

In this example:

  • We have an SVG rectangle with an initial fill color of blue.
  • We use JavaScript to add a click event listener to the rectangle.
  • When the rectangle is clicked, the fill color toggles between blue and red.

πŸ“„ Example: Mouseover and Mouseout Events

Here's another example that changes the rectangle's border color when the mouse hovers over it:

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Interactivity</title>
</head>
<body>
  <svg width="200" height="200">
    <rect id="myRect" x="50" y="50" width="100" height="100" fill="green" stroke="black" stroke-width="2" />
  </svg>

  <script>
    const rect = document.getElementById('myRect');

    rect.addEventListener('mouseover', function() {
      rect.setAttribute('stroke', 'orange');
    });

    rect.addEventListener('mouseout', function() {
      rect.setAttribute('stroke', 'black');
    });
  </script>
</body>
</html>

🧠 How it works?

In this example:

  • The rectangle's stroke color changes to orange when the mouse is over it.
  • The stroke color reverts to black when the mouse moves out.

πŸŽ‰ Conclusion

Adding interactivity to SVG elements can significantly enhance user engagement and create a more dynamic user experience.

By using JavaScript event listeners, you can make your SVG graphics respond to user actions, providing a more interactive and enjoyable interface.

πŸ‘¨β€πŸ’» 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