Files used

Right-click, save ...

• symbol.shtml
• symbol.svg

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>