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:symbols

Example for use of symbols


This example shows the use of symbols. Symbols are predefined within a "<defs>" section but not rendered. Any SVG statement may go into the symbol section. Each symbol definition may be instantiated and rendered later in the file as many times you like.

More cartographic symbols can be found in the Cartographic Symbol Collection.

Files used

Right-click, save ...

Technical Details

In order to define symbols one can use any SVG construct and combine different basic geometric elements. The symbols, defined in a <def> section, are not rendered themselves, only their instantiates. For the symbols to be referenced, they, of course, need a unique identifier. See a symbol definition below:

<defs>
   <symbol id="symbolRect" overflow="visible">
     <rect x="-3000" y="-3000" width="6000" height="6000" style="fill:rgb(240,65,25);
     fill-opacity:0.8;stroke:rgb(0,0,0);stroke-width:300" />
  </symbol>
   <symbol id="symbolCirc" overflow="visible">
     <circle cx="0" cy="0" r="3000" style="fill:rgb(12,166,107);fill-opacity:0.8;
     stroke:rgb(0,0,0);stroke-width:300" />
   </symbol>
</defs>

The <overflow> parameters tells to render the whole symbol, not only a quarter of it. There are other ways to define symbols (incl. using a separate viewBox for the symbol), the presented solution has the advantage that it centers the instantiates around the defined position. Note that the symbols are defined around the origin (0/0).

In order to instantiate a symbol (or other objects) one needs to set a reference to a symbol definition with the <use>-tag. This also sets the position of the instantiated symbol. The centralized symbol definition means, that it is easy to modify all symbols at once by simply changing the symbol definition. See code for symbol instantiation below (note that the y-axis uses an offset value!):

<g id="staedteRect">
  <use id="Zurich" x="682500" y="53500" xlink:href="#symbolRect"/>
  <use id="Basel" x="612000" y="33500" xlink:href="#symbolRect"/>
  <use id="Genf" x="499500" y="181000" xlink:href="#symbolRect"/>
  <use id="Bern" x="604500" y="106000" xlink:href="#symbolRect"/>
</g>
<g id="staedteCirc">
  <use id="Luzern" x="665000" y="89000" xlink:href="#symbolCirc"/>
  <use id="St. Gallen" x="748000" y="46500" xlink:href="#symbolCirc"/>
  <use id="Chur" x="759500" y="109000" xlink:href="#symbolCirc"/>
  <use id="Lugano" x="718500" y="206500" xlink:href="#symbolCirc"/>
</g>



Last modified: Wednesday, 02-Apr-2003 11:04:54 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/svg/samples/symbol.shtml
del.icio.us Add this page to del.icio.us