Files used

Right-click, save ...

• viewbox.shtml
• viewbox.svg
• x_austria_relief.png

Technical Details

One can hop between different Zooms (viewboxes), which means, that zooming and panning can be scripted. The file needs not be loaded again like in raster based mapping.

The outermost svg tag has a viewBox attribute (note the upper case "B", tag and attribute names are case sensitive!). viewBox has one value with 4 blank separated values, here -2361 0 4625 2336. These values are expressed in the coordinate system defined by the graphic's elements below. The values stand for:

• x (the first)
• y (the second)
• width (the third)
• height (the fourth)

When loaded and no other attributes are set on the svg tag, the viewer shall try to fit the extent defined by the viewBox values into the viewport offered. In our case here it is an embed inside an html page of 350*176px. If you load the svg file into a new window, this extent will be fitted into that window.

The little javascript (showsvg(coo)) that permits jumping to new views directly acts on the viewBox attributes

Further possible statements for controlling the view:

As with text-search one can also refer directly to objects with links, in a way one already knows from HTML-anchors: mySvg.svg#MyNamedObject. Planned are also jumps with coordinate-parameters: myDrawing.svg#svgView(viewBox(0,200,1000,1000)). Those and other functionality shall be implemented in newer versions of the Adobe SVG-viewer.

See also www.w3.org/TR/SVG/coords.html#ViewportSpace

A good tutorial in graphics coordinate sytems, viewport and viewboxes has been set up by Peter Schonefeld.