SVG verstehen und animieren von Malte Schmitz

Einführung in das Dateiformat SVG und Animationen mit JavaScript.
https://www.mlte.de/svg/

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.

Ein Vortrag im Rahmen der Night of Open Knowledge (Nook) in Lübeck: Die NooK ist eine offene Vortragsveranstaltung die sich an ein technik- und gesellschaftsinteressiertes Publikum jedes Wissensgrads und jedes Alters richtet. Die NooK wird vom Chaotikum e.V. (https://chaotikum.org) aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet.

Mehr unter https://nook-luebeck.de/

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License (CC BY NC ND 4.0). http://creativecommons.org/licenses/b...