SVG zoom-in and zoom-out in React JS

In this article, we will see how to zoom SVG images in React JS. It is really useful in some cases. We will use the react-svg-pan-zoom package to create a feature that will zoom-in or rotate our SVG image.

First create a React project −

npx create-react-app tutorialpurpose

Go to the project directory −

cd tutorialpurpose


Install the react-svg-pan-zoom package −

npm i --save react-svg-pan-zoom

This package will allow us to implement an area over which we can zoom-in and zoom-out and even rotate an image.

Add the following lines of code in App.js

import React, { useRef, useEffect } from "react";
import { UncontrolledReactSVGPanZoom } from "react-svg-panzoom";

export default function App() {
   const Viewer = useRef(null);
   useEffect(() => {
   }, []);

   const _zoomOnViewerCenter = () =>
   const _fitSelection = () => Viewer.current.fitSelection(40,40, 200, 200);
   const _fitToViewer = () => Viewer.current.fitToViewer();

   return (
         <hr />
         <button className="btn" onClick={() =>_zoomOnViewerCenter()}>Zoom on center
         <button className="btn" onClick={() =>_fitSelection()}> Zoom area 200x200
         <button className="btn" onClick={() => _fitToViewer()}> Fit
         <hr />
         <UncontrolledReactSVGPanZoom ref={Viewer} width={500} height={500}>
            <svg width={617} height={316}>
               <g fillOpacity=".5" strokeWidth="4">


This is the default code from the documentation.

  • We first created a reference, where we referenced its default view, which will fit to the screen.

  • Then we created 3 functions to change the zoom settings.

  • In <UncontrolledReactSVGPanZoom> we give reference and inside it, we add an SVG image to operate.


On execution, it will produce the following output −

Updated on: 29-Sep-2021

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started