SVG/Tutorials/Animation

Aus SELFHTML-Wiki
< SVG‎ | Tutorials
Wechseln zu: Navigation, Suche

Um SVG zu animieren, können Sie auf mehrere, sich zum Teil ergänzende Technologien zurückgreifen.

Animationen mit SMIL[Bearbeiten]

In der SVG-Welt gibt es mit SMIL (auszusprechen wie englisch: smile - lächeln) die Möglichkeit Elemente direkt zu animieren. Dies hat den Vorteil, dass keine externen (JavaScript)-Scripte eingebunden werden müssen und so Animationen selbst in eingebetteten img-Grafiken möglich sind.

  • SVG 1.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Leider wurde SMIL, obwohl bereits 2001 als Standard vom W3C festgelegt, nie vom Internet Explorer implementiert, da dieser mit XAML einen alternativen Ansatz verfolgte.

Zusätzlich kündigte Google an, die Unterstützung für SMIL aus der Blink-Engine zu entfernen, um so die Perfomance bei Leistungstests zu verbessern[1].

Animationen sollen künftig mit der Web Animations-API oder mit CSS-Animations erfolgen. Allerdings gibt es mittlerweile Polyfills, die den Einsatz von SMIL für alle Browser ermöglichen.

Polyfills für SMIL[Bearbeiten]

Beispiel
   <script type="text/ecmascript" xlink:href="http://www.codedread.com/lib/smil.user.js"></script>

Um FakeSmile zu verwenden, können Sie es mit einer Zeile JavaScript von einem CDN einbinden.

Fazit[Bearbeiten]

Vorteile

  • Komplexe Animationen, z. B. entlang von Pfaden, möglich.
  • Relative Positionierung zur Viewbox in % möglich.
  • Fast alle Attribute können animiert werden.
  • Große Zahl an Optionen.

Nachteile

  • Unübersichtlich, weil Animation Bestandteil des Markup ist.
  • Nicht wiederverwendbar.
  • fehlende Browserunterstützung für IE und bald auch Chrome

Animationen mit CSS[Bearbeiten]

Als Alternative bietet sich die CSS-Eigenschaft animation. Leider wird auch diese Möglichkeit für SVG-Elemente nicht vom Internet Explorer in den Versionen IE9-IE11 unterstützt.[2]. Mit einem Aussterben dieser alten Versionen gäbe es dann eine Möglichkeit Animationen in allen Browsern anzubieten.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Google führte die CSS-Eigenschaft motion-path ein, um analog zum SVG-Element AnimateMotion eine CSS-Alternative für die Animation von Objekten entlang von Pfaden anzubieten. Das W3C benannte die Eigenschaft in offset-path um. Allerdings ist hier die Browserunterstützung noch nicht zufriedenstellend.

  • CSS 3.0
  • Chrome
  • Leer
  • Leer
  • Opera
  • Leer

In diesen Tutorials finden Sie interessante Anwendungsbeispiele:

Fazit[Bearbeiten]

Vorteile

  • Animation kann in das Dokument-Stylesheet integriert werden.
  • Kompakte, einfache Syntax.
  • Einmal definieren, mehrmals anwenden.

Nachteile

  • Es können nur wenige Eigenschaften animiert werden.
  • Positionierung nur über Transforms.
  • CSS Transforms heben SVG Transformationsattribute auf.
  • keine Browserunterstützung bei IE und Edge

Animationen mit JavaScript[Bearbeiten]

Animationen mit JavaScript haben den Vorteil, dass sie zum Teil hardware-optimiert laufen und so schneller sind. Nachteilig ist, dass sie immer in Webseiten eingebunden werden müssen und keine eigenständigen, animierten SVG-Grafiken mehr in img- oder object-Elementen eingebunden werden können.




Quellen[Bearbeiten]

  1. google: blink-dev Intent to deprecate: SMIL vom 28.04.2015
  2. microsoft.com CSS Transitions & Animations for SVG elements

Weblinks[Bearbeiten]