Skip to content
JS Pan Zoom code for autoscaled SVGs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

SVGPanZoom V1.0

Sweet, short and simple stand-alone SVG Pan Zoom code including support for autoscaled SVGs and touch control (pinch to zoom). Apache V2 license.

Should work on: IE9+, FF, Chrome, Chrome mobile, Android 4+, ...?

Tests (so far only inline svg followed by inline javascript): Working on: Opera Mobile, FF, Chrome, Chrome mobile, IE11 To be tested on: Opera mini (doesnt support inline SVG), Apple stuff

This code is inspired on SVGPan by Andrea Leofreddi (also see his blogpost) and code by Peter Collingridge. Their code is starting to get old, however, due to sketchy and sometimes quickly changing SVG browser implementations. Also, I needed support for autoscaled SVGs.

How to use:

  • The code can be embedded in SVG image (dont forget to use in that case) or anywhere else in the page.
  • After the code is loaded, use addPanZoomToSVG({svgID: ..., panzoomID: ...,scrollSpeed: ..., pinchSpeed: ..., upOnMouseOut: ...}). All config is optional, default svgID and panzoomID are "svg" and "panzoom".
  • Make sure the svgID and panzoomID options are matching the ID tags in your svg elements. For svgID your svg tag is recommended, since it is used to attach the events to, and for the panzoomID a g tag can be used for example.

Demo can be found at my personal page



  • Add rotation, in particular attractive for mobile use
  • Make a proper distribution including a minified version, a data-uri version and a AMD module version
  • More testing, both inline and in separate SVG, fix any incompatibility issues for main browsers


  • Use requestAnimationFrame when it is available


  • Allow for inertia-based pan/zooming (in particular for smooth zooming :-)
You can’t perform that action at this time.