Ein SVG hat keine Pixel – das ist Rendern, nicht Konvertieren

Jeder andere Konverter auf dieser Seite verschiebt bereits vorhandene Pixel. Dieser hier macht etwas anderes, und genau das ist der Grund, warum sich das Lesen dieser Seite lohnt. Ein SVG enthält kein Bild an sich. Es enthält Anweisungen: Zeichne hier einen Kreis, fülle diesen Pfad mit jenem Verlauf, platziere Text an diesen Koordinaten. Wenn daraus ein PNG wird, werden diese Anweisungen in der von Ihnen gewählten Größe ausgeführt. Nichts wird gestreckt und nichts wird geraten, denn es gibt kein ursprüngliches Pixelraster, das gestreckt oder erraten werden müsste.

Warum Sie das PNG wahrscheinlich überhaupt brauchen

Das Format ist hervorragend, aber fast nichts akzeptiert es. E-Mail-Programme zeigen kein SVG an. Office wehrt sich, wenn Sie eines einbetten. Soziale Netzwerke und die meisten Upload-Formulare lehnen es komplett ab, und Software außerhalb der Designwelt behandelt es meist als Textdatei – technisch gesehen ist es das auch. PNG ist die Version, die überall akzeptiert wird.

Groß kostet Sie hier nichts

Das Hochskalieren eines Fotos erfindet Pixel, die nie aufgenommen wurden – deshalb wird es bei 2x unscharf und bei 10x matschig. Das Rendern einer Vektorgrafik kennt solche Grenzen nicht. Ein 24-Pixel-Icon, das auf 1024 Pixel gerendert wird, ist kein aufgeblasenes 24-Pixel-Icon; es ist dieselbe Zeichnung, die bei 1024 erneut ausgeführt wird, wobei jede Kurve und Kante für diese Größe berechnet wird. Genau das haben wir getestet: Ein 24x24-Icon kam als 1024x1024 zurück, mit exakt denselben Farben wie im Original, Byte für Byte, und mit glatten, anti-aliasten Kanten statt Treppeneffekten.

Der praktische Tipp daraus: Rendern Sie direkt in der größten Größe, die Sie tatsächlich benötigen, nicht in der kleinsten, denn das PNG ist ab dann ein festes Raster. Größer zu rendern kostet Sie nur ein paar Millisekunden mehr.

Sie wählen die Größe – oder die Datei tut es

Geben Sie eine Breite ein, und die Zeichnung wird proportional darauf angepasst. Fragen Sie ein 2:1-Logo nach 400 x 400, erhalten Sie ein gestochen scharfes 400 x 200, niemals ein verzerrtes Quadrat. Es gibt Ein-Klick-Voreinstellungen für 256, 512, 1024 und 2048 sowie eine Original-Option, die in der im SVG selbst angegebenen Größe rendert. Bei einer Datei mit 200 x 100 gab Original exakt 200 x 100 zurück. Die Obergrenze liegt bei 16.384 Pixel pro Seite und 64 Megapixel insgesamt – das deckt ein 8000 x 8000-Render ab.

Transparenz, auch die teilweise

PNG unterstützt einen echten Alphakanal, sodass ein Logo mit transparentem Hintergrund auch wirklich mit transparentem Hintergrund zurückkommt – bereit für eine Folie oder Produktseite, ohne weißen Kasten drumherum. Was einen guten Renderer von einem nachlässigen unterscheidet, ist die Teiltransparenz: weiche Schatten, ausgeblendete Kanten, alles mit halber Deckkraft. Bei einer Form mit 50 Prozent Deckkraft lag der Alpha-Wert im Ergebnis exakt bei 128 – also genau die Hälfte. Jeder Render kam als echtes RGBA-Bild zurück. Wenn Sie die Transparenz lieber entfernen möchten, stellen Sie den Hintergrund auf eine Volltonfarbe und wählen Sie den gewünschten Farbton im Farbwähler aus.

Text und Verläufe – die zwei Dinge, die meist Probleme machen

Serverseitiges SVG-Rendering scheitert oft an zwei Stellen: Schriften fehlen, sodass Text verschwindet oder in der falschen Schriftart landet. Und Verläufe, die einmal definiert und per ID referenziert werden, werden nicht aufgelöst – Formen kommen dann flach oder schwarz zurück. Wir haben beides geprüft: Text wurde mit sauberen, anti-aliasten Glyphenrändern gerendert, und ein linearer Verlauf, der mit url() referenziert wurde, erschien als echter Übergang von einer Farbe zur anderen. Fordert eine Datei eine Schrift, die der Server nicht hat, wird eine Ersatzschrift verwendet und das Ergebnis weist darauf hin – statt Sie es später selbst entdecken zu lassen.

Das Hochladen fremder SVGs ist hier sicher

Ein SVG kann rechtlich JavaScript enthalten und auf Ressourcen im Internet verweisen. Deshalb blockieren E-Mail-Anbieter das Format – und das ist ein echter Grund, bei Dateien von Fremden vorsichtig zu sein. Das Rendern hier läuft über eine dedizierte Vektor-Engine und nicht über einen Browser: Skripte werden nie ausgeführt und externe Referenzen nie geladen. Nichts in der Datei kann ausgeführt werden, nach Hause telefonieren oder irgendetwas auslesen. Sie erhalten den echten statischen Zustand der Zeichnung zurück – deshalb werden Animationen auch nur als erstes Bild gerendert, nicht als Bewegung.

Schnell und reproduzierbar

Der klassische Ghostscript-Tiger – 94,5 KB dichte Bézierpfade und der übliche Härtetest für SVG-Renderer – wurde in 53 Millisekunden zu einem 512-Pixel-PNG gerendert. Das Rendern derselben Datei zweimal ergibt byte-identische Ausgaben – ein Ergebnis lässt sich also exakt reproduzieren, nicht nur ungefähr. Komprimierte .svgz-Dateien werden direkt gelesen, und das Format wird anhand der Dateibytes erkannt – auch eine umbenannte Datei oder eine ohne Endung wird gerendert.

Ein ganzes Icon-Set auf einmal

Mehrere Dateien werden mit denselben Einstellungen gerendert und als ein einziges ZIP mit den Originalnamen zurückgegeben. Drei verschiedene Dateien namens icon.svg kommen als icon.png, icon_1.png und icon_2.png zurück, statt dass zwei davon einfach verschwinden. Eine beschädigte oder keine SVG-Datei im Stapel wird übersprungen und im Ergebnis benannt, statt alles andere zu blockieren.

Was Sie bekommen

• Ein PNG, das in Ihrer gewählten Größe gerendert wurde – kein hochskaliertes Abbild einer kleinen Version
• Proportionen gesperrt – nichts kommt verzerrt oder gestaucht zurück
• Voller Alphakanal, inklusive halbtransparenter Formen und weicher Schatten, oder jede Hintergrundfarbe, die Sie wählen
• Text und Verläufe werden gerendert statt ignoriert, mit Hinweis auf Schrift-Ersatz
• Keine Skripte werden ausgeführt und keine externen Referenzen geladen – ein unbekanntes SVG ist sicher hochzuladen
• Kein Konto, kein Wasserzeichen und Dateien werden nach einer Stunde vom Server gelöscht

Wie geht es weiter?

Ein 4000-Pixel-Render ist eine große Datei, daher ist PNG komprimieren der übliche nächste Schritt, bevor sie auf einer Seite landet, und PNG zu WebP geht noch weiter für das Web. Wenn Sie die Vektordatei behalten möchten, entfernt SVG komprimieren zuerst den Editor-Ballast daraus.