How To Zoom Svg With Javascript

by

Working with SVG (Scalable Vector Graphics) images can be a powerful tool in web development. They can be easily
scaled and manipulated without losing quality or increasing the file size. In this blog post, we will learn how
to zoom an SVG image using JavaScript, making it easier for users to explore more details in the image.

Creating an SVG Image

First, let’s create a simple SVG image to work with. In this example, we’ll create a circle and a rectangle
inside the SVG element: 

<svg id="mySVG" width="300" height="300" viewBox="0 0 100 100" style="border: 1px solid">
  <circle cx="50" cy="50" r="30" fill="blue" />
  <rect x="20" y="20" width="40" height="20" fill="red" />
</svg>

Adding Zoom Functionality

To add zoom functionality, we need to use JavaScript to listen for the mouse wheel event on the SVG element and
modify the viewBox attribute based on the zoom level. Here’s a step-by-step guide to achieve this:

Step 1: Get the SVG Element

First, we need to get the SVG element using JavaScript. We can use the getElementById() method
for this: 

const svg = document.getElementById('mySVG');

Step 2: Add an Event Listener for the Mouse Wheel Event

Next, we need to add an event listener to the SVG element for listening to the mouse wheel event. We can use
the addEventListener() method for this: 

svg.addEventListener('wheel', zoomHandler);

Step 3: Implement the Zoom Handler Function

Now, we need to implement the zoom handler function that will be called when the mouse wheel event is fired.
Inside the function, we’ll modify the viewBox attribute of the SVG element to change the zoom level. 

function zoomHandler(event) {
  event.preventDefault();

  const scaleFactor = 0.1;
  let viewBox = svg.viewBox.animVal;
  let newWidth = viewBox.width;
  let newHeight = viewBox.height;

  if (event.deltaY > 0) {
    // Zoom out
    newWidth = viewBox.width * (1 + scaleFactor);
    newHeight = viewBox.height * (1 + scaleFactor);
  } else {
    // Zoom in
    newWidth = viewBox.width * (1 - scaleFactor);
    newHeight = viewBox.height * (1 - scaleFactor);
  }

  svg.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${newWidth} ${newHeight}`);
}

Complete Code

Here’s the complete code to create an SVG image and add zoom functionality using JavaScript: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Zoom Example</title>
</head>

<body>
    <svg id="mySVG" width="300" height="300" viewBox="0 0 100 100" style="border: 1px solid">
        <circle cx="50" cy="50" r="30" fill="blue" />
        <rect x="20" y="20" width="40" height="20" fill="red" />
    </svg>

    <script>
        const svg = document.getElementById('mySVG');
        svg.addEventListener('wheel', zoomHandler);

        function zoomHandler(event) {
            event.preventDefault();

            const scaleFactor = 0.1;
            let viewBox = svg.viewBox.animVal;
            let newWidth = viewBox.width;
            let newHeight = viewBox.height;

            if (event.deltaY > 0) {
                // Zoom out
                newWidth = viewBox.width * (1 + scaleFactor);
                newHeight = viewBox.height * (1 + scaleFactor);
            } else {
                // Zoom in
                newWidth = viewBox.width * (1 - scaleFactor);
                newHeight = viewBox.height * (1 - scaleFactor);
            }

            svg.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${newWidth} ${newHeight}`);
        }
    </script>
</body>

</html>

Conclusion

In this blog post, we learned how to create an SVG image and add zoom functionality using JavaScript. By
following these steps, you can now easily implement zooming functionality for SVG images in your own web
projects, allowing users to explore more details in the images.

Leave a Comment