SVG in PNG umwandeln

Eine Auflösung festlegen, die nie festgelegt war

Ein SVG hat keine Pixel und keine Größe. Es ist eine Reihe von Zeichenanweisungen – dieser Pfad, jene Füllung, diese Kurve –, weshalb es bei jeder Vergrößerung scharf bleibt und ein Logo so lange wie möglich als SVG existieren sollte. Beim Rastern legen Sie sich für immer auf eine Größe fest. Wählen Sie die Größe deshalb für die größte Stelle, an der das Bild erscheinen wird, und denken Sie daran, dass ein Bildschirm mit doppelter oder dreifacher Pixeldichte die doppelte oder dreifache Pixelzahl braucht: Ein Icon, das mit 64 Punkt angezeigt wird, braucht 192 Pixel, um auf einem modernen Smartphone gut auszusehen.

Beim Text geht es am häufigsten schief, und der Grund lohnt sich zu verstehen. Ein SVG sagt: „Setze diesen Text in Helvetica Neue“; hat das Gerät, das es rendert, keine Helvetica Neue, wird etwas anderes eingesetzt, und das Layout verrutscht – ein Titel, der in seinen Rahmen passte, ragt nun heraus. Ein per URL eingebundener Webfont wird hier gar nicht geladen, weil ein SVG, das als Bild gerendert wird, bewusst isoliert ist und nicht aufs Netzwerk zugreifen kann. Die Lösung lernt jeder Designer irgendwann: Text vor dem Export in Pfade umwandeln – dann werden die Buchstaben zu Pfaden, die überhaupt keine Schrift brauchen.

Dieselbe Isolation erklärt die anderen Überraschungen. Eine verknüpfte Bitmap – ein image-Element, das auf eine .png-Datei irgendwo verweist – wird als nichts gerendert. Skripte laufen nicht, ein SVG, das sich per JavaScript selbst zeichnet, kommt also leer oder halb fertig heraus. Deklarative Animation wird im Anfangszustand gerendert, also als Standbild des ersten Frames. Alles, was in sich geschlossen ist, funktioniert einwandfrei: Verläufe, Filter, Beschneidungspfade, Masken, eingebettete Data-URI-Bilder und Unschärfeeffekte werden genau so gerendert, wie sie gezeichnet sind.

PNG ist dafür das richtige Ziel, JPEG wäre es nicht. Vektorgrafik besteht aus flachen Farben und harten Kanten – genau das, was PNG gut komprimiert und JPEG ruiniert: Jede scharfe Kante bekommt in einem JPEG einen Saum. Transparenz wird als echter Alphakanal übernommen, sodass ein in der richtigen Größe exportiertes Logo auf jedem Hintergrund sitzt. Gibt das SVG gar keine Abmessungen an, sondern nur eine viewBox, ergibt sich das Seitenverhältnis daraus, und die Größe bestimmen Sie.

Wenn Sie etwas anderes brauchen

resvg und rsvg-convert rendern SVG auf der Kommandozeile mit einem echten Schriftenbestand, sodass Text in der vorgesehenen Schrift statt in einem Ersatz erscheint – rsvg-convert -w 512 in.svg -o out.png ist der ganze Befehl. Inkscape --export-type=png --export-dpi=300 ist die vollständigste Umsetzung der Spezifikation, die es gibt, und beherrscht Filter und Mischmodi, die schlankere Renderer nur annähern.

Prüfen Sie vor dem Rastern, ob überhaupt etwas ein PNG braucht. Jeder Browser stellt SVG seit über zehn Jahren nativ dar, und für ein Logo oder Icon auf einer Website ist das SVG kleiner, beliebig scharf und per CSS gestaltbar. Die Fälle, die wirklich Pixel brauchen, sind seltener, als man denkt: Favicons, Vorschaubilder für soziale Netzwerke, E-Mails, App-Store-Grafiken und Software, die keine Vektoren lesen kann.