Zum Inhalt springen
Depixelise
Artikel · 5 Min.

Vektorgrafik: was sie ist und woran du sie erkennst

Eine Vektorgrafik besteht aus Formen statt Pixeln: der Unterschied zur Pixelgrafik, drei Tests zum Erkennen und warum dein Logo eine sein sollte.

Von Gaël Pons

Veröffentlicht am

ein Laptop im Sonnenlicht zeigt das stark vergrößerte Logo ORBE. mit sichtbaren Ankerpunkten, daneben dieselbe Marke winzig auf einer Visitenkarte, ein Depixelise-Sticker klebt am Laptop

Eine Vektorgrafik ist ein Bild aus Formen (Linien, Kurven und Farbflächen) statt aus winzigen Farbquadraten, den Pixeln. Darum bleibt sie in jeder Größe scharf, auf der Visitenkarte genauso wie auf dem Messebanner. Verlangt deine Druckerei „Vektordaten“, meint sie genau diese Art von Datei.

Was ist eine Vektorgrafik?

Eine Vektorgrafik ist ein Bild, das nicht Punkt für Punkt gespeichert wird, sondern als Beschreibung seiner Formen. Die deutschsprachige Wikipedia definiert sie als Grafik aus grafischen Primitiven wie Linien, Kreisen, Polygonen oder allgemeinen Kurven, also aus einfachen Grundformen. Gleichbedeutend spricht man von einem Vektorbild.

Ein Kreis zeigt, wie das funktioniert. Die Datei hält nur fest, wo sein Mittelpunkt liegt, wie groß sein Radius ist, wie dick die Linie ist und welche Farbe sie hat. Beim Öffnen berechnet das Programm daraus das Bild, und zwar in genau der Größe, in der du es gerade brauchst. Gedehnt wird dabei nichts: Jede Form entsteht in der gewünschten Größe neu.

Was ist der Unterschied zwischen Vektorgrafik und Pixelgrafik?

Der Unterschied zwischen Vektorgrafik und Pixelgrafik liegt im Aufbau: Die Vektorgrafik beschreibt Formen, die Pixelgrafik speichert ein festes Raster aus Bildpunkten. Die Wikipedia beschreibt die Rastergrafik, auch Pixelgrafik oder Bitmap genannt, als rasterförmige Anordnung von Pixeln, denen jeweils eine Farbe zugeordnet ist. Fotos aus der Digitalkamera und eingescannte Vorlagen sind solche Pixelgrafiken, genau wie jeder Screenshot.

PixelgrafikVektorgrafik
Gespeichert wirddie Farbe jedes einzelnen PixelsFormen mit Lage, Größe und Farbe
Bildgrößefest, durch die Zahl der Pixel vorgegebenfrei, bei jeder Anzeige neu berechnet
Stark vergrößertunscharf, Kanten mit Stufenglatt und scharf
Entsteht meist inKamera, Scanner, BildbearbeitungZeichenprogramm wie Illustrator oder Inkscape
Ideal fürFotos mit feinen FarbübergängenLogos, Schriftzüge, Icons, Pläne

Was das in der Praxis bedeutet, siehst du beim Vergrößern. Ziehst du eine Pixelgrafik größer, wachsen ihre Pixel mit: Laut Wikipedia sieht sie dann unscharf aus. Dazu werden an schrägen Kanten Stufen sichtbar, weil jedes Pixel ein kleines Quadrat ist. Eine Vektorgrafik wird dagegen in jeder Größe neu gezeichnet und behält ihre glatten Kanten.

Wo begegnen dir Vektorgrafiken im Alltag?

Vektorgrafiken begegnen dir jeden Tag, meist ohne dass du sie bemerkst: in Schriften, Firmenlogos, Symbolen auf Webseiten und in Beschriftungen aus Folie.

  • Schriften: Bei Outline-Schriften ist jeder Buchstabe als Umriss gespeichert, also als Vektorgrafik. Darum bleibt ein Text scharf, so stark du ihn auch vergrößerst.
  • Logos: Gestaltet eine Agentur oder ein Grafiker ein Logo, entsteht es in der Regel in einem Vektorprogramm. Im Umlauf sind später aber oft nur JPG- oder PNG-Kopien, etwa aus der E-Mail-Signatur oder von der Website.
  • Icons im Web: Auf Webseiten liegen Vektorgrafiken meist im offenen Format SVG vor, zum Beispiel Pfeile, Menüsymbole und das Logo in der Kopfzeile.
  • Folienbeschriftung: Die Schrift auf Schaufenstern, Firmenwagen und Schildern schneidet ein Schneideplotter aus Folie, und zwar entlang der Konturen einer Vektorgrafik.
  • Pläne und technische Zeichnungen: Für sie kommen CAD-Programme zum Einsatz, die ebenfalls mit Vektoren arbeiten.

Keine Vektorgrafiken sind dagegen die Fotos auf deinem Handy, Screenshots und die meisten Bilder, die du aus dem Netz oder aus sozialen Netzwerken speicherst.

Wie erkennst du, ob ein Bild eine Vektorgrafik ist?

Ob ein Bild eine Vektorgrafik ist, erkennst du am einfachsten mit dem Zoom-Test: Vergrößere eine Rundung oder einen Buchstaben, so weit es geht. Bleibt die Kante glatt, ist es eine Vektorgrafik; tauchen Treppenstufen oder ein verschwommener Rand auf, sind es Pixel. Die Dateiendung und die Pfade in der Datei liefern zwei weitere Hinweise.

Wie funktioniert der Zoom-Test?

Der Zoom-Test funktioniert in praktisch jedem Browser: Du vergrößerst die Datei Stufe für Stufe und beobachtest dabei ihre Kanten, ein Grafikprogramm brauchst du nicht. Zieh die Datei in ein Browserfenster: Eine SVG-Datei wird dort angezeigt, und auch ein PDF öffnet sich ohne zusätzliche Software. Drück dann mehrmals Strg und +, am Mac ⌘ und +, oder nutze den Zoom deines PDF-Programms.

Schau dir den Bogen eines „o“, die Rundung eines „a“ oder den Rand eines Kreises an, denn an Kurven zeigen sich Pixel zuerst. Zoome mindestens auf 400 %: Eine Vektorgrafik sieht dort genauso glatt aus wie bei 100 %.

Was sagt die Dateiendung über eine Vektorgrafik?

Die Dateiendung sagt dir, ob eine Datei eine Vektorgrafik sein kann, aber nicht, ob sie wirklich eine ist. PNG, GIF, JPEG, TIFF und BMP nennt die Wikipedia als die bekanntesten Formate für Rastergrafiken: Eine Datei mit einer dieser Endungen ist immer eine Pixelgrafik, wie groß sie auch ist. Vektorgrafiken stecken dagegen in SVG-, PDF- und EPS-Dateien oder im Illustrator-Format AI.

Diese zweite Gruppe kann allerdings auch Pixel enthalten. Ein PDF kann sowohl Raster- als auch Vektorgrafiken wiedergeben, und das EPS-Format unterscheidet nicht zwischen Bitmap und Vektor. Selbst eine SVG-Datei kann ein JPG oder PNG enthalten, ohne dass ihr Name darauf hinweist. Warum ein JPG in einer SVG-Hülle noch keine Vektorgrafik ist, erklärt unser Ratgeber JPG in SVG umwandeln. Und wer eine .png-Datei in .svg umbenennt, ändert gar nichts: Die Pixel bleiben, wo sie sind.

Wie findest du die Pfade in einer SVG-Datei?

Die Pfade in einer SVG-Datei findest du mit einem einfachen Texteditor, denn SVG ist ein XML-basiertes Dateiformat. Öffne die Datei also im Editor deines Rechners statt im Browser. Viele Einträge, die mit <path beginnen, stehen für Formen: Das Element <path> ist laut MDN das generische Element zur Definition einer Form. Ein Eintrag mit <image, oft gefolgt von einer sehr langen Zeichenkette, steht dagegen meist für ein eingebettetes Pixelbild.

In einem Vektorprogramm wie Inkscape oder Illustrator klappt der Test auch ohne Code: Eine Vektorgrafik lässt sich Form für Form auswählen, notfalls nach einem Doppelklick auf die Gruppe; ein Pixelbild bleibt ein einziger Block. Mehr über das Format selbst erfährst du in unserem Ratgeber zur SVG-Datei.

Warum sollte dein Logo eine Vektorgrafik sein?

Dein Logo sollte als Vektorgrafik vorliegen, weil es auf sehr unterschiedlich großen Flächen landet und weil Plotter, Laser und Siebdruck saubere Umrisse brauchen. Wikipedia nennt Vektorgrafiken ideal für Logos, die auf eine Visitenkarte passen und ebenso eine Werbetafel füllen sollen. Eine einzige Datei genügt dann für Briefpapier, Trikot und Ladenschild.

Für manche Verfahren ist die Vektordatei sogar unverzichtbar oder zumindest die beste Vorlage, etwa wenn die Maschine den Umrissen folgt oder die Druckform aus ihnen entsteht. Plotter und Laserbeschrifter können eine Vektorgrafik laut Wikipedia direkt auf verschiedene Materialien ausgeben, ohne sie vorher in Pixel umzuwandeln.

  • Flexfolie und Flockfolie: Der Schneideplotter schneidet das Motiv für T-Shirts und Trikots an den Konturen entlang aus.
  • Laserschnitt und Lasergravur: Zum Schneiden folgt der Laser den Umrissen der Datei. Gravieren kann er vektor- oder rasterorientiert, eine Vektordatei eignet sich für beide Arbeitsweisen.
  • Siebdruck: Jede Farbe bekommt ein eigenes Sieb, deshalb braucht die Druckerei sauber getrennte Farbflächen. Unser Ratgeber erklärt, was dein Logo für den Siebdruck braucht.
  • Stickerei: Der Stickbetrieb setzt dein Logo in eine Stickdatei um, die jeden einzelnen Stich festlegt; als Vorlage dient am besten eine Vektordatei.
  • Großformat: Auf Bannern, Schildern oder Fahrzeugen wird ein Logo so groß, dass die Pixel einer üblichen JPG- oder PNG-Datei sichtbar würden.

Nicht jeder Druck braucht aber eine Vektorgrafik. Für einen Flyer oder einen Digitaldruck auf Papier kann ein PNG mit genug Pixeln reichen: Bei 300 dpi braucht ein 10 cm breites Logo rund 1.181 Pixel Breite (10 ÷ 2,54 × 300). Welches Format deine Druckerei wirklich braucht, klärst du am besten mit einer kurzen Nachfrage.

Was kann eine Vektorgrafik nicht?

Eine Vektorgrafik kann kein Foto ersetzen: Für gescannte Bilder und Digitalfotos ist sie laut Wikipedia nicht geeignet. Haut, Laub oder ein Wolkenhimmel bestehen aus unzähligen feinen Farbübergängen, die keine Handvoll Formen wiedergeben kann. Wird ein Foto trotzdem vektorisiert, entsteht ein Bild aus Farbflächen, das eher an ein Plakat erinnert als an die Aufnahme.

Auch die Dateigröße hängt vom Motiv ab. Ein Logo aus wenigen Formen lässt sich oft mit deutlich geringerem Platzbedarf speichern als dasselbe Motiv aus Pixeln. Bei einer sehr detailreichen Illustration kehrt sich das um: Sehr viele Formen machen die Datei schwer, und auch die Anzeige braucht mehr Rechenarbeit.

Eine Vektorgrafik deines Logos bekommst du am einfachsten von dem, der es gestaltet hat: Frag die Agentur oder den Grafiker nach der Originaldatei als AI, EPS, SVG oder PDF. Oft steckt sie noch in einem alten E-Mail-Anhang, in der Ablage des Vereins oder auf einem USB-Stick aus der Gründungszeit.

Gibt es das Original nicht mehr, wird das vorhandene JPG oder PNG vektorisiert: Ein Programm erkennt die Umrisse in den Pixeln und baut sie als Formen neu auf. Das klappt mit einem Vektorprogramm wie Illustrator oder dem kostenlosen Inkscape und ebenso mit einem Online-Konverter. Logos mit klaren Flächen und wenigen Farben gelingen dabei am besten, weiche Schatten und Farbverläufe zerfallen dagegen in Farbstreifen. Wie du vorgehst und das Ergebnis kontrollierst, zeigt unser Ratgeber zum Vektorisieren in drei Schritten.

Wie wird aus deinem Pixel-Logo kostenlos eine Vektorgrafik?

Aus deinem Pixel-Logo wird kostenlos eine Vektorgrafik, wenn du es in den Konverter von Depixelise ziehst: Er nimmt Dateien bis 10 MB an, ob PNG, JPG, WebP oder SVG. In etwa zehn Sekunden werden die Umrisse als Pfade neu aufgebaut, und der Hintergrund wird automatisch entfernt.

Das Ergebnis erscheint sofort in Großansicht. Zoome auf 400 oder 800 % und mach den Zoom-Test direkt am neuen Logo: Bleiben die Rundungen glatt, hast du eine echte Vektorgrafik.

Per E-Mail bekommst du vier Dateien: die SVG-Datei, ein freigestelltes PNG mit 2.000 px, dazu dein Logo ganz in Schwarz (einfarbig) und ganz in Weiß (Negativ).

Es gibt keine Bezahlversion, du brauchst weder Konto noch Kreditkarte, und keine Datei trägt ein Wasserzeichen: Der Konverter ist 100 % kostenlos. Du kannst die Dateien also unverändert an jede Druckerei, Stickerei oder Werbetechnik weitergeben, die du selbst aussuchst.

Bei sehr kleinen Ausgangsbildern gibt es eine Grenze: Depixelise vergrößert sie automatisch und baut ihre Formen dabei neu auf. Leg das Ergebnis in so einem Fall neben dein Original und vergleiche es Buchstabe für Buchstabe.

FAQ

Hat eine Vektorgrafik eine Auflösung in dpi?

Nein, eine Vektorgrafik hat keine feste Auflösung: Laut Wikipedia eignet sie sich für die Wiedergabe auf dem Bildschirm und im Druck in beliebiger Auflösung. Eine dpi-Angabe bekommt erst die Kopie, die du als PNG oder JPG in einer bestimmten Größe exportierst. Wie groß diese Kopie scharf gedruckt werden kann, rechnet dir der DPI-Rechner Pixel in cm aus.

Kann ich eine Vektorgrafik mit meinem Drucker zu Hause drucken?

Ja, eine Vektorgrafik druckst du mit jedem Drucker zu Hause: Beim Drucken rechnet das Programm die Formen in die Auflösung deines Druckers um, deshalb wird der Ausdruck in jeder gewählten Größe scharf. Die Größe legst du im Druckdialog über die Skalierung fest; die Grenze setzt nur das größte Papierformat, das dein Drucker verarbeitet.

Wie groß kann man eine Vektorgrafik drucken?

Eine Vektorgrafik kannst du so groß drucken, wie du willst: Laut Wikipedia lässt sie sich ohne Qualitätsverlust beliebig skalieren, vom Button bis zur Hauswand. Die Ausnahme sind Pixelbilder, die in der Datei stecken, etwa ein Foto oder eine Textur: Sie bleiben Pixel und werden beim Vergrößern unscharf.

Wo gibt es kostenlose Vektorgrafiken?

Kostenlose Vektorgrafiken findest du zum Beispiel in freien Mediensammlungen wie Wikimedia Commons, aber „kostenlos“ heißt nicht automatisch „frei verwendbar“. Auf Commons sind nur freie Inhalte erlaubt, die auch kommerziell genutzt werden dürfen; die Nennung des Urhebers kann trotzdem verlangt werden. Bei anderen Bildportalen prüfst du die Lizenz jeder einzelnen Datei. Und das Logo einer fremden Firma oder eines Vereins darfst du nicht einfach drucken, nur weil die Datei gratis im Netz liegt.

Kann man aus einer Vektorgrafik ein JPG machen?

Ja, aus einer Vektorgrafik lässt sich jederzeit ein JPG oder PNG machen: Das Programm berechnet die Formen in der Größe, die du festlegst, und speichert das Ergebnis als Pixel. Zurück geht es nur über das Vektorisieren, deshalb solltest du die Originaldatei immer aufbewahren.