SVG

Links

• SVG-Referenz (Mozilla)

Anklickbare Bereiche

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  style="position:absolute;" width="271" 
  height="599" pointer-events="visible">
  
  <a xlink:href="http://en.wikipedia.org/wiki/Northern_Ireland" 
  xlink:title="Northern Ireland">
    <polygon id="area_ni" class="area" points="20,312 23,301 51,287 63,289 84,329 64,353 45,351 38,340 28,350 10,344 1,330 10,314">
      <title>Northern Ireland</title>
      <desc>Map of Northern Ireland</desc>
    </polygon>
  </a>
  …
</svg>

Elemente

<line x1="10" y1="20" x2="30" y2="40" stroke="green" stroke-width="2" />
<text x="10" y="20" fill="green" font-size="10">This is my text</text>
<rectangle x="10" y="20" width="10" heigth="20" style="stroke=green;stroke-width=2" fill="red" fill-opacity="0.5" />
<polygon fill="red" fill-opacity="0.5" style="stroke=green;stroke-width=2" points="10,10 20,20 30,10" />
<image x="0" y="100" href="mdn_logo_only_color.png" height="200" width="200" />

Style

<style>
  circle { fill: gold; stroke: maroon; stroke-width: 2px; }
  .heavy { font: bold 30px sans-serif; }
</style>

<circle cx="5" cy="5" r="4" />
<text class="heavy" x="10" y="20">