Die Vorteile von Scalable Vector Graphics (SVG)

In diesem Post dreht sich alles um das Dateiformat SVG. Was nach Partei oder Verein tönt, steht effektiv für Scalable Vector Graphics (SVG). Lesen Sie hier, wo die Vorteile von SVG liegen.

AutorJoely Tafanalo
Datum24.04.2017
Lesezeit3 Minuten

SVG Official LogoIn diesem Post dreht sich alles um das Dateiformat SVG. Was nach Partei oder Verein tönt, steht effektiv für Scalable Vector Graphics (SVG). Bei meinen Schulungen und Präsentationen habe ich bemerkt, dass noch viel zu viele Publisher entweder SVG nicht kennen oder zumindest nicht nutzen. Mit diesem Blog soll sich dies ändern.

Das Format wurde bereits 2001 veröffentlicht. Es entstand aus den Formatsprachen (VML und PGML), die Ende Neunzigerjahre beim World Wide Web Consortium (W3C) vorgelegt wurden. Dank dem modernen Web ist das etwas in Vergessenheit geratene Vektorformat heute wieder aktueller denn je. Einfach gesagt ist SVG für Grafiken, was HTML für Text ist. Leicht unscharfe Firmenlogos (JPG, 72ppi) auf hochauflösenden Bildschirmen müssen definitiv nicht mehr sein.

Das AI Export-Bedienfeld für SVG und andere Webformate
Das AI-Export-Bedienfeld für SVG und andere Webformate

2D-Vektorgrafiken

Ob als Firmenlogos oder Diagramme in Print-Projekten, jeder Publisher hat regelmässig mit Vektorgrafiken zu tun. Programme, mit denen skalierbare Grafiken erstellt und bearbeitet werden können, gibt es jede Menge. Am häufigsten werden in der Praxis jedoch Adobe Illustrator CC 2017 oder die freien Programme Inkscape und Scribus gebraucht. Abgesehen von ihren proprietären Dateiformaten haben sie das Austauschformat EPS sowie den Umgang mit SVG gemeinsam.

Grafikelemente im SVG-Format finden in User Interfaces und bei modernen Websites Anwendung. Beim Kopieren aus Photoshop oder Illustrator (über die Zwischenablage) nach Adobe Experience Design wird beispielsweise eine SVG-Datei übernommen.

Auch Photoshop kann inzwischen direkt Vektorgrafiken als SVG kopieren oder exportieren
Auch Photoshop kann inzwischen direkt Vektorgrafiken als SVG kopieren oder exportieren

Bewegte Vektorgrafiken

In der Vergangenheit wurden Illustrationen im Browser stets mit der proprietären Flash-Technologie animiert. Basierend auf der Tatsache, dass eine SVG-Datei in Wirklichkeit ein XML-Dokument samt Baumstruktur aus Elementen und Attributen ist, entstehen jedoch völlig neue Möglichkeiten zur Animation.

Die bekannten Vorteile aus dem Print-Publishing drängen sich auch am Screen auf: Skalierbarkeit ohne Datenverlust und dies bei geringer Datenmenge.

Mit Unterstützung von CSS und/oder Javascript enstehen aus SVG-Dateien packende Interaktionen und Animationen. Selbstverständlich konform mit HTML5. Der Traum von datengesteuerten, responsiven, vektorisierten Infografiken ist in Griffnähe gerückt. Nebenbei sei erwähnt, dass Google seit sieben Jahren SVG als Grafikformat bei der Suche berücksichtigt.

Ein WYSIWYG-Werkzeug für vektorbasierte Animation ist Adobe Animate CC 2017.

Fazit

Je wichtiger medienneutrales Publishing und Webstandards (HTML5, CSS, JS) werden, umso mehr empfiehlt es sich, dem guten alten SVG-Format eine Chance zu geben.


Über den Autor

Joely Tafanalo

Joely Tafanalo ist selbstständiger Gestalter HF Kommunikationsdesign/Interactiondesign und gelernter Typograf und Multimediaproducer. Als Trainer für Creative Cloud unterstützt er Firmen und Bildungsinstitute und leitet seit 2015 den Fachbereich Publishing bei Digicomp.