Leitfaden für skalierbare Vektorgrafiken – Teil 1

Die SVG-Spezifikation erlaubt dynamische Änderungen an den Formen und ihren Attributen um Animationseffekte zu erzeugen. Zur Animation von Farben wie in Abbildung C verwendet man das <animateColor>-Tag.

Abbildung C: Farb-Animation

Das <animateColor>-Tag kann sowohl zur Animation von Füll- wie auch Strichfarben verwendet werden, indem man einfach den Wert von attributeName ändert. Die Dauer der Animation in Sekunden kann man mit dem Attribut dur festlegen. Mit repeatCount=“indefinite“ sorgt man dafür, dass die Animation in einer Endlosschleife ausgeführt wird.

<animateColor id="a" attributeName="fill" 
from="#efefef" to="#336699" dur="3s"
 repeatCount="indefinite"/>

Fast jedes beliebige Attribut einer Form kann mit dem <animate>-Tag animiert werden.

Abbildung D: Bewegung

In Abbildung D ist das x-Attribut des Quadrats animiert, wodurch das Quadrat sich nach rechts bewegt. Die Attribute from und to legen das Ausmaß der Bewegung fest.

<animate attributeName="x" begin="0s"
 dur="1s" from="5" to="40" repeatCount="indefinite"/>

Über die Grundlagen hinaus

Dieser Artikel ist nur auf die Grundlagen von SVG (Scalable Vector Graphics) wie Formen, Transformationen, Filter und Animation eingegangen. SVG ist jedoch ein Daten- und Grafikformat, das von Anfang an für dynamische, kompakte und interaktive Anwendungen gedacht war. Im nächsten Artikel wird es daher mehr um die dynamischen und interaktiven Aspekte von SVG gehen sowie um die Scripting-Techniken, mit denen SVG wirklich Leben eingehaucht werden kann.