main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:viewBox

Example for viewbox control

Viewbox, zoom to details: Left the map from the first example with edges indicating the extend of the detail views for the "Bundesländer" Salzburg (black) and Vorarlberg (green). You can choose clicking on one of the two rectangles, either directly within the SVG-Graphics, or from the list below.

Files used

Right-click, save ...

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:

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 W3C-SPEC for more detailed explanations on the use of viewports and viewboxes.

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




Last modified: Wednesday, 22-Nov-2006 11:38:28 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/samples/viewbox.shtml