JavaScript Library For Zooming & Panning SVG Elements - svg.pan-zoom.js

File Size: 269 KB
Views Total: 5284
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
JavaScript Library For Zooming & Panning SVG Elements - svg.pan-zoom.js

svg.pan-zoom.js is a JavaScript library which allows you to zoom in/out and pan SVG elements with mouse & touch interaction, depended on jQuery library and SVG.js.

How to use it:

1. Load the necessary jQuery library and the SVG.js in your document.

<script src="//"></script>
<script src="path/to/svg.js"></script>

2. Make sure to load the svg.pan-zoom.js JS library after jQuery libray.

<script src="path/to/svg.pan-zoom.js"></script>

3. Use the SVG() function to create SVG elements and make them zoomable & pannable.

var svg = new SVG($(".graph").get(0)).size("100%", 900);
var links =;
var markers =;
var nodes =;

// Add draggable circles
var g1 =, 200).draggable();"#C2185B");

var g2 =, 200);"#E91E63");

var g3 =, 400);"#FF5252");

// Make the group pannable and zoomable

Change log:

v2.8.0 (2016-02-04)


  • Fixed: 'parent' is a function
  • Demo update

v2.1.0 (2015-05-01)

  • update.

This awesome jQuery plugin is developed by jillix. For more Advanced Usages, please check the demo page or visit the official website.