little-little-monster / svgpan

Tiny Javascript to add pan & zoom to SVG

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)">...