Worth Watching: SVG – Das Bildformat für gestochen scharfe Logos und Grafiken

Im 2. Semester meines Masters an der FH Joanneum beschäftigten wir uns in einem der Wahlfächer mit der Auszeichnungssprache XML. Eine komplexe Materie und die Grundlage von intelligentem Content (doch das ist eine eigene Geschichte – coming soon). Dieser Blog Post fokussiert sich auf das Anwendebeispiel SVG (Scalable Vector Graphics).

SVG kurz erklärt

Beim Dateityp SVG (Scalable Vector Graphics) handelt es sich um skalierbare Vektorgrafiken. Während allgemein bekannte Bilddateiformate (PNG oder JPEG) auf Pixeln (kleinen Farbpunkten) basieren, bestehen Grafiken im Format SVG aus geometrischen Vektoren, die keinerlei Auflösung verlieren, egal wie gross sie skaliert werden – z.B. anhand von Zoom. SVG Grafiken könnt ihr einerseits programmieren (anhand XML-Elementen) oder in einem geeigneten Editor generieren. Mehr zu den gezielten Anwendemöglichkeiten von SVG erfahrt ihr im Video.

SVG im Detail erklärt

Ein Video von Magdalena Markovic und Xenia Imbach, COS17, FH Joanneum in Graz.

PNG, JPEG oder SVG: So entscheidet ihr euch für das richtige Bildformat

Bei mir hielt sich lange der Mythos, dass PNG der perfekte Dateityp für allerlei Grafiken auf Websites ist. Erst durch den XML-Kurs habe ich den richtigen Umgang mit den verschiedenen Dateitypen gelernt. PNG eigene sich besonders für freigestellte, am Computer generierte Grafiken (mit einem Alpha Channel), für detailreiche Fotos verwendet ihr am besten JPEG und für skalierbare Elemente, wie z.B. Logos, greift ihr bestenfalls auf den Dateityp SVG zurück.

Worth WatchingXenia Imbach