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 Pixel wie Bilder.
Was ist der Vorteil von Vektorgrafiken?
Vektorgrafiken basieren auf einer Bildbeschreibung, die die Objekte, aus denen das Bild aufgebaut ist, exakt definiert. Als Bsp. 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 des Bildes. 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. Unsere Favoriten: The Noun Project – mit einem Premium-Account gibt es sogar eine Desktop-App mit der man sich Icons direkt per Drag & Drop ins aktuelle Projektfile ziehen kann. 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. Damit könnt ihr eine Zeile Code in eurer CSS eingeben und habt direkt das Icon auf eurer Seite.
