Denis Potschien 26. Oktober 2018

SVG: So verwendest du es richtig

Das SVG-Format hat sich in vielerlei Hinsicht zu einer zeitgemäßen Alternative zu Flash entwickelt. Denn es ist nicht nur vektorbasiert, sondern ermöglicht auch Animationen und Interaktionen. Aufgrund der unterschiedlichen Möglichkeiten, Animationen zu erstellen und SVGs in ein Webprojekt einzubinden, solltest du folgende Tipps beachten, damit auch alles so funktioniert, wie es soll.

svg-smil

Animationen mit JavaScript, CSS oder SMIL?

Gleich drei Möglichkeiten gibt es, SVGs in Bewegung zu versetzen. Die einfachste Möglichkeit ist sicher die per SMIL: „Synchronized Multimedia Integration Language“. Hierbei stehen dir eigene Elemente wie„<animate>“ zur Verfügung, mit denen du sehr einfach beliebige SVG-Formen tweenen und morphen kannst. Allerdings hat Chrome SMIL in seinem Browser als veraltet („deprecated“) eingestuft, weshalb du auf SMIL lieber verzichten solltest.

<rect x="0" y="0" width="50" height="20">
  <animate attributeName="x" from="0" to="100" dur="5s"/>
</rect>

Per CSS animierst du Elemente in ähnlicher Weise, wie du es auch in Kombination mit HTML machst. Dir stehen die Eigenschaften „transition“ sowie „animation“ und „@keyframes“ zur Verfügung. Hiermit kannst du jedoch nur jene Werte per Animation ändern, du sich auch per CSS festlegen lassen – also Position und Farbe beispielsweise. Die Formen eines Polygons oder eines Pfades sind nicht per CSS-Animation veränderbar.

rect {
  animation: animation 5s infinite;
}

@keyframes animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Sowohl das SMIL- als auch das CSS-Beispiel sorgen für dieselbe Animation.

Da die Animationsmöglichkeiten also per CSS beschränkt sind, gibt es zahlreiche JavaScript-Frameworks, mit denen du komplexe SVG-Animationen realisierst. Denn per JavaScript hast du Zugriff auf alle Elemente und Eigenschaften eines SVG-Elementes.

var i = 0;

function animation() {
  document.getElementsByTagName("rect")[0].setAttribute("width", i++);
  window.requestAnimationFrame(animation);
}

Im Beispiel wird die Breite eines Rechteckes per Animation vergrößert. Selbstverständlich sind hier auch deutlich komplexere Animationen denkbar.

Davon, ob du dich für JavaScript, CSS oder gar SMIL entscheidest, hängt ab, wie du dein SVG in dein Webprojekt einbinden solltest. Grundsätzlich hast du die Möglichkeit, SVG-Grafiken beziehungsweise -Dateien wie normale Bilder einzusetzen – also per „<img>“-Element oder per „url()“-Funktion beispielsweise als „background-image“.

Allerdings gehen die Browser mit den drei Animationsmöglichkeiten je nach Einbindungsmethode ganz unterschiedlich um.

svg-animationen-browser1

Verwendest du ein animiertes SVG wie eine normale Bilddatei, werden CSS- und SMIL-Animationen nur im Chrome ausgeführt. Firefox unterstützt nur SMIL-Animationen und Internet Explorer sowie Edge unterstützen in diesem Fall gar keine Animationen.

SVG per „<object>“-Element oder inline einbinden

Die größtmögliche Unterstützung aller Animationsmöglichkeiten bietet die Einbindung einer SVG-Datei per „<object>“-Element. Alternativ – das spart dann sogar einen Request – kannst du ein SVG natürlich auch direkt in dein HTML-Dokument einbetten. In diesem Fall unterstützt auch Firefox alle drei Animationsmöglichkeiten.

svg-animationen-browser2

Internet Explorer und Edge unterstützen jedoch grundsätzlich keine CSS- und SMIL-Animationen. Daher bleibt es dort nur bei Animationen, die per JavaScript realisiert werden.

Interaktionen per JavaScript

Neben Animationen kannst du JavaScript nutzen, um eine SVG-Grafik interaktiv zu gestalten. So integrierst du Event-Listener, die beispielsweise auf Mausklicks reagieren. Damit JavaScript innerhalb einer SVG funktioniert, muss diese entweder per „<object>“-Element oder direkt inline ins HTML-Dokument eingebunden sein.

document.getElementsByTagName("circle")[0].addEventListener("click", function() {
  alert("Hallo");
}, false);

Im Beispiel wird per Klick auf einen Kreis ein „alert()“ ausgegeben.

Bindest du eine SVG-Datei per „<img>“-Element oder per CSS und „url()“ als Hintergrund ein, wird darin enthaltenes JavaScript nicht ausgeführt.

Auch wenn du eine SVG-Datei per „<object>“-Element einbindest, hast du die Möglichkeit, die darin ausgezeichneten Elemente über ein JavaScript des einbindenden HTML-Dokumentes zu steuern. Dazu steht dir die Eigenschaft „contentDocument“ zur Verfügung, die dir den Zugriff auf die Elemente der per „<object>“ oder auch „<iframe>“ eingebundenen Dateien ermöglicht.

document.getElementsByTagName("object")[0].contentDocument.getElementsByTagName("circle")[0].addEventListener("click", function() {
  alert("Hallo");
}, false);

Im Gegensatz zu CSS- und SMIL ist der Umgang mit JavaScript innerhalb von SVG in allen Browsern einheitlich gelöst.

(Artikelbild: Depositphotos)

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Vielen Dank für den ausführlichen Artikel! Hat mir sehr geholfen einen genauen Überblick über die Verwendung von SVG Grafiken zu bekommen. Jetzt bin ich schlauer :)

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.