Willst Du Elemente auf Deiner Webseite ansprechend gestalten, ist eine Möglichkeit, sie zu animieren. Je nach Format und Art der Seite kannst Du das mit unterschiedlichen Mitteln beim Programmieren bewerkstelligen. So kannst Du zum Beispiel SVG Animation nutzen. Du fragst Dich, was das ist und wie man es gebraucht? Dieser Beitrag fasst Dir alle wichtigen Daten zusammen.

Eine Einführung zu SVG Animation: der Name dahinter

Wofür steht SVG? Die Abkürzung steht für die englische Phrase „Scalable Vector Graphic“. Wie dies bereits andeutet, arbeitet SVG aufbauend auf Vektoren und mithilfe von Grafiken bzw. Grafikelementen. SVG Animation ist daher eine Technik, die es Entwicklern ermöglicht, animierte Grafiken mit vektorbasierter Technik zu erstellen.

Dieses Tool ist ideal für das Erstellen von Grafiken, die auf verschiedenen Bildschirmgrößen oder -auflösungen angezeigt werden. Es kann auf verschiedene Art und Weise Verwendung finden: So ist es zum Beispiel möglich, animierte Logos und Embleme zu erschaffen, interaktive Benutzeroberflächen oder animierte Charts und Diagramme zu erstellen.

Die Animation mit diesem Tool selbst geschieht Schritt für Schritt. Das heißt, man definiert innerhalb der Animation Schlüsselpunkte und Pfade, die die jeweiligen Bewegungen und/oder Veränderungen des entsprechenden Elements beinhalten.

Was Dir SVG Animation bringt

• Einer der Vorteile der SVG Animation ist, dass sie eine sehr kleine Dateigröße aufweist. Dies bedeutet, dass sie schnell geladen werden kann und wenig Speicherplatz beansprucht.
• Darüber hinaus ist SVG Animation ziemlich einfach zu erstellen und zu bearbeiten, da die Animationen mit einfachen Code-Schnipseln erstellt werden können.
• SVG Animation ist auch sehr skalierbar und eignet sich daher sehr gut für die Erstellung von animierten Grafiken, die auf verschiedenen Bildschirmgrößen und -auflösungen angezeigt werden können. Daher ist es ein sehr beliebtes Werkzeug für die Erstellung von Webseiten, die auf verschiedenen Endgeräten angezeigt werden können.

Verwendung und Beispiele

Wie zuvor schon angebracht, kann man SVG Animation innerhalb von CSS und JavaScript nutzen. Auch über die eigenständige SMIL-Variante ist es möglich, bestimmte Elemente zu animieren. Wichtig ist in diesem Zusammenhang, dass der Pfad gekennzeichnet wird, in dessen Rahmen die Animation stattfindet. Hierfür von Bedeutung: Wie genau Du die einzelnen Elemente animieren kannst. Welche Formen der Animation lassen sich also mit SVG Animation umsetzen?

Du kannst unter anderem…

• die Zeit eines Elementes beeinflussen. Zum Beispiel kannst Du steuern, wann die Animation beginnt, wann sie endet, welche Mindest- und Maximalzeit ein Element für eine bestimmte Bewegung benötigt, ob es die Bewegung bzw. die zugeordnete Eigenschaft wiederholt, usw.
• die Werte in den einzelnen zugeschriebenen Eigenschaften genauer bestimmen. Zum Beispiel von welchen Punkten aus die Animation startet und wann sie aufhört, welche Geschwindigkeit die einzelnen Bewegungen und Veränderungen besitzen und Ähnliches.
• das jeweilige Element festlegen, das man animiert, eines hinzufügen oder steuern, für wie viele Elemente insgesamt eine Animation gilt.
• den Stil eines Elementes ändern, zum Beispiel dessen Farbgestaltung.
• die Art und Weise festlegen, auf die man ein Element animiert. Zum Beispiel, ob es sich dreht, in welche Richtung es sich bewegt oder Ähnliches.

Animationen in CSS

Um zum Beispiel eine SVG-Animation mit CSS zu erstellen, musst Du zunächst verschiedene Eigenschaften im Rahmen des SVG <animate>-Elementes definieren, die animiert werden sollen. Dazu gehören unter anderem die Position, die Größe, die Farbe oder der Winkel. Im Anschluss gibst Du eine Animation, deren Eigenschaften sich im Laufe der Animation verändern sollen. Man erstellt das meistens mithilfe von @keyframes oder CSS Transitions.

Zum Beispiel: Du willst eine SVG-Grafik erstellen, die aus zwei Kreisen besteht, die sich im Uhrzeigersinn drehen. Um diese Animation mit CSS zu erstellen, musst Du zunächst die Eigenschaften der beiden Kreise definieren, beispielsweise die Position, die Größe sowie die Farbe. Danach definiert man die Animation selbst und programmiert die beiden Kreise so, dass sie sich im Uhrzeigersinn drehen.

Animationen in Javascript

Für eine SVG-Animation in JavaScript benötigst Du zuvor eine SVG-Grafik als Grundlage. Dies kann mit jedem beliebigen Grafikprogramm (zum Beispiel Adobe Illustrator oder Inkscape) erfolgen. Anschließend muss man diese Grafik in eine SVG-Datei exportieren. Diese SVG-Datei kann dann direkt in den HTML-Code der Webseite eingefügt werden, um die Grafik in der Webseite anzuzeigen. Sobald diese in der Webseite vorhanden ist, kann man mit JavaScript Animationen erstellen.

Zunächst muss man in der SVG-Datei die verschiedenen Elemente identifizieren, die man animieren möchte. Dann muss man den JavaScript-Code schreiben, der die Animationen steuert. Dieser Code kann dann verwendet werden, um die Elemente unter anderem zu verschieben, zu vergrößern, zu verkleinern oder zu drehen.

Beispielsweise kann man eine SVG-Grafik erstellen, die ein Auto darstellt. Mit JavaScript kann man das Auto mithilfe der eingestellten Animation sich über den Bildschirm bewegen lassen. Dies kann entweder durch eine Verschiebung der gesamten SVG-Grafik oder durch eine Verschiebung einzelner Teile des Autos erfolgen. Auf diese Weise können interaktive Grafiken mit ansprechenden Animationen geschaffen werden.

Animation in SMIL

SMIL, abgekürzt für: Synchronized Multimedia Integration Language, ist eine XML-basierte Animationstechnologie, die es Entwicklern ermöglicht, animierte Grafiken mit nur wenigen Codeschnipseln zu erstellen.

Ein Beispiel für SVG <animate> mit SMIL ist eine Animation, die ein Logo an verschiedenen Positionen auf dem Bildschirm bewegt. Dazu muss man nur den Tag „animateTransform“ verwenden, um die Position des Logos zu ändern. Der Tag kann dann mit Attributen wie „from“ (von), „to“ (bis) und „dur“ (Dauer) konfiguriert werden, um die Animation zu erstellen.

Auf einen Blick

Für ein dynamisches Webdesign beim Programmieren kann SVG unermesslich sein: Es hilft dabei, Elemente auf einer Webseite zu animieren und bringt dabei viele Vorteile mit sich. SVG Animation arbeitet mit kleinen Dateigrößen, die Nutzung an sich ist unkompliziert und es ist skalierbar, das heißt, Du kannst die Animationen auf bestimmte Bildschirmgrößen anpassen.

Die Funktionsweise ist ebenfalls einfach. Du kannst es in CSS, in JavaScript und mithilfe von SMIL nutzen. Hierbei erstellst Du einen Pfad, in dem Du die Animation eingliederst und die entsprechenden Elemente zuvor mit Eigenschaften definierst (das heißt, Du legst fest, welche Elemente wie animiert werden).

FAQ zu SVG Animation