topical media & game development
lib-present-graphic-svg-canvas.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 toggle_layer(checkbox, element_name){
//get a reference to the svg document and then to a group with the given id
var svgobj = document.embeds['printable_map'].getSVGDocument().getElementById(element_name);
if (!checkbox.checked){
// Hide layer.
svgobj.setAttributeNS(null,'visibility','hidden');
} else {
// Show layer.
svgobj.setAttributeNS(null,'visibility','visible');
}
}
</script>
<title>carto:net -
Example for Canvas and Layers
</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>layers</h2>
<h2>Example for Canvas and Layers</h2>
<table border="0" cellpadding="8" cellspacing="0">
<tr>
<td align="center" valign="top">
<embed width="350" height="176" src="lib-present-graphic-svg-canvas.svg" name="printable_map" type="image/svg+xml" />
<br>
<form name="hilite_form" action="">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td colspan="2">Visible Layers
</td>
</tr>
<tr>
<td><input type="checkbox" value="" onclick="toggle_layer(this,'relief')"> Relief</TD>
<td><input type="checkbox" value="" onclick="toggle_layer(this,'signaturen');toggle_layer(this,'schrift')"> Cities</TD>
</tr>
<tr>
<td><input type="checkbox" value="" onclick="toggle_layer(this,'fluss')"> Rivers</TD>
<td><input type="checkbox" value="" onclick="toggle_layer(this,'bundesland')"> Borders</TD>
</tr>
</table>
<script type="text/javascript">
// Make sure all checkboxes are checked whenever the page is reloaded in the browser.
for (var i = 0; i < document.hilite_form.elements.length; i++)
if (document.hilite_form.elements[i].type == 'checkbox'){
document.hilite_form.elements[i].checked = true;
}
</script>
</form>
</td>
<td valign="top">
<p>Please try with the help of this simple SVG-example the elementary functions of the Viewer:</p>
<ul>
<li><span class="bigger">Zooming</span>: with the help of the CTRL-Key (or Apple-Key) one can drag a rectangle above the area one wishes to zoom in.
<br>With the right mouse button (CTRL-Key + mouse click on the Mac) one gets a context menu, where you can choose step-by-step zooming and can go back to the original extent.</li>
<li><span class="bigger">Zoom Out</span>: like above, but with SHIFT-Key pressed.</li>
<li><span class="bigger">Panning</span>: Press the ALT-Key and move the mouse cursor while a "hand-icon" appears.</li>
<li><span class="bigger">Anti-Aliasing</span>: Maybe turned on and off with the help of the context menue. ("Higher Quality").</li>
<li><span class="bigger">Layers</span> can be turned on and off like in traditional GIS, Graphics and DTP software.</li>
</ul>
<p>To see the higher quality and precision of this vector graphics compared to traditional raster graphics, you can see the same example with a <a href="canvas_nowh.svg" target="_self">larger extent</a>. For returning to this page please use the "Back-Button" of your browser.</p>
</td>
</tr>
</table>
<div class="info">
<h4>Files used</h4>
<p>Right-click, save ...</p>
<ul>
<li><tt><a href="canvas.shtml">canvas.shtml</a></tt></li>
<li><tt><a href="canvas.svg">canvas.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>The entire source code of the SVG-File can be viewed using the context-menu (CTRL-Key and Button on the Mac). The file consists of a header, style definitions, and the geometric description of the viewed objects. We will explain the most important elements below:</p>
<h4>Just after the header, that contains definitions, version infos etc. the SVG-Elements start:</h4>
<p><tt><svg xml:space="preserve" width="350px" height="176px" ... viewBox="-2361 0 4625 2336"></tt>
<br>With this code one defines the viewing parameters, the extent of the plugin area within the html-page (in this case in pixels) and the <tt class="tech">viewBox</tt>, that defines the visible extent. The difference between the <tt class="tech">width</tt> and <tt class="tech">height</tt> coordinates and the <tt class="tech">viewBox</tt> implicitly defines the coordinate transformation: instructions can be used with different units (cm, mm, pixel, inches, etc.). The parameters in this example are derived from the internal coordinate system of the graphics software that exported the data.</p>
<p>Removing the <tt class="tech">width</tt> and <tt class="tech">height</tt> attributes and loading the SVG in the full window (without html around) gives us a graphic fitted to this window: <a href="canvas_nowh.svg" target="_self">larger extent</a>. You may resize this browser window and see the map adjusting to its new canvas.</p>
<h4>The style definitions are embedded within the SVG file (in our case):</h4>
<p><tt><style type="text/css"></tt>
<br>Classical CSS-Syntax
<br><tt> ...</tt>
<br><tt> .str7 {stroke:#1F1A17;stroke-width:3}</tt>
<br>Definition of the format <tt>str7</tt> describing an individual stroke-color and stroke-width.
<br><tt> ...</tt>
<br><tt> .fnt1 {font-weight:normal;font-size:125;font-family:'Helvetica'}</tt>
<br>Definition of a font-type named <tt>fnt1</tt>. The font-size refers to the internal <a href="viewbox.shtml">coordinate system</a> and is in this case <tt>125</tt>.
<br><tt> ...</tt>
</p>
<h4>Geometry is following:</h4>
<p><tt><g id="bundesland"></tt>
<br>The <tt><g></g></tt> tag builds a group object. Using a unique name <tt>id</tt> one can refer to the group element, change its attributes or switch it on and off.</p>
<p><tt> <path class="fil0 str6" d="M93 1085l-21 -1"/></tt>
<br>The description of a border section using a <tt>path</tt>-element: we assign two style attributes within the <tt>class<tt>M</tt> means "moveTo", because it is uppercase it means absolute coordinates, <tt>l</tt>, means "lineTo" (lower case refers to relative coordinates). In this case we therefore deal with a line-segment with two vertices.</p>
<p><tt> <path class="fil0 str6" d="M113 1084c2,9 14,23 4,29 ... -8,21 -12,31</tt><br>This <tt>path</tt>-element shares the same style attributes but has more vertices. Here we not only connect the vertices, the <tt>c</tt> statement forms together with the following coordinate pairs (tangents) a cubic Bézier curve.</p>
<h4>After additional group-elements the SVG-file is closed with:</h4>
<p><tt></svg></tt></p>
</div>
<br><br>
<table width="100%">
<tr>
<td align="left">Last modified:
Saturday, 30-May-2009 11:45:57 CEST
<br>© <a href="http://www.carto.net/#en_w3">carto<span class="expage">:</span>net</a> (<a href="/andre.mw/">andré m. winter</a> & <a href="http://www.carto.net/neumann/">andreas neumann</a>)
<br>original URL for reference: http://www.carto.net/papers/svg/samples/canvas.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}
