SVG SMIL Animationen

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.

18-12-15 SITEMAP

Ist SMIL tatsächlich planmäßig gestorben?

Die Blink Entwickler hatten laut und deutlich gedroht, SMIL unter den Teppich zu kehren, aber dann still und leise einen Rückzieher gemacht. So wirken SVG-SMIL-Animationen auch 2020 immer noch in Chrome, Firefox und Safari. Für die Microsoft-Entwickler war die Ankündigung der Blink-Entwickler das Signal, gar nicht erst mit der Integration von SMIL anzufangen.

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, CSS kann aber nicht alle SVG-Attribute animieren.

Für die brodelnde Flüssigkeit im Hexenkessel greift SMIL mit der Animation des d-Attributs des Pfads:

<path d="m 268,139 c -17,0 -35,15 -59,15 -23,0 -41,-16 -57,-16 -14,0 -23,16 -43,16 5,36 47,78 100,78 53,-0 89,-24 105,-78 -20,10 -29,-15 -46,-15 z">
  <animate 
     attributeName="d"
     dur="5s"
     repeatCount="indefinite"
     values="m 268,139 c -17,0 -35,15 -59,15 -23,0 -41,-16 -57,-16 -14,0 -23,16 -43,16 5,36 47,78 100,78 53,-0 89,-24 105,-78 -20,10 -29,-15 -46,-15 z;
             m 268,166 c -17,0 -35,-20 -59,-20 -23,0 -41,27 -57,27 -14,0 -24,-0 -43,-18 5,36 47,78 100,78 53,-0 89,-24 105,-78 -23,16 -29,12 -46,11 z;
             m 268,139 c -17,0 -35,15 -59,15 -23,0 -41,-16 -57,-16 -14,0 -23,16 -43,16 5,36 47,78 100,78 53,-0 89,-24 105,-78 -20,10 -29,-15 -46,-15 z"
     keyTimes="0; 0.5; 1" />
 </path>

SMIL-Animationen können miteinander verbunden oder verkettet (chained) werden und kennen ähnliche Events wie Javascript.

msng
<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“.

SVG-Animationen 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 } );

Neben Velocity gibt es jede Menge Javascript-Libraries, die SVG zu komplexen Animationen verhelfen.

Da Javascript in externen Dateien nicht mehr ausgeführt wird, sind sie immer nur ein Fall für Inline-SVG oder SVG in einem iFrame.

SVG-Animation entlang eines Pfads

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. Da helfen nur ein Hexenkreis und Runen oder Plugins.

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.

Looping!

Das Starten einer Animation beim Klick-Event fehlt in CSS, auch wenn es durch einen Klick auf eine HTML-Checkbox simuliert werden kann.

<animateMotion
    dur="10s" 
    rotate="auto-reverse" 
    begin="button.click+0s">
    <mpath xlink:href="#route"></mpath>
 </animateMotion>

Blink kickt SMIL-Animation

Die Blink-Entwickler kündigten 2015 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, die Animation entlang eines Pfads ist auf Chrome beschränkt. CSS hapert zudem gewaltig bei der Synchronisation komplexer Abläufe.

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

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 die Kehrtwende der Blink-Entwickler gut war. 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.

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 dann sollten 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
2019-11-16 SITEMAP BLOG