SVG Interactivity

Posted in SVG Tutorial

Updated on May 20, 2024

By Mari Selvan

👁️ 31 - Views

⏳ 4 mins

💬 1 Comment

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

element.addEventListener('event', function);

📄 Example: Click Event

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

index.html

Copied

<!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

<!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>