Vektor vs. Pixel: Transparenz, Farbräume und Bittiefe

Wenn aus einem SVG ein PNG wird, passiert technisch ein Wechsel der Welt: von einer mathematischen Beschreibung hin zu einem konkreten Gitter aus Pixeln. Wer versteht, was dabei genau geschieht, trifft bessere Entscheidungen über Größe, Transparenz und Farbe. Dieser Ratgeber erklärt sachlich, wie Vektor und Raster zusammenhängen, wie Rasterung mit Anti-Aliasing arbeitet und welche Rolle Alpha-Kanal, Farbraum und Bittiefe im Ergebnis spielen.

Vektor und Raster: zwei grundverschiedene Datenmodelle

Eine Vektorgrafik speichert keine Pixel, sondern Anweisungen. Ein SVG-Kreis ist nicht eine Sammlung gefärbter Punkte, sondern eine Beschreibung der Art “ziehe einen Kreis mit Mittelpunkt bei x, y und Radius r, fülle ihn blau”. Diese Beschreibung ist auflösungsunabhängig. Egal ob der Kreis 20 oder 2000 Pixel groß angezeigt wird, der Browser rechnet ihn jedes Mal frisch und exakt.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#1a56db" />
</svg>

Eine Rastergrafik dagegen ist ein festes Gitter. Ein PNG mit 100 mal 100 Pixeln enthält genau 10.000 Farbwerte, einen pro Pixel. Diese Werte sind fest. Vergrößerst du das Bild, muss die Software fehlende Pixel erfinden, was zu Unschärfe oder Treppchen führt. Verkleinerst du es, gehen Pixel verloren.

Eigenschaft	Vektor (SVG)	Raster (PNG)
Datenmodell	mathematische Formen	festes Pixelgitter
Skalierung	verlustfrei in jede Größe	nur verlustfrei nach unten begrenzt
Ideal für	Icons, Logos, flächige Grafik	Fotos, komplexe Verläufe
Dateigröße	abhängig von Formenanzahl	abhängig von Pixelzahl
Transparenz	über fill-opacity und Formen	über Alpha-Kanal pro Pixel

Wie Rasterung funktioniert

Rasterung ist die Übersetzung der Vektor-Beschreibung in ein konkretes Pixelgitter. Der sogenannte Rasterizer geht jeden Pfad durch und entscheidet für jeden Pixel der Zielfläche, ob und wie stark er von der Form bedeckt ist. Liegt ein Pixel komplett innerhalb einer blauen Fläche, wird er blau. Liegt er komplett außerhalb, bleibt er unberührt.

Spannend wird es an den Rändern. Eine schräge oder gebogene Kante verläuft selten exakt entlang der Pixelgrenzen. Ein Pixel an der Kante ist vielleicht zur Hälfte von der Form bedeckt. Würde der Rasterizer ihn einfach ganz oder gar nicht färben, entstünden harte Treppchenstufen, das klassische Aliasing.

Anti-Aliasing: weiche Kanten durch Mischfarben

Anti-Aliasing löst dieses Problem, indem es Randpixel anteilig färbt. Ist ein Pixel zu 60 Prozent von einer schwarzen Form bedeckt und der Hintergrund weiß, bekommt er ein Grau, das 60 Prozent Schwarz und 40 Prozent Weiß mischt. Über viele Randpixel hinweg entsteht so eine optisch weiche Kante, obwohl jeder einzelne Pixel weiterhin eine feste Farbe hat.

Das erklärt auch, warum eine Rasterung in höherer Auflösung sauberer wirkt. Rasterst du ein Icon mit 32 statt 16 Pixeln Kantenlänge und zeigst es verkleinert an, stehen mehr Übergangspixel für die Kantenglättung bereit. Genau dieses Prinzip nutzen hochauflösende Displays.

Alpha-Transparenz im PNG

Transparenz ist einer der wichtigsten Gründe, SVG zu PNG und nicht zu JPG umzuwandeln. JPG kennt keine Transparenz, PNG dagegen schon, und zwar sehr fein abgestuft. Im PNG-24-Format mit Alpha-Kanal speichert jeder Pixel vier Werte: Rot, Grün, Blau und Alpha. Der Alpha-Wert reicht von 0 für vollständig durchsichtig bis 255 für vollständig deckend.

Ein Logo mit transparentem Hintergrund behält beim Umwandeln also seine Durchsichtigkeit, sofern du mit Alpha-Kanal exportierst. Die transparenten Bereiche werden nicht zu Weiß, sondern bleiben durchsichtig und lassen jeden Hintergrund durchscheinen.

Der Alpha-Kanal arbeitet zudem mit dem Anti-Aliasing zusammen. An den weichen Kanten eines transparenten Logos werden Randpixel teiltransparent gespeichert. So fügt sich die Grafik auf jedem Hintergrund sauber ein, egal ob hell oder dunkel.

sRGB, Farbprofile und konsistente Farben

Eine Farbe wie #1a56db ist zunächst nur eine Zahl. Welche tatsächliche Farbe daraus wird, hängt vom Farbraum ab. Der Farbraum ist die Übersetzungsregel zwischen Zahlenwert und sichtbarer Farbe. Im Web ist sRGB der etablierte Standard. Browser, die meisten Monitore und die meisten PNG-Dateien gehen von sRGB aus.

Solange SVG, gerendertes PNG und Anzeigegerät alle in sRGB arbeiten, sehen Farben überall gleich aus. Probleme entstehen, wenn eine Grafik in einem abweichenden Profil wie Adobe RGB oder einem Druckprofil gespeichert ist und ohne eingebettetes Profil ins Web gelangt. Dann interpretiert der Browser die Zahlen als sRGB, und die Farben verschieben sich leicht, oft ins Blassere oder Kühlere.

Beim Rastern eines SVG für das Web ist sRGB also die sichere Wahl. SVG-Farbangaben sind ohnehin als sRGB definiert, sodass ein sauberer Export farbtreu bleibt.

Eine Farbe ist erst dann eindeutig, wenn ihr Farbraum bekannt ist. Im Web heißt dieser Farbraum in aller Regel sRGB.

Bittiefe: wie viele Farben das PNG speichert

Die Bittiefe bestimmt, wie viele unterschiedliche Farben ein PNG darstellen kann. Sie wird in Bit pro Kanal gemessen. Bei PNG-24 stehen acht Bit für jeden der drei Farbkanäle bereit, also 256 Abstufungen pro Kanal. Kombiniert ergeben sich rund 16,7 Millionen Farben, genug für feine Verläufe und natürliche Bilder.

PNG-8 arbeitet dagegen mit einer Palette von maximal 256 Farben. Für flächige Logos mit wenigen Farben reicht das oft völlig aus und spart deutlich Speicher. Für weiche Farbverläufe entsteht bei PNG-8 jedoch Banding, also sichtbare Stufen statt eines glatten Übergangs.

Mehr Bittiefe bedeutet feinere Farbabstufungen, aber auch größere Dateien. Die Wahl hängt vom Motiv ab: einfache Grafik mit wenigen Farben spricht für PNG-8, fotorealistische Verläufe und transparente Kanten sprechen für PNG-24 mit Alpha.

Ein konkretes Beispiel: Logo mit weicher Kante

Nimm ein blaues Logo mit rundem Rand und transparentem Hintergrund, das du als PNG für eine helle und eine dunkle Webseite brauchst. Beim Rastern auf 512 Pixel Kantenlänge passiert technisch Folgendes: Der Rasterizer füllt die inneren Pixel voll blau. An der runden Kante mischt das Anti-Aliasing Übergangstöne und setzt für diese Randpixel zugleich teiltransparente Alpha-Werte. Der transparente Außenbereich bekommt Alpha 0.

Das Ergebnis ist ein PNG-24 mit Alpha-Kanal, in sRGB gespeichert. Auf der hellen Seite scheint das helle Layout durch die teiltransparenten Randpixel, auf der dunklen Seite das dunkle, und in beiden Fällen wirkt die Kante sauber statt ausgefranst. Weil sRGB durchgängig genutzt wird, bleibt das Blau auf beiden Seiten identisch.

Was du aus dem Rasterprozess mitnehmen solltest

Beim Umwandeln von SVG zu PNG tauschst du auflösungsunabhängige Mathematik gegen ein festes Pixelgitter. Lege die Zielauflösung deshalb bewusst fest und rastere für Bildschirme eher großzügig, damit Anti-Aliasing genug Randpixel für saubere Kanten hat. Exportiere transparente Grafiken als PNG-24 mit Alpha-Kanal, damit Durchsichtigkeit und weiche Kanten erhalten bleiben. Bleibe bei sRGB, damit Farben web-weit konsistent aussehen, und wähle die Bittiefe nach Motiv: PNG-8 für sparsame Flächengrafik, PNG-24 für feine Verläufe. Wer diese vier Stellschrauben kennt, steuert das Ergebnis einer Rasterung gezielt, statt sich überraschen zu lassen.

Diese Ausführungen sind eine sachlich-technische Einordnung und keine Garantie für ein bestimmtes Ergebnis in jeder Software. Die genaue Umsetzung von Rasterung und Farbverwaltung kann zwischen Anwendungen variieren.