Zum Hauptinhalt springen Skip to page footer
Webdesign Webagentur Bern Webdesign Webagentur Bern

SVG-Grafiken und Animationen

Seit im September 2001 erstmals die SVG-Grafiken, englisch für skalierbare Vektorgrafik vom World Wide Web Consortium (W3C) empfohlen wurden und diese mit CSS auch animiert werden konnten, steht den Webdesignern ein sehr mächtiges Tool zur Erstellung von Animationen zur Verfügung.

SVG Animation Designer

SVG Dateien können mit CSS animiert werden.

SVG Animation Motion Designer

Mehr als CSS und eine SVG Datei braucht es nicht.

Was sind SVG-Grafiken

SVG steht für "Scalable Vector Graphics" und ist ein XML-basiertes Dateiformat zur Darstellung von zweidimensionalen Vektorgrafiken. Im Gegensatz zu Pixel-basierten Bildformaten wie JPG oder PNG sind SVG-Dateien skalierbar ohne Qualitätsverlust, was sie ideal für Webdesign und responsive Designs macht.

Die Vorteile von SVG Dateien:

  • Skalierbarkeit: Sie können ohne Qualitätsverlust skaliert werden.
  • Kleine Dateigrößen: Besonders für einfache Grafiken können SVG-Dateien oft kleiner sein als ihre Pixel-basierten Gegenstücke.
  • Editierbarkeit: Da SVG ein XML-Format ist, können Sie die Dateien direkt bearbeiten und sogar mit CSS und JavaScript animieren oder manipulieren.
  • Hohe Qualität: Vektorgrafiken haben klare Kanten, unabhängig von der Größe.

Wie können SVG Grafiken animiert werden?

SVG-Dateien können mit CSS oder JavaScript animiert werden, um Bewegungen, Übergänge oder Interaktionen zu erstellen. Dies kann verwendet werden, um Benutzeroberflächen, Illustrationen oder sogar Infografiken lebendiger und interaktiver zu gestalten.

Arten von SVG-Animationen

  • Pfadanimationen: Änderung der Form oder Position von SVG-Pfaden über die Zeit.
  • Füllanimationen: Änderung der Füllfarbe eines SVG-Elements.
  • Strichanimationen: Simulation des Zeichnens von Linien oder Formen.
  • Transformationen: Rotation, Skalierung oder Verschiebung von SVG-Elementen.

Gelungene Beispiele für SVG-Animationen

  • Interaktive Infografiken: Datenvisualisierungen, die beim Darüberfahren oder Klicken animiert werden.
  • Ladeanimationen: Ein kleines animiertes SVG-Symbol, das anzeigt, dass eine Seite oder ein Element geladen wird.
  • Icon-Hover-Effekte: Icons, die bei Mouseover oder beim Tippen animiert werden.
  • Illustrationen mit Parallax-Effekt Mehrschichtige SVG-Illustrationen, die sich beim Scrollen oder Bewegen des Mauszeigers unterschiedlich bewegen, um Tiefe zu simulieren
  • Storytelling: Eine Sequenz von animierten SVG-Elementen, die eine Geschichte oder einen Prozess erzählen, oft begleitet von Text oder anderen Medien.

SVG-Animationen können das Benutzererlebnis erheblich verbessern, indem sie einer Webseite visuelle Dynamik und Interaktivität verleihen. Es ist jedoch wichtig, sie sparsam und mit Bedacht zu verwenden, um nicht vom eigentlichen Inhalt oder Zweck der Webseite abzulenken oder die Benutzerfreundlichkeit zu beeinträchtigen. Einige gute Beispiele findet Ihr auf der Website von Oneextrapixel. Zudem ist gibt es auf unserer Fehlerseite Jo the robot zu bewundern.

Kontakt für SVG Aminator und Motion Designer

Wir bieten Ihnen den ganzen Service für die Animation von SVG Grafiken und Motion Design. 
Kontaktieren Sie uns per E-Mail unter info✉webdesign-agentur-bern•ch oder per Telefon: +41 79 222 78 45.

> weitere Artikel ansehen <