Digitale Bild­for­ma­te gibt es viele. Je nach Medium kommen un­ter­schied­li­che davon zum Einsatz. Vek­tor­gra­fi­ken werden oft bei Schau­bil­dern oder Logos ein­ge­setzt, die in ver­schie­de­nen Größen vorliegen sollen. Denn anders als Ras­ter­gra­fi­ken lassen sie sich beliebig skalieren, ohne dass dadurch Qualität verloren ginge. Wir erklären, was Vek­tor­gra­fi­ken genau sind, wann sie verwendet werden und welche Formate es gibt.

Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung

Vek­tor­gra­fi­ken: Beliebig ska­lier­bar

Um ein Bild zu drucken oder am Bild­schirm dar­zu­stel­len, muss es in einzelne Bild­punk­te zerlegt werden; man spricht vom Rastern eines Bildes. Beim Fo­to­gra­fie­ren mit Di­gi­tal­ka­me­ras entstehen Ras­ter­gra­fi­ken mit Millionen einzelner Bild­punk­te. Wenn Sie sich ein Bild in einer Zeit­schrift stark ver­grö­ßert ansehen, werden Sie die ge­druck­ten Bild­punk­te erkennen können, genauso wie die Pixel, wenn Sie Ihr Di­gi­tal­fo­to stark ver­grö­ßern.

Diese Form der Dar­stel­lung durch Pixel führt bei sehr starken Ver­grö­ße­run­gen zu sicht­ba­ren Bild­punk­ten, und das vor allem an Bild­rän­dern, an denen das besonders unschön ins Auge fällt. Zudem benötigen Pi­xel­gra­fi­ken allerhand Spei­cher­platz. Mehr zu der Frage „Was ist ein Pixel?“ haben wir in einem separaten Ratgeber zu­sam­men­ge­stellt.

Um diese Nachteile zu vermeiden, nutzt man für bestimmte Gra­fik­ty­pen ein Format, das auf Vektoren basiert. Oft sind Logos oder sche­ma­tisch ge­stal­te­te An­fahrts­skiz­zen als Vek­tor­gra­fi­ken erstellt. Ihr großer Vorteil ist, dass sie sich ohne Probleme ver­grö­ßern und ver­klei­nern (skalieren) lassen, ohne dass dadurch ein Qua­li­täts­ver­lust in der Dar­stel­lung entstünde.

Tipp

Was sollte man über den Un­ter­schied zwischen Pixel- und Vek­tor­gra­fi­ken wissen? Unser Ratgeber Pi­xel­gra­fik vs. Vek­tor­gra­fik versorgt Sie mit allen wichtigen und pra­xis­re­le­van­ten In­for­ma­tio­nen.

Was ist eine Vek­tor­da­tei? Die Vek­tor­gra­fik im Detail

Vek­tor­gra­fi­ken gehören zu den am längsten be­stehen­den Gra­fik­for­ma­ten in der elek­tro­ni­schen Da­ten­ver­ar­bei­tung. Sie ent­stan­den als Grundlage für das Computer Aided Design (CAD-Programme). Eine Vek­tor­gra­fik benutzt zur Dar­stel­lung einer Form Vektoren, die dann in einer Vek­tor­da­tei ge­spei­chert werden.

Ein Vektor ist ein ver­gleich­bar mit einem Pfeil, der einen Ursprung, eine Richtung und eine Länge besitzt. Das Pfeilende befindet sich am Ursprung eines Ko­or­di­na­ten­sys­tems, die Pfeil­spit­ze zeigt auf einen Punkt, der durch Länge und Winkel des Vektors definiert ist. Um von der Pfeil­spit­ze aus bei­spiels­wei­se einen Kreis als Vek­tor­gra­fik zu zeichnen, müssen nun nicht tausende einzelne Punkte (Pixel) definiert werden, sondern von der Pfeil­spit­ze aus – im Beispiel der Mit­tel­punkt des Kreises – müssen der Abstand des Kreis­um­fangs und eine Drehung dieser In­for­ma­ti­on um 360 Grad fest­ge­legt werden. Dazu kommt eine Farb­infor­ma­ti­on. Zu­sam­men­ge­fasst werden alle diese In­for­ma­tio­nen in der so­ge­nann­ten Bild­be­schrei­bung, die mit der Vek­tor­da­tei zusammen ge­spei­chert wird.

HiDrive Cloud-Speicher
Ihr sicherer Online-Speicher
  • Daten zentral speichern, teilen und be­ar­bei­ten
  • Ser­ver­stand­ort Deutsch­land (ISO 27001-zer­ti­fi­ziert)
  • Höchste Da­ten­si­cher­heit im Einklang mit der DSGVO

Die Kon­struk­ti­on komplexer Vek­tor­gra­fi­ken nutzt dann mehrere Vektoren, die auf Punkte in der Grafik zeigen und falls er­for­der­lich auch noch In­for­ma­tio­nen zur Krümmung oder von Winkeln um­ge­ben­der Linien enthalten.

Der umgebende Pfad sorgt dafür, dass immer eine glatte Kante am Rand der Grafik erhalten bleibt, egal wie groß man sie „aufzieht“.

Überblick der gängigen Vek­tor­for­ma­te

In der Praxis haben sich bei ver­schie­de­nen Her­stel­lern einige Formate für Vek­tor­da­tei­en etabliert.

Vek­tor­for­mat Abkürzung Ein­satz­be­rei­che Erklärung
Adobe Il­lus­tra­tor AI Gra­fik­erstel­lung für Print und Web Vek­tor­ori­en­tier­tes Aus­tausch­for­mat; speichert wieder be­ar­beit­ba­re Vek­tor­gra­fi­ken
Scalabe Vector Graphics SVG Web Ska­lier­ba­res Bild­for­mat; kann animiert und mit CSS ma­ni­pu­liert werden
En­cap­su­la­ted Post­Script EPS Print Basiert auf der Sei­ten­be­schrei­bungs­spra­che Post­Script
Portable Document Format PDF Print, Web, Ar­chi­vie­rung Welt­wei­ter Standard für die Ver­tei­lung elek­tro­ni­scher Dokumente
Freehand Format FH Farbige und nicht farbige Il­lus­tra­tio­nen Speichert erstellte Zei­chen­we­ge mit zu­ge­wie­se­nen Farben und Füllungen
Corel Draw Format CDR Gra­fik­erstel­lung für Print und Web Un­kom­pri­mier­tes Gra­fik­for­mat mit Funk­tio­na­li­tät wie AI

Wann verwendet man eine Vek­tor­gra­fik?

Als Vek­tor­da­tei ge­spei­cher­te Grafiken werden überall dort benötigt, wo man sich die Option auf beliebige Ver­grö­ße­rung (Ska­lie­rung) einer Grafik erhalten möchte. Wenn Sie bei­spiels­wei­se ein Logo erstellen, sollte dieses sowohl für die Website als auch für das Fir­men­schild an der Bürotür oder auf einem Mes­se­pla­kat ver­wend­bar – also ska­lier­bar – sein. Dafür ist eine Vek­tor­gra­fik, die mit Adobe Il­lus­tra­tor erstellt wird, die erste Wahl. Die Vek­tor­da­tei mit der Endung .ai kann daraus in beliebige andere, später nötige Formate ex­por­tiert werden.

Wichtig zu wissen: Zur Ausgabe der Datei in einem Medium wird das Bild immer gerastert, da die Dar­stel­lung sowohl im Druck als auch auf dem Bild­schirm mit Ras­ter­punk­ten bzw. Pixeln erfolgt. Auch das neuere SVG-Format für Web­gra­fi­ken wird letztlich gerastert auf dem Bild­schirm aus­ge­ge­ben. Al­ler­dings kann es auf dem Bild­schirm beliebig ver­klei­nert oder ver­grö­ßert werden, ohne dass „Pi­xel­trep­pen“ wie in der eingangs gezeigten Pi­xel­gra­fik entstehen. Zudem kann eine SVG-Vek­tor­gra­fik direkt per HTML-Syntax erstellt und mittels CSS ma­ni­pu­liert und sogar animiert werden.

Vorteile einer Vek­tor­gra­fik

Mit einer Vek­tor­da­tei hat man ein jederzeit ska­lier­ba­res Vek­tor­for­mat zur Hand. Bei Grö­ßen­än­de­run­gen werden Ab­stands­in­for­ma­tio­nen verändert und keine Pixel – ebenso beim Ver­schie­ben einer Vek­tor­gra­fik. Handelt es sich um Vek­tor­da­tei­en, die etwa mit Adobe Il­lus­tra­tor (.ai) oder CorelDraw (.cdr) erzeugt wurden, bleiben diese Aus­gangs­da­tei­en auch be­ar­beit­bar. Vek­tor­gra­fi­ken benötigen weniger Spei­cher­platz, da die zu spei­chern­de In­for­ma­ti­ons­men­ge für eine Grafik im Vergleich zu Pi­xel­gra­fi­ken geringer ist. Dem gegenüber steht der technisch bedingte Nachteil, dass zur Dar­stel­lung auch der größten Vek­tor­gra­fik immer eine Rasterung erfolgen muss.

Um Vek­tor­gra­fi­ken zu erstellen, existiert diverse Software am Markt, vom Abomodell bis zu kos­ten­lo­sen Open-Source-Lösung. Im pro­fes­sio­nel­len Bereich kommt Adobe Il­lus­tra­tor zur Anwendung. Auch mit Adobe Photoshop lassen sich Vek­tor­gra­fi­ken erstellen. Als kos­ten­lo­ses Vek­tor­gra­fik-Programm bietet Inkscape einen an­spre­chen­den Funk­ti­ons­um­fang inklusive SVG-Kom­pa­ti­bi­li­tät.

Hinweis

Möchten Sie ein Favicon erstellen? Dies funk­tio­niert entweder mit gängigen Gra­fik­pro­gram­men oder einem prak­ti­schen Favicon Generator.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen
Zum Hauptmenü