Skip to content
Tiny Javascript to add pan & zoom to SVG
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Added npm & bower descriptors Mar 2, 2017
README.md Improve README Jun 23, 2019
bower.json Added npm & bower descriptors Mar 2, 2017
package.json
svgpan.js
tiger.svg

README.md

svgpan

Tiny Javascript to add pan, zoom & drag capabilities to SVG.

Some time ago I had a need to display some vectorial drawings on the web so I've found out that SVG is decently supported by modern browsers (I won’t say anything about Internet Explorer – it’s just unsupported there). The language itself is great, but the interactivity provided by the browsers is definitely low: can display your SVG file on a browser and that's it - you can't navigate it, zoom it or pan :(

Since I couldn't find anything around, I've decided to write a minimalistic javascript library to provide such interactions, so SVGPan was born!

Features:

  • Panning (pan à la Google maps) (click on the white background and pan)
  • Zooming (using the mouse wheel)
  • Element dragging (click on a drawing element and drag it somewhere else)
  • Combinations of the above like zooming while dragging

The library itself is very small and easy to use; and it’s licensed under the BSD license. You can try a demo.

Quickstart

You can install svgpan via bower:

bower install svgpan

Alternatively just download svgpan.js into your application.

The library requires a root group to be identified by the id viewport, which is where the svg/pan/zoom will be applied. Below an example:

<script xlink:href="svgpan.js"/>

<g id="viewport" transform="translate(200,200)">...
You can’t perform that action at this time.