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 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.

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.

Ü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 .pdf

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.

Alle Beiträge von Michael

Unsere meistgelesenen Beiträge

Vier 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. VierJahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.