Was macht eine Vektorgrafik zu einer Vektorgrafik? Eines der wesentlichen Merkmale und Vorteile einer Vektorgrafik ist die stufenlose und verlustfreie Skalierbarkeit. Warum sich nicht jede Datei verlustfrei skalieren lässt und wo Vektorgrafiken zum Einsatz kommen, erfahren Sie in diesem Beitrag. Wenn Sie zu diesem Thema anschließend weitere Informationen benötigen oder sich eine Vektordatei generieren lassen möchten, sprechen Sie uns gern an!
Vektorgrafik vs. Pixelgrafik
Der größte Unterschied zwischen einer Vektorgrafik zu einer Pixelgrafik liegt in der verlustfreien bzw. verlustbehafteten Skalierung. Folgende Eigenschaften ergeben sich, wenn man beide Dateitypen einmal genauer unter die Lupe nimmt:
Pixelgrafik
Pixelgrafiken (oder auch Rastergrafiken genannt) bestehen, wie es der Name schon sagt, aus Pixeln. Ein Pixel ist ein Bildpunkt, dem ein festgelegter Farbwert zugeordnet ist. Jedes Foto ist eine Pixelgrafik – ganz egal, ob mit dem Fotoapparat oder aber der Smartphone-Kamera aufgenommen. Selbst ein eingescanntes Dokument ist eine Pixelgrafik. Das sich Pixelgrafiken nicht verlustfrei vergrößern lassen, lässt sich an folgendem Beispiel erklären: Ein Bild, das die Maße von 10 x 10 Pixeln hat, enthält 100 Pixel. Vergrößert man das Bild nun von 100 % auf 200 % so vervierfacht sich die Pixelanzahl auf 400 Pixel. Diese 400 Pixel müssen allerdings mit den Farbinformationen des ursprünglichen Bildes auskommen. Es werden also die dazukommenden Pixel nach verschiedenen Algorithmen mit Farbinformationen des Ausgangsbildes gefüllt. Hierdurch entsteht eine gewisse Unschärfe; das Bild wirkt „verpixelt“.
Vektorgrafik
Anders als Pixelgrafiken basieren Vektorgrafiken (auch Vektordateien genannt) aus mehreren Pfaden, sogenannten Vektoren. Hierbei handelt es sich um Linien, Kurven und verschiedene geometrische Grundformen, die dazu genutzt werden das Bild „zu beschreiben“. Beispiel: Bei einem Kreis werden lediglich Informationen zum Radius, der Lage des Mittelpunktes und der Farbe gebraucht. Diese können durch Informationen zur Konturfarbe und -stärke noch erweitert werden. Ebenso können mittlerweile Farbverläufe und Transparenzen in die Bildbeschreibung einbezogen werden. Durch diese Bildbeschreibung können Vektorgrafiken ohne Qualitätsverlust stufenlos vergrößert bzw. verkleinert werden. Auch bei extremer Vergrößerung sind keine Pixel erkennbar. Da im Vergleich zu Pixelgrafiken einzelne Farbinformation nicht gespeichert werden müssen, sondern lediglich verschiedene Parameter zur Beschreibung der Form, ist die Dateigröße im Vergleich zu Pixelgrafiken deutlich kleiner. Vorteile ergeben sich hierbei speziell bei der digitalen Verwendung, denn: Die Ladezeiten werden geringer. Typischerweise werden Vektorgrafiken mit Grafikprogrammen wie Adobe Illustrator oder Sketch erstellt.
Vergleich
| Parameter | Pixelgrafik | Vektorgrafik |
| Anwendung | Bilder bzw. Fotos aller Art | Logos, Icons, Illustrationen, grafische Elemente |
| Skalierung | nicht verlustfrei | verlustfrei |
| Basis | Pixel | Vektoren |
| Dateiformate | .jpg .png .tif .gif | .ai .eps .pdf .svg |
Sowohl Pixel- als auch Vektorgrafiken weisen bestimmte Vor- und Nachteile auf und haben daher beide eine Daseinsberechtigung. Es kommt also auf den jeweiligen Anwendungsfall bzw. auf das Motiv an, welche Variante die sinnvollere ist und gewählt werden sollte.
Grafik: Vektordatei VS. Pixelgrafik
Vektorisierung von Pixelgrafiken
Die Umwandlung einer Pixelgrafik in eine Vektorgrafik nennt man Vektorisierung. Abhängig vom Motiv kann diese auf verschiedenen Wegen erfolgen. Während bei komplexeren Bildern Vektorisierungsprogramme zum Einsatz kommen, genügt es bei einfacheren Motiven, Logos oder Icons diese mittels bekannten Grafikprogrammen zu vektorisieren. Ein klassisches Beispiel hierfür ist die Logogestaltung. Nicht selten kommt es vor, dass zu einem Logo erst analoge oder digitale Skizzen (sogenannte Scribbles) erstellt werden. Diese werden anschließend digitalisiert und von Hand mittels Grafikprogrammen, wie beispielsweise dem Adobe Illustrator, nachgezeichnet.
Anwendung
Sowohl bei der Gestaltung von Printprodukten als auch im Webdesign ist eine Vektordatei unumgänglich. Vor allem Logos, Icons oder auch verschiedene andere grafische Elemente sollten als Vektorgrafiken angelegt werden, um in jedem Fall eine gute Qualität zu garantieren. Gerade in der B2B-Kommunikation empfiehlt es sich bestimmte Grafiken, wie das Unternehmenslogo, als Vektordatei vorliegen zu haben, da so eine crossmediale Platzierung problemlos möglich ist.
Folgende drei Beispiele zeigen eine sinnvolle Anwendung von Vektorgrafiken:
1. Großflächenwerbung
Egal ob zu Fuß, per Rad oder auch mit dem Auto – wer sich in der Stadt bewegt kommt kaum an sogenannter Großflächenwerbung vorbei. Meist werden hier nur wenige Informationen transportiert, da Personen im Vorbeigehen bzw. -fahren nur kurz die Großfläche betrachten und viele Informationen so schlecht aufnehmen können. Doch eins ist dabei ganz wichtig: der Absender. Wer möchte diese Botschaft mitteilen? Hier kommt das Logo zum Einsatz, besser gesagt die Vektorgrafik des Logos, denn: Auch wenn die Großfläche mit einem größeren Abstand betrachtet wird kommt das Logo hier in gigantischen Größen zum Einsatz.
2. Fahrzeugbeklebung
Ein weiteres typisches Anwendungsbeispiel aus dem B2B- Bereich ist die Verwendung von Vektorgrafiken bei der Beklebung von Fahrzeugen. Oftmals werden Firmenfahrzeuge mit verschiedenen Kontaktdaten, dem Logo und weiteren (meist einfarbigen) Gestaltungselementen versehen. Hierbei kommen sogenannte Schneideplotter zum Einsatz. Sie orientieren sich an den Vektoren und schneiden diese direkt in die Folie. Nur noch wenige Handgriffe sind nun nötig um das gewünschte Design auf das Fahrzeug zu übertragen. Übrigens: Fahrzeugwerbung muss nicht immer schrill und bunt sein – ein schlichtes Design eignet sich perfekt für seriöse B2B-Kommunikation.
3. Responsives Webdesign
Displays werden immer größer und besser. Auch bei mobilen Endgeräten werden immer hochauflösendere Displays verbaut. Da eine „normale“ .png-Datei (also Pixelgrafik) vor allem auf Retina-Displays aufgrund nicht ausreichender Qualität oft unscharf dargestellt wird, empfiehlt es sich gerade bei responsivem Webdesign auf Vektorgrafiken zurückzugreifen. Alle Darstellungsgrößen können auf eine Datei zurückgreifen die auf allen Geräten scharf dargestellt wird. Positiver Nebeneffekt: Durch die geringeren Dateigrößen der Vektordatei (im Vergleich zur Pixelgrafik) werden die Ladezeiten der Websites optimiert.
Noch ein kleiner Tipp: Wenn bei Erstellung der Vektordatei darauf geachtet wurde die Schriften in Pfade umzuwandeln entstehen bei Verwendung auf verschiedensten Endgeräten weniger Probleme.
Dateiformate
Bestimmte Dateiformate sind versionsabhängig, das heiß Sie können diese Dateien nur in der gelieferten oder neueren Versionen bearbeiten. Eine Rückwärtskompatibilität funktioniert nur bedingt. Wir nutzen intern durch die Verwendung der Adobe Creative Cloud immer die aktuellsten Versionen der Adobe-Programme; eine Prüfung der Daten auf Versionierung ist daher nicht nötig.
Nicht immer steckt in einem Dateiformat auch das drin was man vermutet. Wenn beispielsweise in einer .eps-Datei eine Pixelgrafik eingebettet wurde bleibt es auch trotz der Dateiendung .eps eine Pixelgrafik. Kurz gesagt: Die Dateiendung ändert nicht den Aufbau der Datei. Methoden zum Testen folgen im weiteren Verlauf des Beitrags.
Die 4 gängigsten Vektorformate:
SVG
Speziell auf das digital genutzte Format .svg möchte ich kurz noch einmal eingehen. Als ein Webtrend 2018 (mehr dazu lesen Sie hier) findet die .svg in immer mehr Websites Anwendung. Durch die Browserkompatibilität der gängigsten Browser (mehr dazu erfahren Sie hier) ist nunmehr die Barriere in der Verwendung entfallen. Bei speziellem Wunsch nach Kompatibilität auch bei älteren Browsern kann auf Fallback-PNG’s zurückgegriffen werden.
Grafik: Browserkompatibilität
Gerade im Bezug auf responsives Webdesign ist die .svg nahezu unverzichtbar geworden. Bei der Darstellung auf Retina-Displays stößt eine „normale“ .png-Datei an ihre Grenzen und wirkt unter Umständen unscharf. Daher ist es kein Wunder, dass auch das W3C (World Wide Web Consortium) die Darstellung von 2D-Grafiken als .svg empfiehlt. Bei stark verkleinerter Darstellung ist es sinnvoll zu überprüfen ob alle Details noch gut erkennbar sind oder ob ggf. manuelle Korrekturen vorgenommen werden müssen.
Die auf der Auszeichnungssprache XML basierende Datei beinhaltet Anweisungen in der Darstellung der Grafik die mittels CSS angepasst werden können (beispielsweise Änderung der Farbe oder Kontur)
Echte Vektorgrafik oder nicht?
Wie beschrieben besteht leider nicht jede Datei die eine Vektordateiendung enthält auch aus Vektoren. Grundsätzlich ist es sinnvoll die Dateien vor der Weitergabe kurz zu überprüfen. Dies spart Zeit und Rückfragen. Da jeder Mensch unterschiedlich technikaffin ist und auch andere Technik zur Verfügung hat ist es an dieser Stelle schwer eine Pauschalaussage zu treffen. Tipp: Vergrößerung! Und zwar extrem! Wie sieht die Datei beispielsweise bei einer Darstellung von 300 % aussieht? Oder aber bei 2500 %? Sind alle Kanten scharf? Oder lassen sich einzelne Pixel (wie oben abgebildet) erkennen? Am Mac bietet sich hierfür das vorinstallierte Programm „Vorschau“ an.
Fazit
Vektorgrafiken bringen durch Ihren Aufbau viele Vorteile mit, die auch genutzt werden sollten! Vor allem bei Logos und Icons empfehle ich den Einsatz von Vektorgrafiken bei Printprodukten, gerade auch im B2B-Bereich. Da die Barrieren der Kompatibilitätsprobleme der Browser im Zuge der Zeit glücklicherweise beseitigt wurden steht nun auch der digitalen Anwendung nichts mehr im Weg.
