von Andy Pillip

Animierte SVG mit animation und keyframes

Welche Browser spielen die Animation ab?

In SVG lassen sich mit eingebettetem CSS und der animation Eigenschaft die Attribute der SVG-Elemente animieren, so dass die Datei an sich schon eine Animation beinhaltet.

Also kann man die SVG-Datei dann auch mit einem einfachen <img> einbinden, und einige Browser spielen die Animation dann sogar ab. Ein Vorteil bei der Arbeit mit CMS.

Die Außenlinien der Buchstaben Z, T und S werden in dieser Animation nachgezeichnet.

Das obige Bild (© Crafft Kommunikation) ist mittels <img> eingebunden und einige Browser zeigen die Animation. In den anderen Browsern ist zumindest der fertige Schriftzug zu sehen.

CSS Tricks zum Nachfahren von Linien.

Die Unterstützung dieser SVG-Animationen mit CSS ist durchschnittlich – und sollte also nur verwendet werden, wenn per CSS vor der animation sinnvolle Eigenschaften zugewiesen werden, sodass die Animation auch als Standbild funktioniert.

Mittels @keyframe { from } können diese Fallback-Eigenschaften wieder zurück gesetzt werden (im ersten Frame also). Die Browser mit Animation scheinen den Zustand vor dem ersten Frame gar nicht erst zu rendern, es gibt also keinen wahrnehmbaren Sprung in der Animation.

In meinem Beispiel passiert das folgendermaßen:
path {
  stroke-dashoffset: 0;
}

@keyframe dash-short {
  from {
    stroke-dashoffset: 30;
  }
}

Browserunterstützung von CSS Animation in SVG-Dateien

Browser Animation im <img> Animation im <svg>
Desktop    
Firefox 48 Erstes Frame wird gezeigt ja
Chrome 43 ja ja
Opera 12.16 nein nein
Opera 37 ja ja
Vivaldi 1.1 ja ja
IE 11 nein nein
Edge 13 nein nein
Safari 8 nein nein
Safari 9 ja ja
iOS    
9 Safari ja ja
8 Safari nein nein
9 Chrome ja ja
8 Chrome nein nein
Android 6    
Chrome 50 ja ja
Firefox 48 Erstes Frame wird gezeigt ja
Windows mobile    
8.1 IE nein nein

Für Firefox muss die Animation mittels animation-delay: .01s um einen Bruchteil einer Sekunde verzögert werden, weil das erste Frame zwar brechnet wird, die Animation aber nicht weiter läuft.