SVG-Animation mit SMIL

Vorbemerkung zur Browserunterstützung

Die hier behandelte Möglichkeit der SVG-Animation wird durch alle modernen Browser untertützt. Wie man auf http://caniuse.com/#feat=svg-smil sehen kann, ist dies teilweise schon sehr lange der Fall:

• Firefox: seit Version 4.0
• Chrome: seit Version 5.0
• Safari: seit Version 6.1
• Opera: seit Version 9.0
• iOS Safari: seit Version 6.0/6.1
• Android Browser: seit Version 3.0
• Blackberry Browser: seit Version 7.0
• Opera Mobile: seit Version 10.0
• Chrome for Android: seit Version 33.0
• Firefox for Android: seit Version 26.0

Abgesehen von der fehlenden Unterstützung beim Opera Mini und beim IE Mobile Browser ist es vor allem der Internet Explorer, der auch in der aktuellen Version 11 kein SMIL unterstützt und damit eine weitere Verbreitung und Nutzung von SMIL Animationen behindert. Ich mache daher hier lediglich einige grundsätzliche, beispielhafte Ausführungen ohne komplex und umfassend auf die SVG-Animation mit SMIL einzugehen.

Ein ganz einfaches Beispiel

Getreu dem Grundsatz, dass ein Beispiel oft mehr erklärt als lange theoretische Erklärungen, fange ich mit einem einfachen Beispiel an. Die Animation besteht aus 2 Rechtecken, die animiert werden.

Das gelbe Rechteck wird nur ein Mal bewegt, von rechts nach links, die Animation dauert 3 Sekunden. Der SVG-Code für das Rechteck einschließlich der Animation sieht so aus:

<rect id="RectElement1" x="300" y="100" width="100" height="100" fill="rgb(255,255,0)" >
<animate attributeName="x" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="300" to="0" />
</rect>

• <animate  /> wird von dem zu animierenden Objekt <rect >...  </rect> umschlossen. An Stelle eines Rechtecks kann auch jedes andere Basisobjekt animiert werden, ein Kreis, ein Pfad usw.
• <animate  /> hat verschiedene Attribute, die festlegen, welche Objekteigenschaft animiert werden soll - hier die x-Position, wann die Animation beginnt, wie lange sie dauert und in welchem Wertebereich der animierte Parameter liegen soll.
• Mit fill="freeze" wird festgelegt, dass das Rechteck am Ende der Animation nicht an den Ausgangspunkt zurückspringt.

Die Animation des grünen Rechtecks startet etwas später. Die Animation beginnt rechts unten und verläuft nach links oben. Diese Animation läuft 2 Mal ab, beim ersten Durchlauf ändert das Rechteckt auch noch die Farbe. Nach 2 Durchläufen wird das Rechteck nur noch von unten nach oben bewegt.Der SVG-Code für das Rechteck einschließlich der Animation sieht so aus:

<rect id="RectElement2" x="300" y="500" width="50" height="50" fill="rgb(0,255,0)" >
<animate attributeName="x" attributeType="XML" begin="1s" dur="3s" fill="freeze" from="300" to="0" repeatCount = "2"/>
<animate attributeName="y" attributeType="XML" begin="1s" dur="3s" fill="freeze" from="100" to="0" repeatCount = "indefinite" />
<animate attributeName="fill" attributeType="XML" begin="1s" dur="3s" from="rgb(0,255,0)" to="rgb(0,0,255)"/>
</rect>

Zunächst ist unschwer zu erkennen, dass dem Rechteck drei Animationseigenschaften zugeordnet sind:

• für die x-Achse
• für die y-Achse
• für die Farbe

Durch die unterschiedliche Häufigkeit, festgelegt mit repeatCount ergeben sich die oben beschriebenen unterschiedlichen Kombinationen.