Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 26. Oktober 2018

SVG: So verwendest du es richtig

Das SVG-Format hat sich in vie­ler­lei Hinsicht zu einer zeit­ge­mä­ßen Alternative zu Flash ent­wi­ckelt. Denn es ist nicht nur vek­tor­ba­siert, son­dern ermög­licht auch Animationen und Interaktionen. Aufgrund der unter­schied­li­chen Möglichkeiten, Animationen zu erstel­len und SVGs in ein Webprojekt ein­zu­bin­den, soll­test du fol­gen­de Tipps beach­ten, damit auch alles so funk­tio­niert, wie es soll.

svg-smil

Animationen mit JavaScript, CSS oder SMIL?

Gleich drei Möglichkeiten gibt es, SVGs in Bewegung zu ver­set­zen. Die ein­fachs­te Möglichkeit ist sicher die per SMIL: „Synchronized Multimedia Integration Language“. Hierbei ste­hen dir eige­ne Elemente wie„<animate>“ zur Verfügung, mit denen du sehr ein­fach belie­bi­ge SVG-Formen twee­nen und mor­phen kannst. Allerdings hat Chrome SMIL in sei­nem Browser als ver­al­tet („depre­ca­ted“) ein­ge­stuft, wes­halb du auf SMIL lie­ber ver­zich­ten soll­test.

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

Per CSS ani­mierst du Elemente in ähn­li­cher Weise, wie du es auch in Kombination mit HTML machst. Dir ste­hen die Eigenschaften „tran­si­ti­on“ sowie „ani­ma­ti­on“ und „@keyframes“ zur Verfügung. Hiermit kannst du jedoch nur jene Werte per Animation ändern, du sich auch per CSS fest­le­gen las­sen – also Position und Farbe bei­spiels­wei­se. Die Formen eines Polygons oder eines Pfades sind nicht per CSS-Animation ver­än­der­bar.

rect {
  animation: animation 5s infinite;
}

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

Sowohl das SMIL- als auch das CSS-Beispiel sor­gen für die­sel­be Animation.

Da die Animationsmöglichkeiten also per CSS beschränkt sind, gibt es zahl­rei­che JavaScript-Frameworks, mit denen du kom­ple­xe SVG-Animationen rea­li­sierst. 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 ver­grö­ßert. Selbstverständlich sind hier auch deut­lich kom­ple­xe­re Animationen denk­bar.

Davon, ob du dich für JavaScript, CSS oder gar SMIL ent­schei­dest, hängt ab, wie du dein SVG in dein Webprojekt ein­bin­den soll­test. Grundsätzlich hast du die Möglichkeit, SVG-Grafiken bezie­hungs­wei­se -Dateien wie nor­ma­le Bilder ein­zu­set­zen – also per „<img>“-Element oder per „url()“-Funktion bei­spiels­wei­se als „back­ground-image“.

Allerdings gehen die Browser mit den drei Animationsmöglichkeiten je nach Einbindungsmethode ganz unter­schied­lich um.

svg-animationen-browser1

Verwendest du ein ani­mier­tes SVG wie eine nor­ma­le Bilddatei, wer­den CSS- und SMIL-Animationen nur im Chrome aus­ge­führt. Firefox unter­stützt nur SMIL-Animationen und Internet Explorer sowie Edge unter­stüt­zen in die­sem Fall gar kei­ne Animationen.

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

Die größt­mög­li­che Unterstützung aller Animationsmöglichkeiten bie­tet die Einbindung einer SVG-Datei per „<object>“-Element. Alternativ – das spart dann sogar einen Request – kannst du ein SVG natür­lich auch direkt in dein HTML-Dokument ein­bet­ten. In die­sem Fall unter­stützt auch Firefox alle drei Animationsmöglichkeiten.

svg-animationen-browser2

Internet Explorer und Edge unter­stüt­zen jedoch grund­sätz­lich kei­ne CSS- und SMIL-Animationen. Daher bleibt es dort nur bei Animationen, die per JavaScript rea­li­siert wer­den.

Interaktionen per JavaScript

Neben Animationen kannst du JavaScript nut­zen, um eine SVG-Grafik inter­ak­tiv zu gestal­ten. So inte­grierst du Event-Listener, die bei­spiels­wei­se auf Mausklicks reagie­ren. Damit JavaScript inner­halb einer SVG funk­tio­niert, muss die­se ent­we­der per „<object>“-Element oder direkt inli­ne ins HTML-Dokument ein­ge­bun­den sein.

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

Im Beispiel wird per Klick auf einen Kreis ein „alert()“ aus­ge­ge­ben.

Bindest du eine SVG-Datei per „<img>“-Element oder per CSS und „url()“ als Hintergrund ein, wird dar­in ent­hal­te­nes JavaScript nicht aus­ge­führt.

Auch wenn du eine SVG-Datei per „<object>“-Element ein­bin­dest, hast du die Möglichkeit, die dar­in aus­ge­zeich­ne­ten Elemente über ein JavaScript des ein­bin­den­den HTML-Dokumentes zu steu­ern. Dazu steht dir die Eigenschaft „contentDocument“ zur Verfügung, die dir den Zugriff auf die Elemente der per „<object>“ oder auch „<iframe>“ ein­ge­bun­de­nen Dateien ermög­licht.

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 inner­halb von SVG in allen Browsern ein­heit­lich 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.

Ein Kommentar

  1. Vielen Dank für den aus­führ­li­chen Artikel! Hat mir sehr gehol­fen einen genau­en Überblick über die Verwendung von SVG Grafiken zu bekom­men. Jetzt bin ich schlau­er :)

Schreibe einen Kommentar

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