topical media & game development
lib-present-graphic-svg-viewbox.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="imagetoolbar" content="no">
<link rel="icon" href="/srv/img/favicon.gif" type="image/gif">
<!--additional header info goes here-->
<meta name="keywords" content="cartography, kartographie, cartographie, map, karte, carte, svg, scalable vector graphics">
<meta name="description" content="links on cartography by carto:net">
<style type="text/css">
body {background-image:url('http://www.carto.net/srv/img/backmap.gif'); background-repeat:no-repeat; background-color:#ffef95; font-family:Arial,Helvetica,Geneva,sans-serif;color:#B42D25; }
/*B42D25 ~ rgb(180,44,37) bordeauxrot*/
/*161682 ~ rgb(23,23,130) dklblau */
/*168C16 ~ rgb(23,140,23) dklgruen */
/*ffef95 ~ rgb(255,239,149) bg-gelb */
a {text-decoration:underline; color:#168C16; background: transparent}
h2 a {text-decoration:none;}
.inpage { color:#168C16;}
.expage { color:#161682;}
a:visited {text-decoration:none;}
/*
a.inpage:visited {color:#6C6F12; background: transparent}
a.expage:visited {color:#6C125D; background: transparent}
*/
@media screen { /* hide from IE3 */
a[href]:hover { background: #ffa }
}
.lde {background-image:url('http://www.carto.net/srv/img/back_l_de.gif'); }
.lfr {background-image:url('http://www.carto.net/srv/img/back_l_fr.gif'); }
.len {background-image:url('http://www.carto.net/srv/img/back_l_en.gif'); }
.les {background-image:url('http://www.carto.net/srv/img/back_l_es.gif'); }
.higher { font-weight:bold; } /*TO BE REMOVED*/
.bigger { font-weight:bold; }
.smaller { font-size:small;}
.chrihelptd { background-color:#FFEF95; } /*tabellen hintergrund in christans hilfen sollet allgem hintergrund entsprechen*/
.newspostit { background-color:#f6ffd8;}
p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,b,i,.keepnormfontcolor { font-family:Arial,Helvetica,Geneva,sans-serif; color:#B42D25 }
tt,pre { font-family:"Courier New",Courier,monospace; color:#B42D25; }
.info { border:1px solid; background-color:#eeeeee; padding:40px; margin:0px; }
.info tt, .info pre { font-family:"Courier New",Courier,monospace; color:blue; }
</style>
<script type="text/javascript">
function showsvg(coo){
document.embeds['svgmap'].getSVGDocument().getElementById('cont').setAttribute('viewBox',coo);
}
function showHiLit(name){
document.getElementById('sbgHl').innerHTML = ' ';
document.getElementById('vabHl').innerHTML = ' ';
document.getElementById('ostHl').innerHTML = ' ';
document.getElementById(name+'Hl').innerHTML = 'Now visible';
}
</script>
<title>carto:net -
Example for viewbox control
</title>
</head>
<body><a name="top"></a>
<table width="100%">
<tr>
<td align="left">
<img src="http://www.carto.net/srv/img/navig.gif" alt="" usemap="#navig" border="0" width="600" height="111">
</td>
</tr>
</table>
<!-- ONLY navig.gif IMG NEEDED NORMALLY -->
<map name="navig">
<area shape="rect" coords="226,14,585,66" href="http://www.carto.net/" target="_top" alt="main page - page initiale - hauptseite - página principal">
<area shape="rect" coords="272,77,433,106" href="http://www.carto.net/projects/" alt="projects - projets - projekte - proyectos">
<area shape="rect" coords="454,77,598,106" href="http://www.carto.net/authors/" alt="authors - auteurs - autoren - autores">
<area shape="rect" coords="130,77,253,106" href="http://www.carto.net/papers/" alt="papers - exposés - berichte - papeles">
<area shape="rect" coords="25,77,109,106" href="http://www.carto.net/help/" alt="help - aide - hilfe - ayuda">
</map>
<h2 class="sitemap"><a href="/">carto</a><span class="expage">:</span><a href="/papers/">papers</a><span class="expage">:</span><a href="/papers/svg/">svg</a><span class="expage">:</span><a href="/papers/svg/samples/">examples</a><span class="expage">:</span><a href="/papers/svg/samples/#base">basic</a><span class="expage">:</span>viewBox</h2>
<h2>Example for viewbox control</h2>
<table border="0" cellpadding="8" cellspacing="0">
<tr>
<td align="center" valign="top">
<embed width="350" height="176" src="viewbox.svg" NAME="svgmap" type="image/svg+xml">
</td>
<td>
<p><b>Viewbox</b>, 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.
<ul>
<li><a href="javascript:showsvg('-766 860 1190 1020');showHiLit('sbg');">Jump to Salzburg</a> <span id="sbgHl"> </span></li>
<li><a href="javascript:showsvg('-2361 1100 580 810');showHiLit('vab');">Jump to Vorarlberg</a> <span id="vabHl"> </span></li>
<li><a href="javascript:showsvg('-2361 0 4625 2336');showHiLit('ost');">Jump back to Austria</a> <span id="ostHl"> </span></li>
</ul>
</td>
</tr>
</table>
<div class="info">
<h4>Files used</h4>
<p>Right-click, save ...</p>
<ul>
<li><tt><a href="viewbox.shtml">viewbox.shtml</a></tt></li>
<li><tt><a href="viewbox.svg">viewbox.svg</a></tt></li>
<li><tt><a href="x_austria_relief.png">x_austria_relief.png</a></tt></li>
</ul>
<h3>Technical Details</h3>
<p>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.</p>
<p>The outermost <tt>svg</tt> tag has a <tt>viewBox</tt> attribute (note the upper case "B", tag
and attribute names are case sensitive!). <tt>viewBox</tt> has one value with 4 blank separated values, here <tt>-2361 0 4625 2336</tt>.
These values are expressed in the coordinate system defined by the graphic's elements below. The values stand for:</p>
<ul>
<li>x (the first)</li>
<li>y (the second)</li>
<li>width (the third)</li>
<li>height (the fourth)</li>
</ul>
<p>When loaded and no other attributes are set on the <tt>svg</tt> tag, the viewer shall try to fit the extent defined by
the <tt>viewBox</tt> values into the viewport offered. In our case here it is an embed inside an html page of 350*176px.
If you load the <a href="viewbox.svg">svg file into a new window</a>, this extent will be fitted into that window.</p>
<p>The little javascript (<tt>showsvg(coo)</tt>) that permits jumping to new views directly acts on the <tt>viewBox</tt> attributes</p>
<h4>Further possible statements for controlling the view:</h4>
<p>As with text-search one can also refer directly to objects with links, in a way one already knows from
HTML-anchors: <tt>mySvg.svg#MyNamedObject</tt>. Planned are also jumps with
coordinate-parameters: <tt>myDrawing.svg#svgView(viewBox(0,200,1000,1000))</tt>. Those and other functionality
shall be implemented in newer versions of the Adobe SVG-viewer.</p>
<p>See also <a href="http://www.w3.org/TR/SVG/coords.html#ViewportSpace">W3C-SPEC</A> for more detailed explanations
on the use of viewports and viewboxes.</p>
<p>A good tutorial in graphics coordinate sytems, viewport and viewboxes has been set up by Peter Schonefeld: <a href="http://www.digitalcraft.com.au/svg/tutorials/viewingSVG.asp">Viewing SVG</a>.</p>
</div>
<br><br>
<table width="100%">
<tr>
<td align="left">Last modified:
Wednesday, 22-Nov-2006 11:38:28 CET
<br>© <a href="http://www.carto.net/#en_w3">carto<span class="expage">:</span>net</a> (<a href="http://www.carto.net/neumann/">andreas neumann</a> & <a href="/andre.mw/">andré m. winter</a>)
<br>original URL for reference: http://www.carto.net/papers/svg/samples/viewbox.shtml>
<td align="right" valign="top"><a class="expage" href="javascript:location.href='http://del.icio.us/post?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)"><img src="http://images.del.icio.us/static/img/delicious.med.gif" width="16" height="16" align="bottom" alt="del.icio.us"/> Add this page to del.icio.us</a></td>
</tr></table>
</body></html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
