SVG SMIL Animationen

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,… z;
            …
     keyTimes="0; 0.5; 1" />
 </path>

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

<animate attributeType="XML"
		xlink:href="#circle1"
		id="circle1animate"
		attributeName="stroke-dashoffset" 
		from="0" to="628.32" 
		dur="1.5s"
		begin="rectstroke.end"  
		fill="freeze"/>

<animateMotion 
		xlink:href="#circle1"
		id="circle1motion"
		dur="2s" 
		values="0,0; 0,-100" 
		keyTimes="0;1"
		begin="rectstroke.end + 1.5s"
		calcMode="spline"
		keySplines="0.25 0.1 0.25 1"
		fill="freeze"/>

Die SVG-Datei bringt es gerade mal auf knapp 4KB.

SVG SMIL Animationen werden auch durch klassische Events wie begin=“catbody.mouseover“ gestartet und zudem in Abhängigkeit von Events wie begin=“rectstroke.end + 1.5s“.

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.

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.

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. Die geringe Zahl an Anwendungen im Web war kein Hinweis darauf, dass SMIL überflüssig ist, sondern lag an der mangelnden Unterstützung durch Internet Explorer (RIP).

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