SVG in PNG umwandeln

Vektordateien sind das Richtige zum Aufbewahren und das Falsche zum Verschicken. Ein SVG skaliert auf jede Größe, ohne je unscharf zu werden — deshalb liegen Logos und Symbole als SVG vor. Und deshalb weigern sich auch viele Dinge: ältere Office-Versionen, etliche Uploadfelder, App-Icon-Werkzeuge, die meisten Druckabläufe.

Ein PNG ist der kleinste gemeinsame Nenner. Es wird überall gelesen, es sieht überall gleich aus, und es ist das Format, in dem ein Vektor die Vektorwelt verlässt.

Das ist die eine Entscheidung, denn ein SVG hat wirklich keine Größe. Es beschreibt Formen, keine Bildpunkte, also muss die Umwandlung eine Auflösung wählen. Der Skalierungswert steuert das, und eine größere Zahl kostet keine Qualität: Die Zeichnung wird neu gezeichnet, nicht vergrößert, und ist in jeder Größe gestochen scharf.

Eine brauchbare Gewohnheit: Nimm die größte Stelle, an der das Bild erscheinen wird, und verdopple sie — das deckt hochauflösende Bildschirme ab. Für ein App-Symbol stell die Skalierung so, dass genau die Pixelgröße herauskommt, die die Plattform verlangt.

SVG speichert Text als Text und verweist auf eine Schrift über ihren Namen. Ist die Schrift nicht eingebettet, ersetzt der Renderer sie durch eine andere, und dein sorgfältig gesetzter Schriftzug kommt falsch heraus. Das ist der mit Abstand häufigste Grund, warum eine SVG-zu-PNG-Umwandlung kaputt aussieht.

Die dauerhafte Lösung liegt im Zeichenprogramm: Wandle Text vor dem Export in Pfade um, dann werden die Buchstaben zu Formen, die sich nicht ersetzen lassen. Das macht die Datei nebenbei sicher zum Weitergeben.

Durchsichtige Bereiche bleiben durchsichtig, ein Logo landet also ohne weißen Kasten auf jedem Hintergrund.

Gezeichnet wird mit resvg statt mit deinem Browser, das Ergebnis ist also auf jedem Rechner identisch. Ein Konverter, der über ein Canvas zeichnet, liefert in Chrome und Safari feine Unterschiede — genau die Art Unterschied, die erst auffällt, wenn die Datei schon freigegeben ist.

Einfache Formen, Konturen und Füllungen kommen exakt durch. Auseinander gehen Renderer am aufwendigen Ende der Spezifikation: weiche Schatten, Weichzeichner, Mischmodi und Masken, die aus anderen Masken bestehen.

resvg setzt die Teile der Spezifikation um, die reale Dateien nutzen, und ist beim Rest bewusst ehrlich — ein nicht unterstützter Filter wird weggelassen statt zu etwas verrechnet, das fast richtig aussieht. Zählt ein Effekt, sieh dir das PNG an statt es anzunehmen; fehlt er, flache ihn vorher im Zeichenprogramm ab.

Ein SVG ist oft ein paar Kilobyte groß, weil es eine Beschreibung ist und kein Bild. Das PNG ist ein Raster aus Bildpunkten, und dieses Raster wächst im Quadrat: Doppelte Skalierung heißt vierfache Datei.

Ein Logo mit 4 KB als SVG kann als 4000-Pixel-PNG mehrere Megabyte wiegen. Das ist kein Fehler, sondern die Rechnung des Formats — aber ein guter Grund, die Auflösung zu wählen, die du brauchst, statt der größten, die angeboten wird.

Das ist einer der häufigsten Gründe für diese Umwandlung, und die Antwort ist streng: Plattformen verlangen exakte Pixelmaße, stell die Skalierung also so, dass du genau darauf landest und nicht in der Nähe. Das PNG hinterher zu skalieren wirft den Grund weg, mit einem Vektor angefangen zu haben.

Für ein Favicon gilt außerdem, dass meist ein ICO gebraucht wird und nicht ein PNG, weil ein ICO mehrere Größen in einer Datei hält. Wandle in der größten benötigten Größe nach PNG und nimm für den Rest die Seite PNG zu ICO.

Ein SVG kann auf ein externes Bild, eine externe Schrift oder ein Stylesheet in einer anderen Datei verweisen. Diese Verweise sind nicht Teil des SVG — kommt die Datei allein hier an, kommt das Verwiesene nicht mit.

Das Ergebnis ist ein PNG mit fehlendem Foto oder ersetzter Schrift. Sah die Zeichnung im Programm vollständig aus und hier nicht, ist fast immer das der Grund: noch einmal exportieren, diesmal mit eingebetteten statt verknüpften Ressourcen.

Leg den ganzen Ordner ab. Jede Datei wird mit derselben Skalierung gezeichnet und kommt als ZIP zurück — meist genau das, was ein Symbolsatz braucht, denn einheitliche Maße über den Satz zählen mehr als die ideale Einzeldatei.

Weil auf deinem Rechner gezeichnet wird, gibt es keine Obergrenze je Datei und keine Warteschlange. Und weil es resvg ist und kein Browser-Canvas, wird das zweihundertste Symbol genauso gezeichnet wie das erste.