Image map to navigate on SVG document

I have a huge SVG document and I would like to be able to quickly navigate on this document using an accompanying thumbnail image, just like an image map with clickable areas . Like Photoshop's Navigator palette (thx Phrogz)

The problem is that I have no idea how to navigate on the SVG document...

I w开发者_如何学JAVAas thinking of using named <g> tags in my SVG document that would be the link between the image to the SVG. Something like that.

Do you have any idea?

There are a variety of ways to accomplish this. Here's what I would do:

1. Place your SVG contents in an <svg> element within your document.

2. Draw a rectangle over your thumbnail (which you might rasterize if your SVG file has a lot of data and drawing it scaled down causes poor performance).

3. Use JavaScript to detect clicks/drags in the thumbnail and move the rectangle over it.

4. Based on the ratio of the rectangle's placement with respect to the thumbnail, adjust the viewBox attribute on your SVG contents.

Actually, if it were me, I'd embed my SVG in XHTML and use one SVG document for the contents and either another SVG document for the thumbnail palette, or even just an HTML image and bordered div for the thumbnail.