Vektor- vs. Rastergrafik: Wann Welches Format

Wenn ein gedrucktes Logo unscharfe Kanten hat oder ein kleines Icon beim Vergrößern verpixelt wirkt, liegt die Ursache meist an einer einzigen technischen Entscheidung: dem Unterschied zwischen Vektor und Raster. Die beiden Bildtypen sehen am Bildschirm ähnlich aus, werden aber völlig unterschiedlich gespeichert. Wenn du weißt, welches du wann verwendest, erzielst du sauberere Ergebnisse in Druck und Web und vermeidest unnötige Dateigröße und Qualitätsverlust.

Was sind Vektor und Raster?

Raster-Bilder (Bitmap) bestehen aus winzigen farbigen Quadraten, den Pixeln. Jedes Foto, jeder Screenshot und jedes gescannte Dokument ist ein Rasterbild. Wie viel Detail das Bild trägt, bestimmt die Auflösung: ein Bild mit 2000×2000 Pixeln enthält vier Millionen Punkte, und die Farbe jedes einzelnen wird separat gespeichert.

Vektor-Bilder speichern statt Pixeln mathematische Definitionen: Punkte, Linien, Kurven und die Farben, die sie füllen. Ein Kreis wird beschrieben als „ein Kreis an diesem Mittelpunkt, mit diesem Radius, in dieser Farbe". Eine Vektorgrafik ist daher wie ein in Zahlen geschriebenes Zeichenrezept; sie wird für die jeweilige Anzeigegröße neu berechnet.

Vektor- vs. Raster-Unterschied: Skalierbarkeit ist die eigentliche Trennlinie

Der kritischste Unterschied zwischen Vektor und Raster ist, was beim Vergrößern passiert. Wenn du ein Rasterbild über seine Originalgröße hinaus streckst, lassen sich keine neuen Pixel erfinden; die vorhandenen Pixel werden größer, das Bild wird unscharf und die Kanten werden treppenförmig. Eine Vektorgrafik wird bei jeder Größe neu berechnet und ist daher auflösungsunabhängig: dieselbe Datei bleibt auf einer Visitenkarte ebenso scharf wie auf einem Fassadenschild.

• Vektor: skaliert unbegrenzt, Kanten stets scharf, Datei meist klein, leicht zu bearbeiten.
• Raster: trägt reiche Farbverläufe und fotorealistisches Detail, bricht aber beim Vergrößern zusammen und wird bei hoher Auflösung groß.

Wann solltest du Vektor verwenden?

Vektor ist die richtige Wahl für alles, was aus klaren Formen und einfarbigen Flächen besteht. Logos sind das Paradebeispiel: eine Markenidentität muss von Favicon-Größe bis Plakatwand gleich scharf aussehen. Wenn du ein Logo als Vektor zeichnest, deckt eine einzige Datei alle Verwendungen ab.

• Logos und Markenidentität, die in jeder Größe genutzt werden.
• Icons und Oberflächensymbole, die bei verschiedenen Bildschirmdichten scharf bleiben müssen.
• Typografie und Illustration, die bearbeitbar bleiben sollen.
• Druckarbeiten (Visitenkarten, Poster, Beschilderung), die hohe Auflösung verlangen.

Im Web ist das Vektor-Pendant meist SVG. SVG wird direkt im Browser gerendert, kann per CSS eingefärbt werden und bleibt auf Retina-Bildschirmen ohne zusätzliche Datei scharf:

<svg viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy="12" r="10" fill="#2563eb" />
</svg>

Wann solltest du Raster verwenden?

Alles Fotorealistische mit weichen Verläufen und Textur sollte Raster sein. Die tausenden Farbtöne eines Sonnenuntergangs als Vektor zeichnen zu wollen ist weder praktisch noch effizient und erzeugt riesige Dateien; ein Foto ist ohnehin von Natur aus pixelbasiert.

• Fotografien und Bilder der realen Welt.
• Komplexe digitale Malereien und Texturen.
• Screenshots und gescannte Inhalte.

Eine wichtige Regel: Erstelle Raster von Anfang an in ausreichender Auflösung. Späteres Vergrößern fügt kein Detail hinzu. Fürs Web verbessert das Herunterskalieren der Rohgröße auf den Zielbildschirm sowohl Leistung als auch Schärfe.

Dateiformate: welches passt zu welchem Typ?

Die Formatwahl folgt direkt aus dieser Trennung. Gruppieren wir die gängigen:

• Vektor: SVG (ideal fürs Web), AI (Adobe Illustrator), EPS und PDF, das Vektordaten tragen kann.
• Raster: JPG (Fotos, verlustbehaftete Kompression), PNG (Transparenz, scharfe Kanten), WebP und AVIF (modern, kleinere Dateien), GIF (begrenzte Farben, einfache Animation).

Ein Hinweis: Ein Logo als PNG zu exportieren macht es nicht zum Vektor; du erhältst nur eine Raster-Momentaufnahme in genau dieser Größe. Die eigentliche, bearbeitbare Quelle sollte immer in der Vektordatei bleiben. Wer auf WebP umsteigen will, konvertiert mit einem einzigen Befehl:

cwebp -q 80 foto.png -o foto.webp

Praktischer Workflow: beide zusammen nutzen

In echten Projekten arbeiten die beiden Typen oft Seite an Seite. Du hältst die Markenidentität als Vektor, bearbeitest Fotos als Raster und lieferst auf einer Webseite Icons als SVG und Bilder als WebP aus. Ein guter Regelsatz könnte sein:

• Halte die Quelldatei von Logos, Icons und Illustrationen immer als Vektor; exportiere Raster nach Bedarf.
• Archiviere Fotos in hoher Auflösung und skaliere sie beim Veröffentlichen auf das Ziel herunter.
• Bevorzuge im Web SVG für kleine Grafiken, die Schärfe brauchen, und WebP/AVIF für fotorealistische Bilder.
• Schicke für den Druck immer Vektor oder hochauflösendes Raster; die Bildschirmauflösung reicht für den Druck nicht.

Sobald diese Logik steht, verschwindet die Frage „warum ist diese Datei unscharf" weitgehend.

Häufige Fragen

Kann ich ein Rasterbild in einen Vektor umwandeln?

Ja, aber nicht automatisch. Trace-Werkzeuge können einfache Bilder mit klaren Linien in Vektoren umwandeln; bei komplexen Fotos wird das Ergebnis unsauber. Der sauberste Weg ist, das Logo von Grund auf neu als Vektor zu zeichnen.

Ist SVG immer besser als PNG?

Nein, es hängt vom Typ ab. Bei einfarbigen Icons und Logos ist SVG sowohl kleiner als auch schärfer. Aber ein fotorealistisches Bild in SVG umwandeln zu wollen bläht die Datei auf; dort sind PNG oder WebP die richtige Wahl.

Welche Dateien sollte ich von einem Designer für mein Logo verlangen?

Fordere immer die bearbeitbare Vektorquelle (etwa SVG oder AI) zusammen mit fertigen Raster-Exporten für Web und Druck. Bekommst du nur ein JPG, werden spätere Skalierungen und Farbänderungen schwierig.

Lass deine Marke in jeder Größe scharf aussehen. Wenn du deinen Logo-, Icon- und Bild-Workflow rund um die Vektor- und Rasterlogik richtig aufsetzen willst, planen wir es gemeinsam: nimm Kontakt mit mir auf.