Skip to content
A jQuery plugin providing a hook for Andrea Leofreddi's SVGPan library on an arbitrary number of SVGs
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This is an an adaptation of Andrea Leofreddi's SVGPan library, version 1.2.2, for use as a jQuery plugin.

When called upon SVG element(s), this will add all the capabilities of Andrea Leofreddi's SVGPan library to those elements. Non-SVG elements will be silently ignored.

This is useful if you have SVG content sitting in the DOM. For example, if you are generating graphics via the d3 visualization library. It will not work if you are embedding the SVG through some other means.

See it in action!


You can configure the behaviour of the pan/zoom/drag by passing arguments.

  • viewportId: String ID of the root SVG element.
  • enablePan: Boolean enable or disable panning (default enabled)
  • enableZoom: Boolean enable or disable zooming (default enabled)
  • enableDrag: Boolean enable or disable dragging (default disabled)
  • zoomScale: Float zoom sensitivity, defaults to .2
    $(selector).svgPan(viewportId, enablePan, enableZoom, enableDrag, zoomScale);


This would enable SVGPan for all SVGs currently on the page. The element #viewport would be used as the viewport for each.


This would enable SVGPan for a single element (provided it is an SVG).



Andrea Leofreddi's original SVGPan library on Google code

Fork jquery-svgpan at

CDN jquery-svgpan from

Something went wrong with that request. Please try again.