Zooming and panning svg images using raphael.js or some other js library

Question

Hi there first off all thanks for looking ,

I am in need of a small script that will display an SVG (vector image) within a frame that has 2 functions;

1 - The image can be panned (moved around to look at different parts of the svg image with the cursor) simmilar to google maps.

2- The SVG image can be zoomed in and out on also simmilar to google maps except there will be no need to load new imagery as the image is a vector.

For a simmilar script i have seen that works with normal image formats see http://jibbering.com/routeplanner/

Answer 1

First you need to learn how to install a function that extends Raphael to support zooming... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

Next you want to implement Wout's zooming plugin... http://github.com/wout/raphael-zoom

Answer 2

You can try the scripts from IE9 test page http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Requires a little tweaking with ids but worked fine for me.

Answer 3

Raphael is good, but not good enough.

Check out this page: http://code.google.com/p/svgpan/. It does exactly what you asked for.