WebWissen: Was ist eine Vektorgrafik und wie erstelle ich sie?

EPS, SVG, AI, PS, PDF, DXF?! Was diese Kürzel gemeinsam haben, wofür Vektorgrafiken gut sind und Tipps aus der Praxis findet ihr im folgenden Artikel.

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.

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.

Webwissen Vektorgrafik
Vektorgrafik

Webwissen Pixelgrafik
Pixelgrafik

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.

Hier eine Übersicht der verschiedenen Dateiformate:

Beschreibung Dateiendungen
Adobe Illustrator .ai
Encapsulated PostScript .eps
AutoCAD .dxf, .dwf
PostScript .ps
Scalable Vector Graphics .svg, .svgz
Portable Document Format .pdf

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.

Alle Beiträge von Michael

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.