SVG zu PNG — wenn du wirklich Pixel brauchst (und wann nicht)

Es gibt eine besondere Art von Frust, ein perfektes Logo zu haben und nirgends, wo man es hinsetzen kann. Das SVG ist bei jeder Größe scharf, wiegt fast nichts und sieht im Browser makellos aus — und dann versuchst du, es in eine E-Mail zu ziehen, als Social-Vorschaubild zu setzen oder in eine etwas zu alte Software einzufügen, und es taucht einfach nicht auf. Leer. Die Datei ist in Ordnung. Der Ort, an den du sie setzt, spricht schlicht kein Vektor.

Das ist der ganze Grund, warum SVG-zu-PNG als Aufgabe existiert. Nicht weil PNG besser ist — meist ist es das nicht —, sondern weil ein großer Teil der Welt nur Pixel lesen kann.

Vektor und Raster, kurz

Ein SVG ist kein Bild. Es ist ein Satz Anweisungen — zeichne hier einen Kreis, diesen Pfad dorthin, füll ihn mit dieser Farbe. Der Browser folgt den Anweisungen und rendert sie frisch in der Größe, die du verlangst, es ist also messerscharf bei 16 Pixeln oder 16.000, und die Datei bleibt winzig, weil es nur Mathematik ist.

Ein PNG ist das Gegenteil. Es ist ein festes Raster farbiger Pixel, einmal festgelegt, bei einer Auflösung. Blas es über seine native Größe hinaus auf, und es wird weich und blockig, denn es gibt keine weiteren Pixel zu zeichnen — nur die eingebrannten. Der Vorteil ist, dass alles ein Raster aus Pixeln lesen kann. Es ist die universelle Währung der Bilder.

SVG zu PNG umzuwandeln tauscht also endlose Skalierbarkeit gegen universelle Kompatibilität. Ob das ein guter Tausch ist, hängt völlig davon ab, wohin das Bild geht.

Wann du wirklich PNG brauchst

Drei Fälle, in denen ich ohne Zögern rastere, weil Vektor schlicht nicht funktioniert:

E-Mail. E-Mail-Clients rendern kein SVG — Gmail, Outlook, Apple Mail, im Grunde alle verweigern es aus Sicherheitsgründen. Ein Logo in einer E-Mail-Signatur oder einem Newsletter muss ein Rasterformat sein. PNG, weil du die Transparenz willst.

Social- und OG-Vorschaubilder. Die kleine Karte, die auftaucht, wenn du einen Link teilst — das Open-Graph-Bild — muss ein Raster fester Größe sein, typisch 1200x630. Die Plattformen rendern dort kein SVG. Wenn deine Vorlage Vektor ist, exportierst du ein PNG in genau dieser Größe.

Ältere oder Offline-Software. Reichlich Desktop-Apps, Präsentations-Tools, Dokument-Editoren und Druck-Workflows können SVG entweder nicht importieren oder machen ein Chaos daraus. Ihnen ein PNG in großzügiger Auflösung zu geben, funktioniert einfach, jedes Mal, ohne Überraschungen.

In allen dreien ist der ausschlaggebende Faktor derselbe: Das Ziel kann Vektor physisch nicht lesen, Skalierbarkeit ist also irrelevant. Ein Format, das rendert, schlägt ein Format, das es nicht tut, immer.

Das eine, das man richtig machen muss: die Auflösung

Hier ist der Fehler, den ich am häufigsten sehe und früher selbst gemacht habe. Weil ein PNG auf die Größe festgelegt ist, in der du es exportierst, musst du es groß genug exportieren — und idealerweise in genau der Größe, in der du es anzeigst.

Exportier ein Logo als 100x100-PNG und zeig es dann mit 300 Pixeln auf einem hochauflösenden Bildschirm, und es sieht weich und zackig aus. Die Pixel, um diesen Raum zu füllen, existieren nicht. Die Lösung ist leicht: Exportier in der Größe, die du wirklich nutzt, oder größer, besonders für Retina- und 4K-Displays, wo du oft die doppelte nominelle Größe willst. Das ist der eine echte Vorteil, den du aufgibst, indem du Vektor verlässt, verbring also einen Moment damit, die Zielauflösung richtig zu treffen.

Wann du NICHT rastern solltest

Wenn das Ziel SVG lesen kann, behalte das SVG. Punkt.

Auf deiner eigenen Website sollte ein Symbol oder Logo Vektor bleiben. Es wird auf jedem Bildschirm bei jeder Zoomstufe scharf sein, es wird kleiner sein als das gleichwertige PNG, und du wirst nie eine größere Version neu exportieren müssen, wenn ein neues, höher aufgelöstes Display herauskommt. Es dort zu rastern ist reiner Nachteil — du würdest die beste Eigenschaft des Formats wegwerfen, um Kompatibilität zu gewinnen, die du schon hast.

Und rastere nicht deinen Master. Das SVG ist die Quelle der Wahrheit; es kann jederzeit ein PNG in jeder Größe erzeugen. Ein PNG kann nicht den umgekehrten Weg gehen — du kannst keine sauberen Vektorpfade aus einem Raster von Pixeln zurückgewinnen. Behalte also das SVG und behandle jedes PNG als wegwerfbaren Export für einen bestimmten Ort. Dasselbe Prinzip wie bei allem anderen: wandle die Kopie um, die du auslieferst, behalte das Original, das du bearbeitest.

Wie ich es tatsächlich mache

Wenn ich Pixel aus einem Vektor brauche, nutze ich den SVG-zu-PNG-Konverter hier. Er rendert das SVG in deinem Browser und gibt dir das PNG, es wird also nichts irgendwohin hochgeladen — das Ganze passiert auf deiner Maschine. Wähl eine Größe, die zu ihrem Ziel passt, bekomm ein sauberes PNG mit intakter Transparenz.

Aber die eigentliche Kunst ist nicht die Umwandlung. Es ist die Frage, die du zuerst stellst: Liest dieser Ort Vektor? Wenn ja, lass das SVG in Ruhe und genieß die schärfste, kleinste Option, die es gibt. Wenn nein — E-Mail, OG-Karte, irgendeine störrische alte App —, dann rastere, in der richtigen Größe, und halte dein SVG für das nächste Mal in Sicherheit. Triff diese Entscheidung richtig, und du wirst nie wieder ein leeres Kästchen haben, wo dein Logo sein sollte.