Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 21. Januar 2014

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

Das SVG-Format 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.

svg_javascript

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

  1. SVG ist ein spannendes Thema, zumal es in responvisven ebooks denke ich eine größre Rolle spielen wird. Rastergrafiken lassen sich partout nicht vernünftig an unterschiedliche Anforderungen anpassen, ohne einen Rattenschwanz an Größen und Qualitäten mitzudenken.

  2. Hallo,

    interessanter Beitrag!
    Gibt es Tutorials / praktische Beispiele, wie das Endergebnis einer animierten SVG aussieht?

    Viele Grüße,
    iar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.