SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library
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.
To use it, just tag a root group to be identified by the id viewport, which confines the SVGPan library effects, and import the javascript code as well. For example, to adapt the tiger drawing, it was necessary to add the following:
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">...
You may also try another SVG example (triple integral, from Wikipedia).
The source of this project is now hosted on Github, so there you can find the latest version.
