SVG und JavaScript: Was ist möglich, was muss beachtet werden?

Das SVG: Alles was Du über Scalable Vector Graphics wissen musst gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache sind Programmierungen innerhalb des Formates möglich.

Per JavaScript auf SVG-Elemente zugreifen

Im Grunde unterscheidet sich der Einsatz von JavaScript in einer SVG-Datei gar nicht vom Einsatz in einer HTML-Datei. Da es in der SVG-Syntax aber weder das HEAD- noch das BODY-Element gibt, wird ein JavaScript-Bereich einfach innerhalb des SVG-Elementes ausgezeichnet. Hierbei gilt wie bei HTML auch, dass auf Elemente nur dann zugegriffen werden kann, wenn diese bereits geladen wurden. Also muss der JavaScript-Bereich entweder ans Dokumentende gesetzt oder über eine Funktion per Event-Listener „load“ aufgerufen werden. Zwingend erforderlich ist jedoch, dass der JavaScript-Quelltext innerhalb eines CDATA-Abschnittes aufgeführt wird.

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", function() { … }, false);
    ]]>
  </script>
  <rect x="50" y=50" width="0" height="25" fill="red" />
</svg>

Da man SVG-Elemente wie HTML-Elemente mit Klassen und IDs ausstatten kann, lassen sich diese mit den bekannten Methoden „getElementsByTagName()“, „getElementById()“. sowie den neueren Methoden „querySelector()“ und „querySelectorAll()“ ansprechen. Attribute werden mit „getAttribute()“ ausgelesen beziehungsweise mit „setAttribute()“ zugewiesen – also alles bekannte Methoden.

window.addEventListener("load", function() {
  document.getElementsByTagName("rect")[0].setAttribute("width", "100");
}, false);

Im Beispiel wird auf das erste RECT-Element zugegriffen, welchem das „width“-Attribut mit dem Wert „200“ zugewiesen wird. Um per JavaScript Animationen zu erstellen, die SVG-Elemente in Bewegung bringen, bietet sich die Methode „requestAnimationFrame()“ an. Diese Methode ist speziell für Animationen geeignet und sorgt – anders als als beispielsweise „setTimeout()“ – dafür, dass eine Funktion immer nur dann ausgeführt wird, wenn dies für das Fortlaufen einer Animation notwendig ist.

window.addEventListener("load", function() {
  var breite = document.getElementsByTagName("rect")[0].getAttribute("width");
  function animation() {
    if (breite < 200) {
      breite++;
      document.getElementsByTagName("rect")[0].setAttribute("width", breite);
      window.requestAnimationFrame(animation);
    }
  }
  window.requestAnimationFrame(animation);
}, false);

Im Beispiel wird über „requestAnimationFrame()“ die Funktion „animation()“ solange aufgerufen, bis der „width“-Wert für das Rechteck „200“ ist. Dabei wird der „width“-Wert bei jedem Funktionsaufruf um 1 erhöht, was zu einer Animation des Rechteckes führt, bei dem die Breite auf 200 verändert wird. Auf diese Art und Weise lassen sich beispielsweise Diagramme über eine Animation aufbauen. Die einzelnen Diagrammwerte können per GET-Parameter an die SVG-Datei übergeben und per JavaScript ausgelesen werden.

Vorteil gegenüber Canvas

Zwar gibt es mit dem CANVAS-Element und den entsprechenden Zeichenfunktionen von JavaScript auch die Möglichkeit, ohne SVG-Format Formen zu zeichnen und auf ähnliche Weise zu animieren. Allerdings stellt das Canvas-Element nur eine pixelbasierte Zeichenfläche zur Verfügung. Wird das Browserfenster vergrößert dargestellt, wird die gerasterte Darstellung erkennbar.

Daher setzt zum Beispiel die Google-Charts-API für seine Diagramme ebenfalls auf das vektorbasierte SVG-Format anstatt auf Canvas.

Einbindung von SVG-Grafik in HTML-Dokument

Damit JavaScript innerhalb einer SVG-Grafik auch ausgeführt werden kann, ist es notwendig, die SVG-Grafik per EMBED- oder IFRAME-Element in ein HTML-Dokument einzubinden. Wird es per IMG-Element eingebunden, wird die SVG-Grafik zwar angezeigt, das JavaScript wird jedoch nicht ausgeführt.

Alternativ ist es möglich, eine SVG-Grafik komplett in ein HTML-Dokument einzubetten, indem der Quelltext einschließlich SVG-Element (aber ohne Doctype) an gewünschter Stelle innerhalb des HTML-Dokumentes platziert wird.

Dank JavaScript und den Animationsmöglichkeiten des SVG-Formates kann es sich zu einem adäquaten Ersatz zu Flash entwickeln, welches gänzlich ohne Plug-in auskommt und somit auch auf mobilen Geräten läuft.

(dpe)