Denis Potschien 24. November 2015

SVG ohne SMIL: Google Chrome unterstützt den Standard nicht länger

SVG ohne SMIL: Google Chrome unterstützt den Standard nicht länger

Dass mit dem SVG-Format nicht nur statische Grafiken, sondern durchaus komplexe Animationen möglich sind, dürfte sich inzwischen herumgesprochen haben. SVG stellt gleich drei verschiedene Möglichkeiten zur Verfügung, mit denen Animationen realisiert werden können. Neben JavaScript- und CSS3-Animationen ist SMIL ein weiterer Ansatz, mit denen du Formen in Bewegung bringen kannst. Mit Chrome 45 hat Google nun SMIL-Animationen als „deprecated“ eingestuft und wird diese zukünftig nicht mehr unterstützen. Wieso ist Google diesen Weg gegangen? Was müssen Webentwickler nun wissen?

SVG ohne SMIL: Google Chrome unterstützt den Standard nicht länger

Die Geschichte von SMIL

SMIL steht für „Synchronized Multimedia Integration Language“ und stellt eine sehr einfache Möglichkeit dar, SVG-Elemente auf unterschiedliche Art und Weise zu animieren. Dazu wird eines der SMIL-Elemente – „<animate>“, „<animateMotion>“ oder „<animateTransform>“ – als Kind des zu animierenden Elementes eingesetzt. Neben einfachen Bewegungen sind auch Drehungen, Skalierungen und Formumwandlungen möglich.

<rect x="0" y="0" width="100" height="100">
  <animate attributeName="x" from="0" to="500" dur="5s" />
</circle>

Das Beispiel zeigt, wie mittels „<animate>“-Element ein Rechteck auf der X-Achse bewegt wird. Auch wenn SVG-Animationen erst seit einiger Zeit in größerem Umfang eingesetzt werden, gibt es die ersten Ansätze von SMIL bereits seit über 15 Jahren. 1999 wurde SMIL 1.0 vom W3C verabschiedet, im Jahr 2008 die derzeit aktuelle Version 3.0.

Dabei ist SMIL nicht ausschließlich für das SVG-Format geeignet, um Animationen zu realisieren. Die Auszeichnungssprache ist, wie der Name schon sagt, gedacht, um multimediale Inhalte zu implementieren. Daher kann SMIL auch für Audio- und Videoformate eingesetzt werden. So hat das HD-DVD-Format beispielsweise auf SMIL gesetzt, um interaktive Inhalte per HTML, CSS und SMIL bereitzustellen.

Mit Version 2.0 aus dem Jahr 2001 sind die Animationsmöglichkeiten für das SVG-Format zur Spezifikation hinzugefügt worden.

Drei sind einer zu viel

Trotz der einfachen Syntax und der durchaus langen Geschichte von SMIL hat Google für seinen Chrome-Browser nun entschieden, die Auszeichnungssprache nicht länger zu unterstützen. Wer seit Chrome 45 eine SVG-Grafik mit SMIL-Animation aufruft, bekommt in der Konsole der Entwicklertools einen Hinweis, dass SMIL veraltet („deprecated“) sei und man auf CSS- oder Web-Animations umsteigen solle.

chrome-smil-entwicklertools
Hinweis in den Entwicklertools von Chrome

Der Grund für den Verzicht auf SMIL ist unter anderem die nach wie vor fehlende Unterstützung aller großen Browser. Denn weder der Internet Explorer noch sein Nachfolger Edge können mit SMIL etwas anfangen und werden es auch zukünftig nicht tun. Daher bleiben Nutzer von Microsofts Browsern weiterhin ausgeschlossen, wenn SMIL eingesetzt wird.

Dazu kommt, dass es neben SMIL zwei weitere Möglichkeiten gibt, um SVG-Formen zu animieren. So gibt es die bekannten CSS3-Animationen – „transition“ und „animation“ in Kombination mit „@keyframes“ – auch für das SVG-Format.

Für komplexere Animationen, die eine Berechnung erfordern, stehen sogenannte Web-Animations zur Verfügung. Hierbei handelt es sich um Animationen, die über die „animate()“-Methode per JavaScript realisiert werden können.

Die mangelnde Unterstützung durch Microsoft und die vorhandenen Alternativen haben also dazu geführt, dass Google SMIL aufgibt.

Nachteile durch den Verzicht auf SMIL

Vieles, was SMIL kann, können CSS3 und Web-Animations auch. Einfache Bewegungen auf der X- und Y-Achse, Skalierungen und Drehungen sind problemlos per CSS3 möglich. Eine Sache stellt zumindest derzeit jedoch noch ein Problem dar. Mit SMIL ist es sehr einfach möglich, ein animiertes Morphing zwischen zwei Formen zu realisieren.

CSS3 und Web-Animations stellen eine solche Möglichkeit nicht bereit. Ohne zusätzliche JavaScript-Bibliotheken kann ohne SMIL und ohne großen Programmieraufwand ein solches Morphing also nicht erfolgen.

Was Entwickler tun sollten

Auch wenn SMIL nun als veraltet eingestuft ist, wird die Unterstützung nicht gleich aus Chrome verbannt. Aber für zukünftige Projekte sollten andere Animationsmöglichkeiten eingesetzt und gegebenenfalls auf Bibliotheken wie SVG.js oder Snap.svg zurückgegriffen werden.

snapsvg
Alternative zu SMIL: Snap.svg

In der Google-Guppe zu Chromium gibt es übrigens durchaus kritische Stimmen, welche die Chrome-Entwickler dazu auffordern, SMIL weiterhin zu unterstützen. Auch wenn SMIL bislang eher bescheiden eingesetzt wird, gibt es derzeit keine Alternativen, die den vollen Umfang der SMIL-Animationen abdecken können.

Außerdem wird kritisiert, dass die relativ einfache Anwendung von SMIL durch komplexe JavaScript-Animationen ersetzt werden müsse. Es bleibt abzuwarten, wie sich das Thema SVG und seine Animationsmöglichkeiten in den nächsten Monaten und Jahren entwickelt und wie die anderen Browserhersteller reagieren werden.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.