Skip to content

December 8, 2009

106

SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library

Some time ago the need for a browser-compatible vectorial language pushed me to consider the SVG markup language (I won’t say anything about Internet Explorer – it’s just unsupported there). The language itself is great, but, as a beginner, I was so disappointed about the fact that on the Internet I couldn’t find ANY library ready to use for panning and zooming features that I had to write one from scratch.

The SVGPan library features:

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

The resulting javascript library is published here, in the hope that someone can find it useful. The library itself is very small and easy to use; and it’s licensed under the BSD license. You can try a demo here

type=”image/svg+xml” width=”800″ height=”800″> 

No SVG support at all!

 

You can also open the demo in a new page and download the SVGPan library here.

The library itself requires a root group to be identified by the id viewport, which confines the SVGPan library effects, and the import of 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).

Zeng Xiaohui has provided a patch to support the mouse wheel on Safari/Chrome and fixed the browser scrollbar issue as well. Both patches have been merged into the latest version of SVGPan.

 

The source of this project is now hosted on Google Code, so there you can find the latest version.

 

If you found this code useful please consider donating!

 

Read more from All/News, JavaScript, Web
  • Here is a diff that provides support for IE9 ans IE10
    http://pastebin.com/Xd0s5DXQ

  • Sorry for my last post, It works with IE11 but I couldn’t test it under IE9 and IE10 thanks to openminded Microsoft policy 🙂

  • Thomas

    Hi,

    First of all, thank you for this library : such easy to use, absolutely wonderful.
    I’m trying to implement a min and max zoom in it but i’m definitely a newbie in JS and I was wondering if anyone has already think about something like that.

    And yes, i’m aware that this post is old, really old x)

  • Steve Cornish

    Aware that this is really old now, but wanted to say it’s still really useful and a great help when demoing SVGs quickly.

  • Levi

    Hello. This is awesome. Thank you for the script. I just can’t make it work to zoom only if the button “shift” is pressed.
    I search for window.onkeydown. This works perfectly. Then I set a variable shift_down to true if it pressed.

    Now the problem if I put your handleMouseWheel in an if statement the “evt.target.ownerDocument” prints out the html not the svg so it returns a null.

  • Hichem Tunisia

    Hello,
    It is simply excellent
    thanks for sharing

    I used the version 1.1 on some files that I prepared using google drawings and saved as SVG

    I inserted
    and it went ok
    but when used the last version 1.2
    it didn’t go ok

    What should I do, to get it working

    thanks for sharing, and wonderfull work, excellent !!!