Nun gibt es wie bereits gesagt noch mehr Möglichkeiten, auf den SVG DOM zuzugreifen, als nur das interne Scripting. Die Möglichkeiten wurden ja bereits in Kapitel 2.6.1 erklärt und jetzt soll das externe Scripting mit Javascript in einer HTML-Seite, die ein SVG-Dokument einbettet, gezeigt werden.

Im Prinzip geht es wieder mal nur darum, auf das Objekt zugreifen zu können, das das SVG-Dokument beinhaltet. Zur Erinnerung, das war beim internen Scripting über die Variable evt möglich: evt.getTarget().getOwnerDocument(). Im externen Skript ist das nicht schwieriger, hier ist es praktisch, dem Tag, das das SVG-Dokument einbettet (<OBJECT> oder <EMBED>...) eine id zu geben, dann kann man über document.getElementById(jene_id) auf das Dokument zugreifen. Um dann noch das SVG-Dokument-Objekt zu erhalten, ruft man die Funktion getSVGDocument() auf:

var svgdoc = document.getElementById(Tag_id).getSVGDocument();

Beispiel 53 zeigt anhand einer SVG-Uhr das externe Scripting. Das SVG-Dokument zeichnet eine analoge Uhr mit Stunden-, Minuten- und Sekundenzeiger, die Elemente, die diese Zeiger zeichnen, haben die ids "stundenzeiger", "minutenzeiger" und "sekundenzeiger". In die HTML-Seite des Beispiels 53 ist das SVG-Dokument über ein <OBJECT>-Tag eingebunden, das die id="svgob" hat. In dieser HTML-Seite steht dann auch der Javascript-Code, der einen Timer implementiert und auf das SVG-Dokument zugreift. Da das Interesse bei diesem Beispiel nicht auf dem SVG-Code liegt, sondern auf dem Javascript-Code der HTML-Seite, wurde dieses Beispiel anders als die anderen aufgestellt: der Javascript-Code ist unter der Uhr zu sehen und ist zudem erklärt.
Der Code macht kurz gesagt folgendes: er holt sich die aktuelle Systemzeit und speichert diese in den Variablen stunden, minuten und sekunden. Dann startet er einen Timer, der jede Sekunde die Darstellung der SVG-Uhr aktualisiert. Dabei wird auf jedes SVG-Element, das einen Zeiger repräsentiert über seine id zugegriffen (svgdoc.getElementById('stundenzeiger')...) und das Attribut transform auf einen entsprechenden Rotations-Wert gesetzt (svgdoc.getElementById('stundenzeiger').setAttribute('transform','rotate('+sekunden*6+')')). Dieser Zugriff auf die SVG-Elemente findet in der Funktion setSVGUhr() statt.
Dieses Beispiel wurde unter anderem darum gewählt, weil das Timer (bzw.Intervall)-Objekt nicht im SVG-internen Scripting zur Verfügung steht, und daher ein externes Skript notwendig ist!

In Kapitel 2.6.2 Events wurde ja bereits erklärt, auf welche Arten man Event-Listener starten kann. Bisher wurde nur die Methode der "Event attributes" verwendet, d. h. direkt im SVG-Code besitzt das Element, das das Event auslösen kann, ein Attribute wie onclick etc.. Das ist beim externen Scripting nun nutzlos, aber die zweite Methode kann hier benutzt werden: Das Registrieren von Event-Listenern über das SVG-DOM. Dabei kann für jedes Objekt, das eine Element beinhaltet, die Funktion addEventListener(Event-Name, Funktionsname, 'false') aufgerufen werden. Das Beispiel 54 zeigt dies auf einfache Art und Weise, der Blume wurde ein "mousedown"-Event hinzugefügt. Einfach auf die Blume klicken!