DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-svg-pan-zoom package

    3.11.0 • Public • Published


    react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a small space.

    chrvadala Test npm Downloads Donate


    Live Demo

    available at


    This component can work in four different modes depending on the selected tool:

    • With the tool pan the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
    • With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
    • With the tool none the user can interact with SVG child elements and trigger events.
    • With the tool auto the user can interact with SVG child elements, perform pan (dragging the image), zoom in (double click), zoom out (double click + shift).




    npm install --save react-svg-pan-zoom


    yarn add react-svg-pan-zoom


    <script src=""></script>
    <script src=""></script>

    Usage examples


    • v2.0 - Project refactor. Follow this guide for migration instructions.
    • v2.1 - Adds setPointOnViewerCenter, reset methods and className, style props
    • v2.2 - Introduces tool auto, improves default toolbar
    • v2.3 - Adds touch events support
    • v2.4 - Adds es:next support, deploy new website
    • v2.5 - Adds preventPanOutside and scaleFactor props
    • v2.6 - Introduces transformation-matrix that reduces bundle size thanks to three shaking, Fixes pan limit behaviour, Replaces toolbar links with buttons, minor improvements
    • v2.7 - Adds miniature feature, Adds PropTypes support
    • v2.8 - Adds storybook demo, Remove bower support, Adds pinch to zoom feature, Fixes miniature size
    • v2.9 - Reinvents miniature and introduce props miniatureBackground, miniatureHeight, Minor improvements & fix
    • v2.10 - Introduces prop disableDoubleClickZoomWithToolAuto
    • v2.11 - Improves docs, updates deps
    • v2.12 - Exports miniature to allow customization
    • v2.13 - Fixes resize issues (#58), Upgrades deps
    • v2.14 - Introduces prop scaleFactorOnWheel, Upgrades deps
    • v2.15 - Improves autopan feature (#71), adds scaleFactorMax, scaleFactorMin props (#71), Upgrades deps
    • v2.16 - Adds onPan and onZoom callbacks, Upgrade deps, Fixes boundaries feature
    • v2.17 - Upgrades deps
    • v2.18 - Introduces toolbarProps.SVGAlignX and toolbarProps.SVGAlignY props. Adds alignment configuration in fitToViewer(SVGAlignX = "left", SVGAlignY = "top") method (#120). Upgrades deps.
    • v3.0 - Upgrades to babel 7 and storybook 4; Introduces <UncontrolledReactSVGPanZoom /> component and makes <ReactSVGPanZoom> a stateless component (except for some optimizations); Moves props related to miniature and toolbar, respectively into the miniatureProp and toolbarProp props. Migration guide is available here.
    • v3.1 - Upgrades to storybook 5 and transformation-matrix 2; Fixes some Babel configuration issues
    • v3.2 - Upgrades deps
    • v3.3 - Adds SVG viewbox prop support #150
    • v3.4 - Upgrades deps and increases code quality (fixing eslint warnings)
    • v3.5 - Handles wheel event as passive #158, upgrades deps
    • v3.6 - Adds some unit tests, Fixes #161, upgrades deps
    • v3.7 - Adds some more unit tests, upgrades deps
    • v3.8 - Adds cover option on fitToViewer method #167, adds activeToolColor property #168, upgrades deps
    • v3.9 - Exports toolbar icons and buttons #192
    • 3.10 - Upgrades deps; Migrates to React 17 and Storybook 6; Updates examples and docs to React hooks
    • 3.11 - Migrates from yarn to npm; Makes use of chrvadala/github-actions; Updates deps;

    Some projects using react-svg-pan-zoom



    npm i react-svg-pan-zoom

    DownloadsWeekly Downloads






    Unpacked Size

    1.06 MB

    Total Files


    Last publish


    • chr.vadala