<path d="M0 0 L100 100 l5,100" />

Interaktionen verlangen, dass einzelne Elemente der Grafik ansprechbar sind. Deshalb braucht jedes Element einen eindeutige Namen, den das Attribut »id« spezifiziert. Auch unsichtbare Grafikelemente wie Gruppen oder Animationen können Namen tragen.

Das ist recht praktisch für Grafiken, in denen ein Element mehrfach erscheinen soll – die SVG-Dateien werden kleiner. Dazu definiert man in einem »defs«-Abschnitt einen Pfad und vergibt einen Namen. Mit »defs« definierte Tags werden erst bei einem späteren Aufruf durch »use« oder »xlink:href« gezeichnet, nicht schon bei der Definition:

<use xlink:href="#TextPath" fill="none" stroke="blue" />

Das »use«-Tag erlaubt es, mit zusätzlichen Attributen das Aussehen des Pfads zu ändern oder ihn zum Beispiel mit »transform« zu verschieben. Als Attribut eines »textPath«-Tags steuert der Pfad auch das Textlayout:

<textPath xlink:href="#textPath">Entlang des Pfads geschrieben</textPath>

Bewegte Bilder

SVG ist nicht nur ein einfaches Grafikformat, es bietet auch verschiedene Wege an, um Bilder interaktiv zu gestalten. Neben dem »a«-Tag für normale Links unterstützt SVG einfache Animationen mit »animate« und verwandten Tags. Das Beispiel spezifiziert einen Animationspfad für ein Rechteck:

<rect ...>
  <animateMotion path="M0 0 Q10 10 20 20" />
</rect>

Richtig mächtig wird SVG aber erst durch seine Skript-Unterstützung. Mit DOM (siehe Kasten “SVG und DOM”) lassen sich Skripte schreiben, die auf Interaktion des Anwenders reagieren.

Programmieren mit ECMA-Script

In SVG-Grafiken integrierte Skripte sind in ECMA-Script abgefasst, der standardisierten Variante von Javascript. Der Code steht innerhalb von »script«-Tags.

<script type="text/ecmascript"> <![CDATA[
   ... Skript-Code ...
]]> </script>

Zu beachten ist dabei die Kennzeichnung »text/ecmascript«, die die Art des Skripts angibt.

Listing 3 zeigt eine SVG-Grafik, die auf zwei Mausereignisse reagiert: gedrückte (»onmousedown«) und losgelassene (»onmouseup«) Maustaste. Sobald eines der beiden Ereignisse über dem grünen Kreis (»circle«, Zeile 25) eintritt, wird die Funktion »onEvent()« ausgeführt, die zwei Parameter besitzt (Zeile 10). Für die Ausführung sorgt die Gruppierung mit dem »g«-Tag, das in seinen Attributen die Event-Handler festlegt, siehe Zeilen 23 und 24. Die Variable »evt« steht für das ausgelöste Ereignis. Sie wird benötigt, um ein Objekt des gesamten SVG-Dokuments zu erhalten:

var doc = evt.getTarget().getOwnerDocument();

Das zweite Argument ist die ID des zu verändernden Objekts: Abhängig vom Ereignis wird das linke oder rechte Rechteck (»rect«, Zeilen 27 und 28) sichtbar (»visible«) oder unsichtbar (»hidden«). Zum Auslesen von Attributen eines DOM-Objekts steht die Methode »getAttribute()« bereit (Zeile 14), zum Schreiben das Gegenstück »setAttribute()« (Zeilen 16 und 18).

01 <?xml version="1.0" encoding="UTF-8"?>
02 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
03 
04 <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg"
05     xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root"
06     width="100%" height="100%" viewBox="0 0 400 400">
07 
08   <title>Scripting Beispiel</title>
09   <script type="text/ecmascript"><![CDATA[
10     function onEvent(evt, indicatorId){
11       var doc = evt.getTarget().getOwnerDocument();
12 
13       var element = doc.getElementById(indicatorId);
14       var sichtbar  = element.getAttribute("visibility");
15       if(sichtbar == 'hidden')
16         element.setAttribute('visibility','visible');
17       else
18         element.setAttribute('visibility','hidden');
19     }
20   ]]></script>
21 
22   Klick den Kreis ;-)
23   <g onmousedown="onEvent(evt, 'links')"
24      onmouseup="onEvent(evt, 'rechts')">
25     <circle cx="50" cy="100" r="40" fill="green" stroke="black" />
26   </g>
27   <rect id="links"   x="10" y="150" width="30" height="30"  fill="blue" />
28   <rect id="rechts" x="60" y="150" width="30" height="30" fill="red" />
29 </svg>

Abbildung 6: Listing 3 im Konqueror. Ein gehaltener Mausklick blendet das linke Quadrat aus. Lässt man die Taste wieder los, verschwindet auch das rechte.