conference logo

Playlist "MetaNook 2019"

SVG verstehen und animieren

Malte Schmitz

SVG ist der offizielle Webstandard zur Beschreibung zweidimensionaler Vektorgrafiken.
Im Gegensatz zu Pixelgrafiken können Vektorgrafiken verlustfrei beliebig skaliert und verzerrt werden.
Für Zeichnungen und schematische Grafiken, die aus geometrischen Formen zusammengesetzt sind, sind Vektorgrafiken eine sehr platzsparendes Dateiformat. Darüber hinaus können SVGs in Websites eingebettet und über JavaScript und CSS manipuliert werden. Während HTML viele historische Altlasten mitbringt, ist SVG ein sehr aufgeräumtes Format, das von allen relevanten Browsern standardkonform umgesetzt wird.

SVG ist ein Textformat, das auf XML basiert. Im Rahmen des Vortrags wird praktisch demonstriert werden, wie man mit einem Texteditor SVG-Grafiken erstellen und mit JavaScript im Browser animieren kann. Wir beginnen mit einfachen Formen und Pfaden und lernen, wie aus diesen komplexe Grafiken und User Interfaces zusammengesetzt werden können. Dazu betrachten wir unter anderem Konzepte wie Masken, Clipping und Pfadtransformationen, die von SVG nativ unterstützt werden. Es ist kein Vorwissen, aber verstärktes Interesse an Programmiersprachen und Dateiformaten notwendig. Es geht nicht primär um Fragen der graphischen Gestaltung oder Grafikprogramme, sondern ausschließlich um das Format SVG und dessen Einsatz und Kombination mit Webtechniken.