SVG SMIL Animationen

Eigentlich wären SVG SMIL-Animationen ein perfekter Nachfolger für die animierten GIFs und fast vergessenen Flash-Animationen. Sie brauchen kein Beiwerk, kein Javascript, kein CSS. Alles in einer Datei.

Ist SMIL tatsächlich gestorben?

Die Blink Entwickler hatten laut und deutlich gedroht, SMIL unter den Teppich zu kehren, aber dann still und leise einen Rückzieher gemacht.

Alternativen sind Velocity.js, motionPath, CSS und Javascript, Libraries wie GreenSocks und snap.svg

Eine Browserlinie spielt allerdings nicht mit. Wer dreimal raten muss, liegt richtig: IE11 und Microsoft Edge lassen die Finger von SMIL. Jetzt setzen die Blink-Entwickler noch eins drauf, möchten SVG-Animationen absetzen und unter den Teppich kehren. Microsoft hatte SMIL kurz vorübergehend auf dem Plan, aber nach dem Fallrückzieher der Blink-Entwickler hat auch Microsoft SMIL in die Ecke gestellt.

SMIL (»smile«) ist Teil der SVG-Spezifikation und animiert Grafiken ohne Script – nur auf der Basis von XML-Elementen – als »deklarative Animationen«. Nun kann SVG zwar auch mit CSS und Javascript animiert werden, aber CSS-Animationen greifen nicht bei allen SVG-Attributen.

<path d="">
   <animateTransform attributeName="transform" 
         attributeType="XML" 
         type="rotate" 
         begin="catbody.mouseover" 
         from="0 1240 1120" 
         to="60 1240 1120" 
         dur="2s"
         restart="never"
         fill="freeze" 
         id="tailf" 
         keySplines="0 0 0.58 1" 
         calcMode="spline" />
   <animateTransform attributeName="transform" 
         attributeType="XML" 
         type="rotate" 
         begin="tailf.end" 
         from="60 1240 1120" 
         to="0 1240 1120" 
         dur="2s"
         restart="never"
         fill="freeze" />
</path>

Die Schwarze Katze hat mitsamt Animationen gerade mal 31 Zeilen (9KB).

SVG SMIL Animationen werden durch klassische Events wie begin=“catbody.mouseover“ gestartet und zudem in Abhängigkeit von Events wie begin=“tailf.end“.

FakeSmile – PolyFill für SMIL

Fake Smile von David Leunen verschafft der SVG-Katze dann doch den Klick in IE und versetzt die Luftballons in Bewegung: Fakesmile ist nicht gerade taufrisch, sondern schon 2008 gescriptet (46KB, nicht minifiziert), aber es bringt IE ab Version 9 SVG SMIL Animationen näher. Das Script wird in den Fuß der Seite gesetzt

<script src="/smil.user.js"></script>

oder direkt in die SVG-Grafik

<svg xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="100%" height="100%" viewBox="0 0 2287 1276">
<script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js" />
…
</svg>

ballo.svg (7KB)

SVG in Social Media und CMS

SVG ist die goldene Gans für animierte Grafiken, aber obwohl SVG heute von allen modernen Browsern unterstützt wird, stehen die Content Management Systeme von WordPress über Drupal bis Joomla und Social Media weiterhin auf JPG, GIF, PNG und selbst Flash. Die Drupal-Entwickler sehen SVG sogar als Gefahr an, da es XML und reiner Text ist (?). In WordPress helfen immerhin ein Hexenkreis und Runen, SVG als Beitragsbild einzusetzen.

Bildarchive bleiben ebenfalls weiterhin außen vor: von Flickr bis zur modernen Online-Galerie Koken. Facebook, Twitter, Google+ und selbst Pinterest nehmen SVG nicht zur Kenntnis.

.

Blink kickt SMIL-Animation

Die Blink-Entwickler kündigten vor ein paar Wochen die Absicht an, SMIL-Animationen abzusetzen: »We intend to deprecate SMIL animations in favour of CSS animations and Web animations«. SVG könne genauso gut mit CSS und Javascript animiert werden.

SVG-Animation mit CSS sind allerdings Grenzen gesetzt – Pfade lassen sich mit CSS nicht ohne Weiteres animieren, CSS hapert bei der Synchronisation und Animation komplexer Abläufe.

Mit IE funktionieren CSS Transformationen von SVG-Elementen nur beim SVG transform-Attribut (und das auch nur bei 2D-Transformationen).

Hier erreicht FakeSmile IE nicht: rotate=“auto-reverse“ geht nicht.

Internet Explorer richtet das Flugzeug nicht am Pfad aus.

„That is, script-based animation opens the door to simple as well as complex animation possibilities. Because of this, and for other reasons (such as CSS animations), Internet Explorer does not support declarative animation. Undeniably, there can be more work associated with script-based animation, but once these scripting techniques have been mastered, you can implement animations impossible using purely declarative animation techniques.“ Basic SVG animation

Ich habe keine Idee, wozu diese Kehrtwende der Blink-Entwickler gut ist. SVG Animationen mit SMIL funktionieren in allen Browsern außer Internet Explorer: Firefox, Safari, Opera, Chrome. Die geringe Zahl an Anwendungen im Web ist kein Hinweis darauf, dass SMIL überflüssig ist, sondern liegt an der mangelnden Unterstützung durch Internet Explorer. Das Polyfill funktioniert nicht, wenn SVG in einem img-Tag liegt.

Chrome hat MathML bereits mit Hinweis auf MathJax aufgegeben, lässt uns mit position: sticky in der Luft hängen, kümmert sich nicht um so läppische Feinheiten wie Silbentrennung und jetzt sollen SVG Animationen mit SMIL zugunsten eines weiteren Scripteinsatzes aufs Abstellgleis geschoben werden.

Ich wandle mal ein Zitat der Google-Entwickler etwas ab

Chrome is like Game of Thrones, fall in love with it and hope it doesn’t kill your favorites

Original von Google Developers auf Twitter

SVG mit Velocity.js

Velocity.js animiert HTML und SVG mit und ohne jQuery – auf jeden Fall aber in jQuery-Syntax. Mit jQuery verbessert Velocity.js die Performance, denn komplexe Animationen mit jQuery ruckeln und stottern schnell.

Ohne jQuery ändert sich die Syntax nur um einen Tick.

// Animation mit jQuery
$('#head').animate ( { rotateZ: "-75deg" }, { duration: 2000 } );

// Animation mit jQuery und Velocity.js
$('#head').velocity  {  rotateZ: "-75deg" }, {duration: 2000 } );

// Animation mit Velocity.js, ohne jQuery
Velocity ( head,     {  rotateZ: "-75deg" }, {duration: 2000 } );

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

2 Gedanken zu „SVG SMIL Animationen“

  1. CBergh – 14. März 2016

    Hi, das ist ja alle ganz schön verschwommen. Jetzt funktionieren die Animationen in IE Edge nicht mehr, in IE11 gibt es noch mit FakeSmile und velocity.js, jetzt geht gar nichts mehr. Schon etwas gefunden? Christophe

    • Haessler – 15. März 2016

      Hi CBergh, es ist ein einziges Desaster. Probleme gibt es sowohl mit Velocity.js als auch mit fakeSmile. Für SVG-Animationen mit Velocity.js gibt es einen Fix, der bei mir funktioniert, aber bei fakeSmile greift die neue Version auch nicht mit Microsoft Edge.Wenn du Animationen mit FakeSmile in Edge ans Laufen bringst, wäre ich dankbar für Tipps! Ulrike