Unterschiedliche Bildschirmgrößen, Auflösungen und Seitenverhältnisse machen es schwierig, ein einheitliches visuelles Erlebnis zu vermitteln. Dies gilt umso mehr für diejenigen, die pixelgenaue Darstellungen bieten möchten.
Skalierbare Vektorgrafiken (Scalable Vector Graphics, SVGs) helfen dabei, einen Teil dieses Problems zu lösen. SVGs können bei bestimmten Gelegenheiten sehr hilfreich sein und ein visuell beeindruckenderes Erlebnis schaffen, ohne den Webbrowser übermäßig zu belasten oder die Ladezeiten zu beeinträchtigen.
Doch was ist überhaupt SVG und was sind Vektorgrafiken?
SVG ist ein Bildformat, das auf XML basiert und ähnlich wie HTML funktioniert. Es definiert verschiedene Elemente für eine Reihe von bekannten geometrischen Formen, die im Markup kombiniert werden können, um zweidimensionale Grafiken zu erzeugen.
Vektorgrafiken ermöglichen also ohne eine Darstellung von zweidimensionalen Grafiken, die nicht auf Pixeln basiert, sondern aus Pfaden und geometrischen formen besteht. Der Vorteil ist hierbei, dass – anders als bei Pixelbildern – die Grafik unendlich skaliert werden kann – ohne Qualitätsverlust.
Die SVG-Spezifikation ist – wie auch HTML – ein offener Standard, der 1999 vom World Wide Web Consortium (W3C) entwickelt wurde.
Alle wichtigen Webbrowser unterstützen seit einiger Zeit SVG-Rendering, sodass Ihre Website auch mit der Nutzung von SVG-Elementen stets responsiv bleibt.
Um zu wissen, wie Sie SVG-Objekte animieren können, müssen Sie zunächst deren Aufbau sowie das wichtigste Element verstehen: den Pfad.
Das Pfad-Element ist eine Grundform, mit der fast jede komplexe 2D-Form erstellt werden kann.
Das Element arbeitet mit einer Abfolge von Zeichenbefehlen. Das Element nimmt diese Folge von Zeichenbefehlen über das Attribut d auf.
Für ein rechtwinkliges Dreieck sähe das zum Beispiel so aus:
<path d="M10 10 L75 10 L75 75 Z" />
Sie können sich einen virtuellen Stift vorstellen, der auf dem Bildschirm zeichnet, und der Zeichenkommentar im Pfadelement steuert lediglich den Stift. Im obigen Beispiel wird der Stift angewiesen, sich zur Position (10, 10) (M10 10) zu bewegen, eine Linie zu (75, 10) (L75 10) zu zeichnen, eine Linie zu (75, 75) L75 75 zu zeichnen und dann den Pfad zu schließen, indem er zum Startpunkt (Z) zurückkehrt.
Neben L (Line to) und M (Move to) gibt es auch die Zeichenbefehle Bögen (A), quadratische Bézierkurven (Q), kubische Bézierkurven (C) und viele mehr. So können Sie noch viel komplexere Formen und Grafiken in SVG erstellen.
Eine Methode zur Animation von SVG-Grafiken ist die Nutzung der zwei SVG-Attribute stroke-dasharray und stroke-dashoffset.
Das Attribut stroke-dasharray steuert das Muster der Striche und Lücken, die zum Streichen des Pfades verwendet werden. Mit dem Attribut können Sie weiterhin Linien in ein Muster von Strichen und Lücken umwandeln, anstatt eines kontinuierlichen Tintenstrichs.
Wenn SVG-Bilder Teil des DOM (Document Object Model) des Webbrowsers ist, kann das Attribut auch mittels CSS gesetzt werden.
In ähnlicher Weise kann das Attribut stroke-dashoffset (das angibt, wie weit in das Strichmuster hinein der Strich beginnen soll) ebenfalls über CSS gesteuert werden.
Diese beiden SVG-Attribute können zusammen verwendet werden, um SVG-Pfade zu animieren und dem Betrachter die Illusion zu vermitteln, dass die Pfade schrittweise gezeichnet werden.
Um diesen Pfad so zu animieren, als ob er allmählich und glatt auf dem Bildschirm gezeichnet wird, müssen die Strich- (und Lücken-) Längen der Striche (und Lücken) mithilfe des Attributs stroke-dasharray gleich der Pfadlänge eingestellt werden. Dies geschieht so, dass die Länge jedes Striches und jeder Lücke in der gestrichelten Kurve gleich der Länge des gesamten Pfades ist.
Als Nächstes setzen Sie den Strichversatz unter Verwendung des Attributs stroke-dashoffset auf 0, wodurch der Pfad auf dem Bildschirm als durchgezogene Kurve erscheint. Wenn der Versatz des Strichs auf die Länge der Kurve gesetzt wird, erhalten Sie eine unsichtbare Kurve.
Indem Sie nun die Eigenschaft stroke-dashoffset animieren, können Sie die Kurve allmählich auf dem Bildschirm erscheinen lassen.
Sie können noch einen Schritt weiter gehen, indem Sie dasselbe Prinzip verwenden, aber mit mehr Pfaden.
Stroke-Dasharray und Stroke-Dashoffset sind zwei sehr leistungsstarke Attribute, mit denen Sie eine Fülle von Animationen und Effekten auf Ihre SVG-Pfade anwenden können.
Eine weitere schöne Sache, die Sie mit SVG und CSS machen können, ist die Animation von Objekten oder Elementen, die einem Pfad folgen.
Es gibt hierfür 2 SVG-Attribute, die Sie für diese Animation verwenden können.
Durch die Kombination dieser beiden Eigenschaften können Sie auf einfache Weise tolle Animationen erstellen.
Sie erhalten dann das neue Element div.ball.
Dieses Element kann alles sein, ein div, ein Bild, Text, was auch immer. Die Idee in diesem Beispiel ist, dass Sie unter Verwendung von offset-path und offset-distance dem Element einen Pfad geben können, dem es folgen kann, und die Distanz animieren können, und das entsprechende Element sich durch den Pfad bewegen wird.
Falls Sie noch komplexere SVG-Animationen wünschen, können Sie jederzeit auf JavaScript zurückgreifen.
Mit JavaScript können Sie jedoch die Animationstechniken, die im Abschnitt zuvor beschrieben wurden, noch leichter erreichen.
Zuvor mussten Sie die Pfadlängen mit CSS „hard coden“. Dank der JavaScript-Funktion path.getTotalLength() ist es möglich, die Länge des Pfades on-the-fly zu berechnen und bei Bedarf zu verwenden.
Außerdem steht Ihnen bei der Nutzung von JavaScripts bereits eine Reihe von Bibliotheken zur Verfügung, die SVG-Animationen noch viel einfacher machen können, als es ohnehin schon ist.
Snap.svg zum Beispiel macht es nicht nur einfach, SVG-Bilder mit JavaScript zu zeichnen, sondern auch, sie zu animieren, indem man einfach den Befehl .animate({}) aufruft.
Eine andere Bibliothek, anime.js, ermöglicht es Ihnen, ein div-Element mit nur wenigen Zeilen Code einem SVG-Pfad folgen zu lassen.
Im Bereich Datenvisualisierung ist vor allem die Bibliothek D3.js geeignet und erfreut sich großer Popularität.
Das von Airbnb entwickelte After Effects Plugins "Lottie" bietet im Vergleich zu den vorherig genannten Lösungen eine benutzerfreundliche alternative. Dieses ist für After Effects verfügbar und kann dort unkompliziert erstellt und exportiert werden.
Als Exportdatei wird anschließend ein JSON Datei erstellt, die mit der JavaScript Bibliothek von Lottie dann im Browser in Bewegte Bilder umgewandelt wird.
Auch auf unserer Webseite verwenden wir an einigen Stellen Lottie Animationen. So wird beispielsweise das Logo in der Navigationsleiste ab einer bestimmten Scroll-Position animiert. Ein weiteres Beispiel sehen Sie hier:
Vektorgrafiken sind ein gutes Bilderformat, da sie verlustfrei skalierbar und einfach anpassbar sind. Da vektorbasierte Grafiken auf Pixel verzichten können, sind sie auch wesentlich leichter und ermöglichen trotz komplexer 2D-Visualisierungen eine performante, schnelle Website.
Mittels CSS und JavaScript lassen sich Vektorgrafiken animieren, so können gewählte Website-Inhalte veranschaulicht und hervorgehoben werden.
Auch als dezente Dekoration erfüllen SVG-Animationen ihren Zweck. Als einfach gehaltene Technik, können sie im Sinne des modernen Minimalismus einer Website das besondere Etwas verleihen.
Zur Animation stehen Ihnen die Möglichkeiten CSS und JavaScript zur Verfügung. Während Ersteres meist aufwendiger und zeitintensiver ist, stehen Ihnen bei der Nutzung von JavaScript bereits viele Bibliotheken zur Verfügung, die Ihnen die Animation von SVG-Elementen enorm erleichtern können.