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.
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.
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.
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.
(dpe)