Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Tiny Javascript to add pan & zoom to SVG

Resources

Stars

Watchers

Forks

Packages

No packages published