Skalierbare Grafikformate

Was ist eine Vektorgrafik?

Vector Graphics

Eine Vektorgrafik ist ein Bild, das nicht aus einzelnen Bildpunkten besteht, sondern aus mathematisch beschriebenen Pfaden mit Kontur und Füllung. Deshalb lässt sie sich auf jede Größe bringen, ohne dass Kanten ausfransen. Typische Vektorformate sind SVG, AI, EPS und PDF.

Sobald ein Logo auf eine Messewand, auf eine Visitenkarte und in eine Stickerei soll, brauchst du eine Datei, die sich vergrößern lässt, ohne dass die Kanten zerfallen.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt

Beschrieben durch: Pfade mit Ankerpunkten und Kurven
Typische Formate: SVG, AI, EPS, PDF
Unverzichtbar bei: Logos, Schnittdaten, Plotten, Gravur
Verwechselt mit: Pixelbild, das nur groß gespeichert ist

Pfade, Ankerpunkte, Kurven

Ein Pfad besteht aus Ankerpunkten, die durch Strecken oder Kurven verbunden sind. Bei Kurven hängen an den Punkten Griffe, die Richtung und Krümmung bestimmen, das ist das Bézier-Prinzip. Ob ein Pfad sichtbar ist, entscheiden Kontur und Füllung: Konturbreite, Eckenform und Farbe auf der einen Seite, Farbe oder Verlauf der Fläche auf der anderen.

Weil jedes Element ein eigenständiges Objekt bleibt, arbeitest du nicht mit einem Stapel aus Pixeln, sondern mit Objekten in einer Reihenfolge. Zwei Kreise lassen sich zu einer neuen Form vereinen, voneinander abziehen oder schneiden. Text bleibt bearbeitbar, bis du ihn bewusst in Pfade umwandelst. Und weil die Datei nur die Beschreibung der Formen speichert, ist ein Logo als Vektordatei oft nur wenige Kilobyte groß, egal ob es auf eine Briefmarke oder ein Plakat soll.

Vektorformate und ihre Dateiendungen

Eine Vektordatei erkennst du meist schon an der Endung. Die folgenden Formate begegnen dir im Alltag am häufigsten:

Endung	Format	Typischer Einsatz
.svg	Scalable Vector Graphics	Web, Icons, Austausch zwischen Programmen
.ai	Adobe Illustrator	Arbeitsdatei für Logos und Illustrationen
.eps	Encapsulated PostScript	Älteres Austauschformat für Druck
.pdf	Portable Document Format	Druckdaten, Weitergabe an Dritte
.cdr	CorelDRAW	Arbeitsdatei, verbreitet in Werbetechnik
.afdesign	Affinity Designer	Arbeitsdatei der Affinity-Programme
.dxf / .dwg	CAD-Formate	Laser, Plotter, Fräse, Technische Zeichnung
.emf / .wmf	Windows Metafile	Grafiken in Office-Dokumenten

Vorsicht bei PDF, EPS und AI: Diese Formate sind Container. Sie können Vektoren enthalten, aber ebenso gut ein eingebettetes Pixelbild. Die Endung verrät also, dass eine Vektorgrafik drin sein kann, nicht, dass eine drin ist. JPG, PNG, GIF, TIFF und WebP sind dagegen immer Pixelformate.

Womit Vektorgrafiken entstehen

Vektorzeichnungen legst du in einem Vektorprogramm an, nicht in einem Bildbearbeitungsprogramm wie Photoshop. Die verbreitetsten sind:

Adobe Illustrator

Der Branchenstandard in Agenturen und Druckvorstufe, im Abo der Creative Cloud.
Affinity Designer

Vektorprogramm der Affinity-Familie, das sich gut mit Affinity Photo und Publisher verbindet.
CorelDRAW

Seit Jahrzehnten verbreitet in Werbetechnik, Beschriftung und Schilderbau.
Inkscape

Freie Open-Source-Software, die SVG als eigenes Dateiformat nutzt.

Daneben arbeiten CAD-Programme wie AutoCAD intern ebenfalls mit Vektoren, Office-Programme mit Formen und Diagrammen, und Layoutprogramme wie InDesign bauen Rahmen und Linien als Vektorobjekte auf.

Wo Vektoren Pflicht sind

Alles, was in unterschiedlichen Größen erscheint, gehört in Vektorform: Logo, Signet, Wortmarke, Piktogramme. Dasselbe Logo sitzt auf der Visitenkarte und auf der Fahrzeugtür, und in beiden Fällen muss die Kante sauber sein.

Der zweite Bereich ist die Weiterverarbeitung durch Maschinen. Folienplotter, Laserschneider, Fräsen und Stickmaschinen brauchen Bahnen, denen ein Werkzeug folgen kann, kein Raster. Auch die Druckerei fragt nicht ohne Grund nach einem PDF mit eingebetteten Schriften: Nur so steht bei der Ausgabe genau die Schrift im Dokument, die du gewählt hast.

Was Vektoren nicht können

Fotos bleiben Pixelsache. Ein Foto lebt von Millionen feiner Farbübergänge, die sich nicht sinnvoll als Pfade beschreiben lassen. Eine automatisch nachgezeichnete Fotografie besteht aus Tausenden Flächen und wirkt plakativ, als Stilmittel kann das gewollt sein, als Ersatz für das Foto nicht.

Auch bei Effekten lohnt Vorsicht. Transparenzen, weiche Schatten und Verläufe werden beim Druck aufgelöst und können an Kanten sichtbare Übergänge erzeugen. Deshalb gehört die Frage nach dem Ausgabeweg an den Anfang: Ein Motiv für den Folienplotter baust du anders auf als eines für den Offsetdruck.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt

Nicht verwechseln

Vektorgrafik und was oft damit gleichgesetzt wird

Vektorgrafik gegen Pixelgrafik

Eine Pixelgrafik, auch Rastergrafik, speichert für jeden Bildpunkt eines festen Rasters einen Farbwert. Damit lassen sich fotografische Details abbilden, beim Vergrößern geht die Schärfe aber sofort verloren. Fotos, Retusche und Composing gehören dorthin, Logos und Beschriftungen nicht.

Vektorgrafik gegen SVG

SVG ist ein Dateiformat für Vektorgrafiken, das im Web direkt im Quelltext der Seite stehen und sich per CSS einfärben lässt. Vektorgrafik ist das Prinzip, SVG eine von mehreren Verpackungen dafür, neben PDF, AI und EPS.

Vektorgrafik gegen Hochauflösendes Pixelbild

Ein PNG mit 5.000 Pixeln Breite wirkt am Bildschirm gestochen scharf, bleibt aber ein Raster. Für den Plotter oder eine Vergrößerung über diese Pixelzahl hinaus taugt es nicht, egal wie groß die Datei ist.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt

In der Praxis

Vektor draufgeschrieben heißt noch lange nicht vektorisiert

Ein Kunde liefert das Logo als EPS oder PDF, also müsste es Vektor sein. Drin steckt trotzdem oft ein Pixelbild, das jemand in die Datei gelegt hat. Erkennen kannst du das in zwei Sekunden: kräftig hineinzoomen, und wenn die Kanten weich werden, ist da keine Kurve. Sauber wird es dann nur durch Nachzeichnen, denn das automatische Vektorisieren macht aus jedem Ausfransen einen eigenen Ankerpunkt.

Der zweite Stolperstein sind Schriften. Wer eine Datei weitergibt, ohne den Text in Pfade zu wandeln, riskiert, dass beim Empfänger eine Ersatzschrift einspringt und das Layout verrutscht. Nach dem Wandeln lässt sich der Text allerdings nicht mehr ändern, deshalb behältst du immer eine bearbeitbare Fassung zurück.

Für Schneidplotter, Laser und Gravur zählt außerdem, wie die Pfade gebaut sind. Offene Konturen, zwei exakt übereinanderliegende Linien oder Flächen statt Konturen führen dazu, dass die Maschine dieselbe Stelle zweimal schneidet oder gar nicht erst anfängt. Und Haarlinien, die am Bildschirm gut aussehen, kommen im Druck als kaum sichtbarer Strich heraus.

Vektorgrafik lernen

Wie du Pfade präzise setzt und Logos druckfertig ablegst, übst du in den Trainings zur Affinity-Suite an eigenen Dateien.

Für Fotos, Retusche und Composings bleibt die Pixelwelt zuständig, um die es in den Kursen zur Bildbearbeitung mit Photoshop geht.

Kurse, die Vektorgrafik behandeln

Weitere Kurse aus diesem Bereich

Häufige Fragen

Welche Datei soll ich der Druckerei schicken?

In der Regel ein PDF, bevorzugt im Standard PDF/X, mit eingebetteten Schriften oder mit Text in Pfade umgewandelt, im richtigen Farbraum und mit Beschnitt. Programmeigene Arbeitsdateien wie AI oder CDR schickst du nur, wenn die Druckerei sie ausdrücklich anfordert.

Ist PNG eine Vektorgrafik?

Nein. PNG ist ein Pixelformat, auch wenn es Transparenz unterstützt und deshalb oft für Logos verwendet wird. Dasselbe gilt für JPG, GIF, TIFF und WebP. Brauchst du ein Logo als Vektor, frag nach SVG, AI, EPS oder einem PDF aus dem Vektorprogramm.

Wie öffne ich eine Vektordatei ohne Illustrator?

SVG-Dateien zeigt jeder Browser an, PDF jedes PDF-Programm. Zum Bearbeiten eignet sich das kostenlose Inkscape, das neben SVG auch PDF und, je nach Version, EPS und AI importieren kann. Affinity Designer und CorelDRAW öffnen ebenfalls die gängigen Fremdformate.

Warum sieht meine SVG im Browser anders aus als im Programm?

Meist liegt es an Schriften, die auf dem fremden Rechner fehlen, oder an Effekten, die der Browser anders umsetzt. Wandle Text in Pfade um oder bette die Schrift ein und prüfe Verläufe und Beschneidungen nach dem Export.

Quellen