Vektor- oder Pixelgrafik: welches Format für Illustrationen?

Das PNG für den Empty State sah in 1x gut aus. In einem Hero-Bereich mit 2x wurden die Kanten matschig. Dann wollte das Markenteam Marineblau statt Senfgelb, und in Figma war die Datei nur ein einziges, gesperrtes Bild.

Genau darum geht es bei der Frage Vektor- oder Pixelgrafik. Nicht um Informatik, sondern darum, ob du nächsten Dienstag noch eine Farbe ändern kannst.

Ich erstelle Produktbilder mit Illustro. Für UI-Elemente öffne ich den SVG-Generator, stelle den Stil auf Flat Design und exportiere eine SVG. Für 3D im Knet-Look und für Kinderbuchseiten bleibe ich bewusst bei PNG oder JPEG. Das Format richtet sich nach der Aufgabe.

Was Vektor- und Pixelgrafik für Illustrationen bedeuten

Eine Pixelgrafik, auch Rastergrafik genannt, ist ein Gitter aus farbigen Bildpunkten: PNG, JPEG, GIF, TIFF, WEBP. Zoomst du hinein, siehst du Quadrate. Ziehst du sie über ihre Originalgröße hinaus, wird sie pixelig.

Adobes Vergleich von Raster- und Vektorgrafiken zieht dieselbe Grenze. Fotos und gemalte Details gehören hierher, weil die Datei jeden einzelnen Farbwert speichert.

Eine Vektorillustration besteht aus Formen, Linien und Kurven, die als mathematische Beschreibung gespeichert sind. Im Web ist SVG das Format dafür. Ob 24-px-Icon oder breiter Hero-Bereich: Die Kante bleibt eine saubere Linie.

Den Test, den ich wirklich mache, habe ich aus der SVG-Übersicht von MDN. Öffne die Datei. Siehst du XML, das einen Pfad beschreibt, hast du eine Vektorgrafik. Steckt darin nur eine Bitmap in einer SVG-Hülle, ist es immer noch eine Pixelgrafik. Dann hat der Dateiname gelogen.

Bei Illustrationen willst du meist eins von zwei Dingen: eine Grafik neben der Oberfläche, deren Farben und Größe du frei ändern kannst, oder das Weiche von Malfarbe, Knete und Licht. Entscheidend ist, welches Format diese Aufgabe erfüllt, nicht welches „professioneller“ klingt.

Vektor- und Pixelgrafik im Überblick

Für Vektor- und Pixelgrafiken allgemein sähe die Tabelle genauso aus. Nur die Zeile zu Illustrationen übersehen viele Teams. Ein hübsches PNG von einem Fuchs bleibt eine Pixelgrafik. Ein Fuchs im Flat Design, dessen Farben du mit Farben ändern anpasst, ist eine Vektorgrafik.

Wann eine Vektorgrafik das richtige Format ist

Empty States, Feature-Reihen, eine Grafik, die mit 24 px in der Navigation und mit 1600 px auf der Landingpage stehen muss: Da will ich eine SVG.

Auch Figma kommt mit Vektoren besser zurecht. Du bekommst einzelne Formen statt einer einzigen zusammengefügten Ebene. Für den umgekehrten Weg, aus Figma heraus, beschreibt Figmas Hilfe zum Export, wie du eine Auswahl über das Menü Kopieren/Einfügen als als SVG kopierst.

Stimmt die Pose schon und nur das Gelb nicht, tauschst du bei einer Vektorgrafik einfach die Füllung. In Illustro heißt das Farben ändern und kostet nichts. Das geht, solange die Datei echtes SVG-Markup enthält.

Was eine Flat-Illustration ausmacht, ist der Look: flächige Formen, wenige Farben, meist ein cremefarbener Hintergrund. Die Vektorgrafik ist die Datei darunter. Auch Line Art ist eine Vektorgrafik, wirkt aber wie mit Tusche gezeichnet und nicht wie aus Flächen gebaut.

Beschreib eine Grafik, kein Foto. Nenn das Motiv, die Pose und zwei oder drei Füllfarben. Lass „cinematic“ und „8k“ weg. Es ist dieselbe Regel wie in Icons als SVG erstellen und die Farben später noch ändern.

Logos sind ein anderes Thema. Kleine flächige Formen können gut lesbar sein, aber Illustro ist kein Logo-Generator. Ein Zeichen, das auf tausend Gegenstände gedruckt wird, braucht nach wie vor jemanden vom Fach, der mit dem Zeichenstift arbeitet.

Wann eine Pixelgrafik das richtige Format ist

3D im Knet-Look sieht aus wie ein kleines Objekt im Fotostudio: matt, rundlich, ausgeleuchtet. Dieses Licht besteht aus Pixeln, und eine SVG, die es ehrlich wiedergibt, gibt es in Illustro nicht. Lade ein PNG herunter, wenn du Transparenz brauchst, ein JPEG, wenn ein weißer Hintergrund reicht.

Ich habe schon versucht, eine Knetfigur zu „vektorisieren“. Heraus kommen eintönige Farbkleckse, und der Grund, warum du 3D gewählt hast, ist weg. Geht es dir um so eine Figur, lies Maskottchen in 3D ohne Blender und bleib bei der Pixelgrafik.

Bilder im Kinderbuch-Stil wirken mit Absicht wie Gouache. Die weichen Farben sind der Sinn der Sache. Zeichnest du sie in harte Pfade nach, ist die Seite kaputt. Also PNG oder JPEG. Hintergrund entfernen kostet bei Kinderbuch und 3D 1 Credit. Bei Flat Design und Line Art gibt es diese Funktion nicht.

Fotos bleiben Pixelgrafiken. Automatisches Nachzeichnen kann ein Logo als Vektor nachbauen, die Körnung eines Fotos behält es nicht. Brauchst du nur die Pose, kannst du das Foto in eine Flat-Illustration umwandeln (3 Credits). Das Foto bekommt dabei einen neuen Stil, danach kannst du es als SVG exportieren (1 Credit). Eine verlustfreie Kopie des Originalfotos als Vektor ist das nicht. Fotos von Menschen lädst du nur hoch und veröffentlichst die Illustration nur, wenn sie damit einverstanden sind. Bei Kindern entscheiden die Eltern.

Vektor oder Pixel ist hier eine Stilfrage, keine Frage der Qualität. Weiche Bilder wollen Pixel, harte Formen wollen Pfade.

SVG, PNG oder JPEG

Wer „PNG vs. SVG“ sucht, meint meistens Vektor- oder Pixelgrafik. Und so sieht das Download-Menü in Illustro aus.

SVG. Echte Vektorgrafik. Farben lassen sich ändern, die Grafik skaliert ohne Matsch. Als SVG exportieren kostet bei generierten oder umgewandelten Bildern 1 Credit, bei einer selbst hochgeladenen SVG nichts. Bei Kinderbuch und 3D ist die Option ausgeblendet.

PNG. Pixelgrafik. Kostenlos. Behält die Transparenz. Gut für ein Standbild, an dessen Pfaden du nichts mehr ändern willst. Illustro kann eine SVG direkt im Browser in ein hochaufgelöstes PNG umrechnen. Sobald du das PNG herunterlädst, hast du wieder Pixel.

JPEG. Pixelgrafik. Kostenlos. Füllt den Hintergrund weiß. Praktisch für E-Mails, Folien und Tools, die mit Transparenz nicht klarkommen.

SVG ist nicht automatisch besser, sondern dann, wenn du Pfade brauchst. PNG ist besser, wenn das Bild seinen Look schon hat und Nachzeichnen ihn nur verschlechtern würde.

So entscheide ich in Illustro zwischen Vektor und Pixel

1. Kläre die Aufgabe. UI und Landingpage: Flat Design oder Line Art. Maskottchen wie ein Spielzeug: 3D-Illustration. Bilderbuch: Kinderbuch.
2. Prüf den Modus. Illustro Light zum Ausprobieren (1 Credit bei Flat Design oder Line Art, 2 bei 3D oder Kinderbuch). Illustro MAX für das fertige Bild (2 bzw. 4). Der Editor startet im Light-Modus, also schau auf die Einstellung, bevor du auf Generieren klickst.
3. Beschreib das Motiv. Für einen Empty State als Vektorgrafik füge ich etwa das ein: „Person ohne Gesicht gießt eine Hängepflanze, Seitenansicht, Pullover in Terrakotta, marineblaue Hose, cremefarbener Hintergrund, einfache geometrische Formen, keine Gesichtszüge, keine Verläufe“.
4. Klick auf Generieren und prüf die Pose.
5. Vektorstile: Öffne Farben ändern, wenn die Farben nicht stimmen. Soll ein neues Objekt dazukommen, nimm Mit KI bearbeiten (3 Credits). Farben ändern kann nichts Neues zeichnen.
6. Pixelstile: Nimm Mit KI bearbeiten oder generiere neu. Brauchst du das Motiv freigestellt, gibt es Hintergrund entfernen.
7. PNG oder JPEG lädst du kostenlos herunter. Als SVG exportieren (1 Credit) gibt es nur bei Stilen, die es unterstützen.

Diese Runde drehe ich im SVG-Generator, wenn die Datei eine Grafik bleiben soll. Die SVG setzt du mit dem Figma-Plugin „Illustro AI“ ein, oder du exportierst sie und ziehst sie auf die Arbeitsfläche.

Zwing 3D oder eine Kinderbuchseite nicht in eine SVG. Du wartest sonst auf einen Button, den es nicht gibt. Wenn du unsicher bist, halte dich an die Aufteilung oben: Flat Design und Line Art gibt es als SVG, 3D und Kinderbuch bleiben PNG oder JPEG.

Häufig gestellte Fragen

Ist JPEG eine Pixel- oder eine Vektorgrafik?

JPEG ist eine Pixelgrafik. Die Datei speichert ein Gitter aus Pixeln, meist mit einer Kompression, die einen Teil der Farbinformation verwirft. Die Farbe eines Pfads kannst du in einem JPEG nicht ändern wie in einer SVG. Nimm das Format für Fotos, 3D im Knet-Look und Kinderbuchbilder, die nicht weit über ihre Pixelgröße hinaus vergrößert werden.

Ist SVG eine Vektor- oder eine Pixelgrafik?

SVG ist ein Vektorformat, solange die Datei echte Pfade enthält. Es ist XML, das Formen beschreibt, kein Gitter aus Quadraten. Manche Tools packen ein PNG in eine Datei mit der Endung .svg. Öffne die Datei. Kannst du keine Füllung auswählen, hast du immer noch eine Pixelgrafik.

Ist PNG eine Vektor- oder eine Pixelgrafik?

PNG ist eine Pixelgrafik. Praktisch ist das Format, weil es Transparenz behält und keine JPEG-Kompressionsartefakte erzeugt. In Illustro ist der PNG-Download bei jedem Stil kostenlos. Für 3D und Kinderbuch ist es der richtige Export. Bei Flat Design und Line Art taugt es eher als Vorschau, wenn du die Farben später nicht mehr ändern musst.

Kann ich ein PNG in eine Vektorgrafik umwandeln?

Ja, indem du es nachzeichnen lässt. Dabei entstehen neue Formen, die den Pixeln möglichst nahekommen. Eine Zeichnung, die nie aus Pfaden bestand, holt das aber nicht zurück. In Illustro geht das mit Bild vektorisieren: Du lädst ein PNG oder JPG hoch und bekommst für 1 Credit eine SVG, am saubersten bei klaren Kanten und wenigen Farben. Für Fotos gibt es „Foto in Illustration umwandeln“: Daraus wird ein Bild im Stil Flat Design (3 Credits), der SVG-Export kostet dann 1 Credit. Das ist ein neuer Stil, kein exakter Umriss des ursprünglichen Bildes. Für Fotos von Menschen gilt auch hier: nur mit ihrem Einverständnis.

Ist SVG besser als PNG?

Für UI-Illustrationen ja, wenn du skalieren oder Farben ändern musst. Für 3D im Knet-Look und Kinderbuchbilder nicht. Diese Bilder leben vom Licht und vom Weichen, und genau das ginge in einer SVG verloren. Nimm dort PNG oder JPEG und heb dir SVG für Flat Design und Line Art auf.

Ist ein PDF eine Vektorgrafik?

Ein PDF kann Vektoren, Pixel oder beides enthalten. Ein einseitiges PDF mit einem Logo besteht vielleicht aus Pfaden, ein PDF mit einem Foto trotzdem aus Pixeln. Trau nicht der Dateiendung, sondern prüf, ob du eine Form auswählen kannst. Für Illustrationen im Web exportiere ich aus Illustro ohnehin SVG oder PNG, kein PDF. Ob Vektor oder Pixel, entscheidet nicht der Dateiname, sondern was in der Datei steckt.