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

SMIL-Animationen – wieder auferstanden

Die Blink-Entwickler hinter Chrome 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 2021 in allen modernen Browsern.

SMIL (»smile«) ist Teil der SVG-Spezifikation und animiert Grafiken ohne Script auf der Basis von XML-Elementen – als »deklarative Animationen«. Nun kann SVG zwar auch mit CSS und Javascript animiert werden, CSS kann aber nur die SVG-Attribute animieren, die in einem style-Attribut / style-Element definiert werden können.

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 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 und Content Management Systeme wie WordPress SVG von Haus aus laden, stehen die Social Media weiterhin auf JPG, GIF, PNG und WebP. Facebook, Twitter, Google+ und selbst Pinterest nehmen SVG nicht zur Kenntnis. Da helfen nur ein Hexenkreis und Runen oder Plugins.

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 auch 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 wollte SVG Animationen mit SMIL zugunsten eines weiteren Scripteinsatzes aufs Abstellgleis schieben.

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
2022-04-15 SITEMAP BLOG