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