12. Februar 2014

SVG: Renaissance eines Grafikformats

Design Beitrag von

Als wir die Entwickler-Konferenz »SVG OPEN« im Jahr 2008 in Nürnberg organisierten (seit 2012 heißt die jährlich stattfindende Konferenz »The Graphical Web«), war das vektorbasierte Grafikformat SVG (Scalable Vector Graphics) noch ein »hidden Champion«, weit davon entfernt, alltägliche Verwendung im Web zu erfahren. SVG führte ein Nischendasein, war hauptsächlich in der Industrie im Einsatz, bei der Darstellung dynamischer Prozesse oder wurde von Mitarbeitern geowissenschaftlicher Institutionen dazu genutzt, kartografische Informationen zu visualisieren. In dieser Zeit kämpfte SVG um seine Daseinsberechtigung im Web, die auch noch dadurch einen Rückschlag erhielt, als der Softwarekonzern Adobe just in jenem Jahr die Entwicklung seines »SVG-Viewers« einstellte. Das Browser-Plug-In von Adobe war bis dahin die einzige professionelle Lösung für die Darstellung von SVG-Inhalten in Browsern.

Optimales Grafikformat für das mobile Web

Das hat sich grundlegend geändert. In Zeiten, in denen wir immer mehr mit mobilen Endgeräten auf Angebote des Internets zugreifen, müssen visuelle Inhalte besonderen Anforderungen genügen: Im Hinblick auf die unterschiedlichen Rechenleistung, Speicher- und Übertragungskapazität von Smartphones und Tablets sollen die Dateien vor allen Dingen performant sein – mit anderen Worten: sich schnell laden und auf möglichst vielen Ausgabemedien so erscheinen, wie es die Anwendung vorsieht. Pixelorientierte Formate wie JPG oder PNG sind wegen ihrer Datengröße und der daraus resultierenden Übertragungsgeschwindigkeit oftmals im Nachteil – gerade bei Location-Based Services, also mobilen Diensten, die mit Hilfe von positionsabhängigen Informationen dem Benutzer selektive Angebote bereitstellen. Und so begegnen einem im Web immer mehr Dateiendungen wie .svg oder .svgz. Prominente Beispiele für Anwendungen des digitalen Alltags sind die Google Maps oder grafische Referenzobjekte bei Wikipedia.

Offenen Standards gehört die Zukunft

Das Grafikformat SVG ist also präsenter denn je. Die Vorzüge von SVG kommen dem modernen und mobilen Web sehr entgegen. Da ist zum einen die geringe Dateigröße, aber auch der Vorteil einer auflösungsunabhängigen Darstellung und Skalierbarkeit von Grafiken. Zudem ist das Vektorformat ein offener Standard des WWW-Konsortiums W3C und basiert auf dem ebenfalls offenen Standard XML (Extensible Markup Language), einer Beschreibungssprache für Daten. In Fall von SVG beschreibt XML die Eigenschaften und Verhalten von zweidimensionalen Grafiken. Aber SVG kann nicht nur statisch und zweidimensional. Auch Animation bietet das Format mittels SMIL (Synchronized Multimedia Integration Language), einer Auszeichnungssprache für zeitsynchronisierte, multimediale Inhalte. Dadurch ist SVG auch eine echte Alternative zu Adobe Flash, dessen Popularität langsam aber stetig zu sinken scheint. Gut ist natürlich auch, dass mittlerweile alle Browser der jüngeren Generationen die Ausgabe von SVG-Dateien unterstützen. Es bedarf also keiner Plugins für den Browser mehr. Selbst der eigenwillige Explorer unterstützt seit der Version 9 das Format vollständig.

Schön, dass dieses Format nun endlich die Bedeutung erfährt, die es ob seiner Vorzüge verdient und mittlerweile zu einer wichtigen Säule für zeitgemäße grafische Darstellung im Web geworden ist. Dazu im Folgenden ein paar Links, die helfen sollen, SVG-Dateien für das Web richtig aufzubereiten:

Die richtigen Einstellungen für den SVG-Export aus Adobe Illustrator:
Anleitung: SVG-Export aus Adobe Illustrator

Die richtige Einbindung von SVG auf dem Webserver:
Fachbeitrag im Online-Magzin t3n: Grafiken mit SVG retina-ready

Ein Showreel von Adobe, das SVG zu einem wesentlichen Bestandteil seines »graphical webs« macht:
Website: thegraphicalweb.com/meet-svg

Design Beitrag von .

Share Post

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert