Eine Vektorgrafik ist eine Computergrafik die auf sogenannten grafischen Primitiven wie Farben, Formen, Kurven (Splines) und Linien basiert. Es ist eine auf einer Ebene dargestellte 2D Grafik. Vektorgrafiken basieren nicht auf einzelnen Pixeln wie Bilder.
Was ist der Vorteil von Vektorgrafiken?
Vektorgrafiken basieren auf einer Bildbeschreibung, die die Objekte, aus denen das Bild aufgebaut ist, exakt definiert. Ein Beispiel: Ein Kreis in einer Vektorgrafik beinhaltet Lage des Mittelpunktes, Radius, Linienstärke und Farbe. Nur diese Parameter werden gespeichert. Aus diesem Grund sind Vektoren verlustfrei und platzsparend. Ein weiterer Vorteil ist die stufenlose und verlustfreie Skalierbarkeit der Grafik. Pixelgrafiken werden unscharf und verlieren an Qualität, wenn man sie größer skaliert und sind nicht mehr richtig erkennbar.
Egal wie hoch oder niedrig die Auflösung des Ausgabegerätes ist, Vektorgrafiken erlauben es, Dokumente mit der höchstmöglichen Auflösung auf Bildschirmen darzustellen.
Durch die Auflösungsunabhängigkeit sind Vektorgrafiken sowohl für die Wiedergabe auf Bildschirm als auch im Druck geeignet. Besonders bei der Erstellung von Illustrationen, Grafiken und Logos finden Vektorgrafiken ihren Einsatz. Logos werden beispielsweise immer in verschiedenen Größen verwendet und daher als Vektorgrafik erstellt.
Warum heißen diese so?
Der Name Vektorgrafik wurde in den 80er Jahren geprägt als noch Vektorbildschirme verbreitet waren und Linien (Vektoren) mit einem Kathodenstrahl anzeigten. Vektoren bestehen heute aber nicht mehr nur aus Linien, sondern auch aus Grundformen. Um Vektoren anzuzeigen müssen diese für unsere Rasterbildschirme gerastert werden.
Wo entwickelt man diese?
Vektorgrafiken werden in Grafikprogrammen, AutoCAD oder auch einer Auszeichnungssprache erstellt. Neben dem bekanntesten Tool im Design Bereich Adobe Illustrator gibt es auch preiswertere und dennoch professionelle Alternativen wie zum Beispiel Sketch.
Übersicht verschiedener Vektor-Dateiformate:
| Beschreibung | Dateiendungen |
|---|---|
| Adobe Illustrator | .ai |
| Encapsulated PostScript | .eps |
| AutoCAD | .dxf, .dwf |
| PostScript | .ps |
| Scalable Vector Graphics | .svg, .svgz |
| Portable Document Format |
Vektorgrafik erstellen – Tipps aus der Praxis
Neben Illustrator greifen wir im Projektalltag oft auf Datenbanken zurück, um beim Erstellen von Grafiken Zeit zu sparen. Unser Favorit: The Noun Project – Für Adobe Illustrator, Indesign Photoshop und Microsoft Word und Powerpoint gibt es ein Plugin mit Suchfunktion und Zugang zur gesamten Library. Die Icons werden direkt per Drag & Drop in die aktuelle Datei bzw. Zeichenfläche gezogen. Für Google Slides und Docs gibt es ein Browser-Addon das gleichermaßen funktioniert. Für Mac User gibt es auch eine Desktopapp. Die Lizenzrechte an jedem Icon erwirbt man automatisch mit dem Premiumaccount. Also Plug&Play.
Ein Tipp für alle die viele Icons und Vektorgrafiken auf ihrer Website einbinden: icomoon – Damit lädt man seine Icons als SVG Dateien hoch und icomoon erstellt daraus ein Webfont. Somit kann man auf einfache Art Vektorgrafiken auf seiner Website einbinden und ist flexibel mit der Farbgebung.
Für die Profis: Mit iconfinder bekommt man sogar SVG, PNG, AI, Photoshop Shape, ICO (Windows), ICNS (Mac OS) als Icons. Für alle Coder unter euch – iconfinder liefert euch Base64 SVG URIs und PNGs.
Wer eigene Icons in Base64 codieren möchte kann das auf www.b64.io tun. Einfach hochladen und das entsprechende Code-Snippet wird sofort generiert. Damit könnt ihr eine Zeile Code in eurer CSS eingeben und habt direkt das Icon auf eurer Seite und müsst es nicht als Asset hochladen. Unterstützte Dateiformate des Dienstes sind: PNG, JPG, GIF und SVG.
