SVG Tutorial

Um Hyperlinks zu markieren ist, ähnlich wie in HTML-Dokumenten, das a-Element zu verwenden.
SVG verwendet die Spezifikation Xlink um Hyperlinks zu definieren. Dabei sind einfache (simple) Links möglich.

Nachfolgend die wichtigsten Attribute für das a-Element in SVG-Grafiken:

• xlink:href="URI"
     Lokalisierung der anderen Ressource (die geladen werden soll)
  
  
• xlink:title="Zeichenkette"
     eine frei wählbare Zeichenfolge zur Betitelung des Hyperlinks
  
  
• xlink:show="new|replace"
     legt fest, ob die andere Ressource in einem neuen Browserfenster (new)
     oder im aktuellen Browserfenster (replace) geladen werden soll.
  
  
• target="Framebezeichnung"
     Legt das Zielfenster (Zielframe) fest, in der die andere Ressource geladen werden soll.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="320px" height="170px" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das a-Element</title>
  <desc>Verweise in SVG-Grafiken</desc>
  <defs>
    <style type="text/css"><![CDATA[
      text {font-family:verdana; font-size:16px;}
    ]]>
    </style>
  </defs>

  <a xlink:href="webseite.html"
     xlink:title="Verweis zu einer HTML-Seite">
    <rect x="10" y="10" ry="5" width="40" height="40"
    style="fill:limegreen; stroke:black;" />
  </a>

  <a xlink:href="grafik.svg"
     xlink:title="Verweis zu einer SVG-Grafik">
    <rect x="10" y="60" ry="5" width="40" height="40"
    style="fill:mintcream; stroke:black;" />
  </a>

  <a xlink:href="http://www.w3.org/"
     xlink:title="Verweis zu www.w3.org"
     xlink:show="new">
    <rect x="10" y="110" ry="5" width="40" height="40"
    style="fill:chartreuse; stroke:black;" />
  </a>

  <text x="60" y="40">Verweis zu einer HTML-Seite</text>
  <text x="60" y="90">Verweis zu einer SVG-Grafik</text>
  <text x="60" y="140">Verweis zu www.w3.org</text>
</svg>
      

Im obigen Beispiel funktionieren 3 Rechtecke als Hyperlinks.

1. Klickt der User auf das erste, grüne Rechteck wird eine HTML-Seite des Namens webseite.html (die sich im selben Verzeichnis befindet, in der auch die Grafik liegt) im aktuellen Browserfenster geladen.
2. Beim Klick auf das zweite, blaue Rechteck wird eine andere SVG-Grafik des Namens grafik.svg im aktuellen Browserfenster geladen.
3. Das dritte, rote Rechteck verweist auf die Startseite des W3C im Internet. Diese Seite wird in einem neuen Browserfenster geladen.