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

BrowserAnimation im <img>Animation im <svg>
Desktop  
Firefox 48Erstes Frame wird gezeigtja
Chrome 43jaja
Opera 12.16neinnein
Opera 37jaja
Vivaldi 1.1jaja
IE 11neinnein
Edge 13neinnein
Safari 8neinnein
Safari 9jaja
iOS  
9 Safarijaja
8 Safarineinnein
9 Chromejaja
8 Chromeneinnein
Android 6  
Chrome 50jaja
Firefox 48Erstes Frame wird gezeigtja
Windows mobile  
8.1 IEneinnein

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.