SVG-SMIL-Animationen in Chrome – Drama in 5 Akten

SMIL Animation - still working in all modern browsers

Chrome 45 hatte Anfang 2015 angekündigt, SMIL-Animationen den CSS-Animationen und Javascript zuliebe auf „Deprecated (abgelehnt)“ zu setzen und eine Warnung in die Console gesetzt. Aber SMIL dreht weiterhin seine Runden in Chrome.

18-12-15 SITEMAP

Stilllegen und Aussitzen

Die Ablehnung ist nie wirklich Kraft getreten und wurde irgendwann auf Eis gelegt. Diese Google-Taktik heißt Aussitzen und Stilllegen.

Intent to deprecate SMIL suspended

Als Grund für das Aussetzen der SMIL-Animationen gaben die Entwickler damals an:

  • „In terms of implementation, SMIL adds significant complexity to Blink“
  • „Internet Explorer does not support SMIL which limited its use for critical functionality“

Die Blink-Entwickler haben die Absicht, SMIL in den Keller zu verbannen, allerdings nie konsequent umgesetzt:

As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.

Bis auf IE (†) und alte Versionen von EDGE unterstützen alle Browser also immer noch SVG-Animationen mit SMIL. Aber da EDGE – wie auch Chrome – seit Januar 2020 auf der Blink-Engine sitzt, unterstützt EDGE am Ende doch noch SVG-SMIL-Animationen. Was für ein Auf und Ab. Oder wie wir hier am Niederrhein sagen: Rin inne Katoffeln raus ausse Katoffeln.

Veraltet, weg vom Fenster, doch nicht weg und funktioniert am Ende tatsächlich immer noch.

SMIL ist zugegebenermaßen nicht gerade übersichtlich, aber eine SMIL-Animation funktioniert nicht nur inline im HTML-Markup, sondern auch als autarkes System in einem img-Tag. Das SMIL-Element animateMotion bringt dem Flieger das Salto über dem kleinen Bergdorf bei:

<animateMotion begin="0s" dur="30s" rotate="auto" repeatCount="infinite">
    <mpath href="#eight"/>
</animateMotion>              

Javascript oder CSS als Alternativen zu SMIL-Animationen?

Aus Sicherheitsgründen wird Javascript in der Mediendatei des img-Tags nicht ausgeführt, kommt also für externe Dateien nicht in Frage. SVG-Animationen mit SMIL sind unabhängig und autark und müssen weder auf Javascript noch auf externe Libraries zurückgreifen.

CSS offset-path

Heute können wir den größten Teil der SMIL-Animationen durch CSS ersetzen. CSS offset-path ersetzt die SMIL-Animation Bewegung entlang eines Pfads. Funktioniert in allen Browsern – außer in Safari auf dem Mac. Irgendein Browser tanzt einfach immer aus der Reihe.

SVG-Animationen: SMIL vs CSS

Animationen mit reinem CSS bewegen auch SVG per img-Tag. CSS wirkt allerdings nur auf die Attribute, die in style-Attribute eingesetzt werden können. Dann haben ihre Vorzüge: Sie belasten das ausführende System weniger. Da haben wir mehr Routine, finden mehr Hinweise und Beispiele.

.movepath {
  offset-path: path( 'm116 431c0-293 448-290 669-3 221 287 672 290 672 0s-451-287-672 0c-221 287-669 293-669 3z');
     animation: floating 30s infinite linear;
  }
 @keyframes floating {
     0% { offset-distance: 0%;}
     100% { offset-distance: 100%;}
 }

Nimm Zwei: offset-path und animate-motion

Der Zeppelin dreht seine Runden sowohl mit der veralteten SMIL-Animation als auch mit offset-path, also doppelt gemoppelt. Nicht schön, aber an solche Umwege und doppelte Wege sind wir ja seit Jahrzehnten gewöhnt.

2019-11-16 SITEMAP BLOG