Warum ein SVG keine Größe hat, bis Sie es umwandeln
Oft wird gefragt, wie man SVG in PNG „ohne Qualitätsverlust“ umwandelt – und in der Frage steckt ein Missverständnis, das sich zuerst klären lohnt. Ein SVG hat keine Qualität, die es verlieren könnte. Es hat überhaupt keine Pixel.
Vektoren beschreiben, Pixel speichern
Ein SVG ist eine Beschreibung von Formen – Kurven, Füllungen, Text – in einem Koordinatensystem ohne feste Pixelgröße. Ein PNG ist ein festes Pixelraster. SVG in PNG umzuwandeln heißt daher immer, eine Größe zu wählen, und das Ergebnis ist in jeder gewählten Größe scharf.
Öffnen Sie ein SVG in einem Texteditor, und Sie finden Anweisungen: gehe zu diesem Punkt, ziehe eine Kurve zu jenem, fülle mit dieser Farbe. Nirgends steht, wie viele Pixel breit die Zeichnung ist. Das entscheidet der Browser beim Anzeigen, und er kann es jedes Mal anders entscheiden.
Was viewBox, width und height wirklich bedeuten
Drei Attribute am Wurzelelement steuern die Größe. Die viewBox definiert das Koordinatensystem – „diese Zeichnung reicht von 0 bis 240 in der Breite und 0 bis 160 in der Höhe“. width und height, falls vorhanden, schlagen eine Standard-Anzeigegröße vor. Viele SVGs haben nur eine viewBox, manche nur width und height, und einige weder noch.
Dieser Konverter liest, was vorhanden ist, ermittelt eine intrinsische Größe so, wie es ein Browser täte, und nutzt sie als 1×-Basis. Ist nichts deklariert, greift er auf 1.024 Pixel zurück, damit Sie trotzdem ein brauchbares Bild bekommen.
Warum „ohne Qualitätsverlust“ die falsche Frage ist
Da das SVG aus denselben Anweisungen in jeder Größe gerendert werden kann, ist ein 4.000-Pixel-PNG genau so scharf wie ein 400-Pixel-PNG – der Renderer zeichnet einfach mehr Detail. Qualität verlieren Sie nur, wenn Sie klein rendern und das PNG anschließend vergrößern. Die Lösung: Wählen Sie die endgültige Größe hier, beim Umwandeln, und skalieren Sie das PNG nie hoch.
Was dieser SVG in PNG Konverter macht
Dieses Tool liest Ihre SVG-Dateien im Browser, entfernt alles Ausführbare, rendert jede Datei in der gewählten Größe mit der browsereigenen Engine und liefert verlustfreie PNGs mit intakter Transparenz zurück – einzeln oder als ZIP.
Derselbe Renderer wie Ihr Browser
Serverseitige Konverter nutzen eine eigene Bibliothek – librsvg, Inkscape, ImageMagick –, und jede hat Lücken: ein Filter, den sie nicht unterstützt, eine Schrift, die sie ersetzt, ein Verlauf, den sie etwas anders zeichnet. Das PNG, das Sie zurückbekommen, muss nicht dem SVG entsprechen, das Sie angesehen haben.
Hier übernimmt Blink, Gecko oder WebKit das Rendern – je nachdem, welchen Browser Sie verwenden – und zeichnet das SVG auf ein Canvas. Sieht das SVG in Ihrem Browser richtig aus, sieht das PNG genauso aus, denn es ist buchstäblich dieselbe Zeichnung.
Skripte entfernt, nichts hochgeladen
SVG ist XML und kann <script>-Elemente, onload-Handler und eingebettetes HTML enthalten. Eine Datei aus unbekannter Quelle sollte man nicht unbedacht öffnen. Vor dem Rendern entfernt der Konverter Skripte, Event-Attribute und foreignObject-Blöcke und rendert das Ergebnis in einem Bildelement, das ohnehin keinen Code ausführen kann. Zwei Schutzschichten, beide lokal.
Zu keinem Zeitpunkt wird etwas hochgeladen. Das Netzwerk-Panel in den Entwicklertools Ihres Browsers bleibt leer, während ein Stapel umgewandelt wird.
SVG in PNG umwandeln in 3 Schritten
SVG-Dateien ablegen
Ziehen Sie eine oder mehrere .svg-Dateien auf die gestrichelte Fläche oder klicken Sie, um zu wählen. Am Desktop bis zu 10 auf einmal. Jede Zeile zeigt eine Live-Vorschau des Vektors – Browser zeigen SVG nativ an, was Sie sehen, wird also auch gerendert.
Größe und Hintergrund wählen
Wählen Sie in den Konvertierungseinstellungen Maßstab (1×, 2×, 3× oder 4× der Eigengröße des SVG) oder Breite (eine Vorgabe oder beliebige Pixelbreite; die Höhe folgt dem Seitenverhältnis). Dann den Hintergrund: standardmäßig transparent oder Weiß, Schwarz bzw. eine beliebige Farbe zum Reduzieren.
PNGs oder ZIP herunterladen
Klicken Sie auf Umwandeln. Jede Datei zeigt ihre Ausgabemaße und PNG-Größe. Laden Sie sie einzeln herunter oder klicken Sie auf Alle herunterladen für ein ZIP mit den Originalnamen und der Endung .png.
Legen Sie bis zu 10 SVG-Dateien ab. Sie werden lokal gelesen und nie hochgeladen.
Wählen Sie einen Maßstab oder geben Sie eine Breite ein, dann einen transparenten oder deckenden Hintergrund.
Laden Sie jedes PNG einzeln herunter oder alles als ZIP.
Die richtige Ausgabegröße wählen
Weil die Größe eine Entscheidung ist, hilft es zu wissen, wofür die Optionen gedacht sind. Zwei Modi decken fast jeden Fall ab.
1×, 2×, 3× – passend zur Bildschirmdichte
Ein normaler Monitor zeigt ein Pixel pro CSS-Punkt. Ein Retina- oder HiDPI-Display zeigt zwei; die meisten modernen Handys drei. Ein Icon, das auf dem Bildschirm 32 Punkte groß ist, braucht deshalb ein 32-Pixel-PNG für den ersten Fall, 64 für den zweiten und 96 für den dritten. Das ist die ganze Bedeutung von 1×, 2× und 3×.
Bei Web- und App-Arbeit wird dasselbe SVG meist in allen drei Maßstäben exportiert. Datei einmal ablegen, bei 1× umwandeln, Einstellung ändern, erneut umwandeln – oder einfach bei 3× exportieren und die Plattform herunterskalieren lassen.
Eine Größentabelle für gängige Ziele
Favicons: 16, 32 und 48 Pixel, am besten mit dem PNG zu ICO-Tool aus einem 512-Pixel-PNG. App-Icons: 1024 Pixel für die Stores, dann der Icon-Set-Generator. Social-Media-Avatare: 400 bis 800 Pixel. Open-Graph-Bilder: 1200 × 630. Marktplatz-Angebote: meist 2000 Pixel an der langen Kante.
Eigene Breite für Druck und Marktplätze
Für den Druck rechnen Sie von der physischen Größe bei 300 DPI zurück: Eine A4-Seite ist 2.480 Pixel breit, A3 3.508, ein 15-cm-Sticker 1.800. Wechseln Sie in den Breite-Modus, geben Sie die Zahl ein, und die Höhe folgt dem Seitenverhältnis des SVG. Der Konverter begrenzt die Ausgabe auf 16.384 Pixel an der längeren Kante – das Limit, das Browser einem Canvas setzen – und sagt Ihnen, wenn eine Anfrage reduziert werden musste.
Transparenz, Hintergründe und Kanten
Die meisten SVGs – Logos, Icons, Illustrationen – haben keinen Hintergrund: Die Formen schweben auf nichts. PNG kann das speichern, einer von zwei Gründen, es hier JPG vorzuziehen.
Den Hintergrund transparent halten
Transparent ist hier die Standardeinstellung. Jedes Pixel, das das SVG nicht bemalt hat, bleibt frei, auch die teilweise bedeckten Pixel entlang gekrümmter und diagonaler Kanten. Diese weichen Randpixel sorgen dafür, dass das PNG ohne sichtbare Kontur auf einer dunklen Folie, einem farbigen Button oder einem Foto sitzt.
Die Ergebnisse werden über einem Schachbrettmuster angezeigt, damit Sie die Transparenz vor dem Download prüfen können.
Wann Sie auf eine Farbe reduzieren sollten
Manche Ziele können mit Alpha nichts anfangen – ältere E-Mail-Programme, bestimmte Druck-Workflows, einige Marktplatz-Uploader, die im Hintergrund nach JPG konvertieren. Wählen Sie dafür Weiß, Schwarz oder eine eigene Farbe in der Hintergrund-Einstellung. Die Form wird auf diese Farbe gelegt, und das PNG ist vollständig deckend.
Wählen Sie die Farbe passend zu dem Ort, an dem das Bild liegen wird. Reduzieren Sie auf Weiß und legen das PNG dann auf einen dunklen Hintergrund, erscheinen die Randpixel – jetzt blassorange, blassblau, je nach Farbe der Form – als schwacher Saum. Dieser Saum ist die häufigste Beschwerde über umgewandelte Logos, und er ist eine Hintergrundentscheidung, kein Rendering-Fehler.
Was schiefgehen kann (und wie Sie es beheben)
Rendern im Browser heißt, dass das PNG dem Bildschirm entspricht – aber es erbt auch die Regeln des Browsers, was ein Bild laden darf.
Fehlende Schriften
Text in einem SVG wird mit der Schrift gerendert, die es benennt. Ist diese Schrift auf Ihrem Rechner nicht installiert und nicht in der Datei eingebettet, ersetzt der Browser sie, und das PNG zeigt die Ersatzschrift. Per URL referenzierte Webfonts laden ebenfalls nicht: Ein als Bild gerendertes SVG darf keine externen Ressourcen abrufen.
Die zuverlässige Lösung: Wandeln Sie den Text in Ihrem Design-Tool in Pfade um, bevor Sie das SVG exportieren. Die Buchstaben werden zu Pfaden und rendern überall identisch.
Fehlende verknüpfte Bilder
Dieselbe Regel gilt für <image href="https://…">. Ein per URL eingebundenes Rasterbild bleibt leer. Betten Sie es stattdessen ein – die meisten Editoren haben eine Exportoption „Bilder einbetten“, die den Link in eine Data-URI innerhalb des SVG verwandelt. Eingebettete Bilder rendern problemlos.
Leere oder winzige Ausgabe
Ein SVG ohne viewBox und ohne width und height wird hier in einer Ersatzgröße gerendert; liegt die Zeichnung weit vom Ursprung entfernt, kann sie außerhalb des sichtbaren Bereichs landen. Fügen Sie eine viewBox hinzu, die die Grafik umschließt. Eine winzige Ausgabe bedeutet fast immer, dass das SVG kleine width- und height-Werte deklariert – wechseln Sie in den Breite-Modus und geben Sie die gewünschte Größe ein.
Symptom, Ursache, Lösung
| Symptom | Wahrscheinliche Ursache | Lösung |
|---|---|---|
| Falsche Schrift im PNG | Schrift nicht installiert / Webfont blockiert | Text vor dem Export in Pfade umwandeln |
| Foto im SVG bleibt leer | Per URL verknüpft, nicht eingebettet | Mit eingebetteten Bildern neu exportieren |
| PNG ist winzig | SVG deklariert kleine width/height | Breite-Modus nutzen und Zielgröße eingeben |
| Grafik abgeschnitten | viewBox umschließt die Zeichnung nicht | viewBox im Editor korrigieren |
| Saum auf dunklen Hintergründen | Auf Weiß reduziert | Transparent lassen oder auf die tatsächliche Hintergrundfarbe reduzieren |
| Filter oder Unschärfe sieht anders aus | Server-Konverter nutzte eine andere Engine | Hier umwandeln – der Browser rendert es |
Wofür SVG als PNG gebraucht wird
Wenn SVG perfekt skaliert, warum überhaupt SVG in PNG umwandeln? Weil sehr viel Software immer noch keinen Vektor annimmt.
Icon-Sets und Favicons
App-Stores, Favicon-Formate und viele Icon-Systeme wollen PNGs in fester Größe. Wandeln Sie einmal in der größten benötigten Größe um und schneiden Sie den Rest mit dem Icon-Generator oder PNG zu ICO zu.
Plattformen, die SVG ablehnen
Soziale Netzwerke, Marktplätze, Community-Foren und die meisten CMS-Medienbibliotheken lehnen SVG-Uploads ab – auch aus Sicherheitsgründen, da SVG Skripte enthalten kann. Ein 2×-PNG mit transparentem Hintergrund ist der universelle Ersatz.
E-Mail-Signaturen und Newsletter
Mailprogramme entfernen SVG oder zeigen ein defektes Bild. Logos in E-Mails sind PNGs, idealerweise in 2× exportiert und in halber Größe angezeigt, damit sie auf Retina-Bildschirmen scharf bleiben.
Druck und Großformat
Druckereien akzeptieren PDF und hochauflösende Rasterbilder. Rendern Sie ein Logo im Breite-Modus mit 3.000 oder 4.000 Pixeln, und es druckt sauber in Postergröße – in der Zielgröße gerasterte Vektoren haben keine Hochskalierungs-Unschärfe.
Browserbasierte vs. serverbasierte SVG-Konverter
Fast jeder SVG in PNG Konverter im Netz lädt die Datei hoch und rendert sie auf einem Server mit librsvg, Inkscape oder einem Headless-Browser. Bei einfachen Formen funktioniert das, bei allem Komplizierten weicht es ab.
Genauigkeit
Jede Rendering-Bibliothek unterstützt einen etwas anderen Ausschnitt der SVG-Spezifikation. Filter, Masken, Mischmodi, CSS in der Datei und Text auf Pfaden sind die üblichen Opfer. Die Browser-Engines sind die vollständigsten SVG-Renderer, die es gibt, und mit der auf Ihrem Rechner zu rendern heißt, dass das PNG nicht von der Vorschau abweichen kann.
Datenschutz und Limits
Ein unveröffentlichtes Logo, ein Produktdiagramm, ein Chart mit internen Zahlen: Sie in einen Konverter hochzuladen ist ein kleines Leck, das niemand beabsichtigt. Server-Tools begrenzen außerdem Dateigröße und tägliche Nutzung, weil Rendern sie Geld kostet. Auf dem eigenen Gerät zu rendern beseitigt beides – nichts kann lecken, nichts muss gezählt werden.
Was ein Server besser kann: Sehr alte Hardware rendert einen Stapel komplexer SVGs langsamer als ein Rechenzentrum. Bei zehn Logos macht das keinen Unterschied.
Was Sie als Nächstes mit den PNGs tun können
Nach dem Umwandeln von SVG in PNG ist die Ausgabe Standard-PNG, jedes Tool hier nimmt sie also ohne weiteren Upload an.
Fürs Web schicken Sie sie durch PNG komprimieren oder wandeln sie in WebP um – beide erhalten die Transparenz und senken die Größe. Für E-Mail oder Fotos reduziert und verkleinert PNG zu JPG. Für exakte Maße im Nachhinein: Bild skalieren. Und wenn Sie mit einem Rasterbild angefangen haben und lieber einen Vektor hätten, geht PNG zu SVG den umgekehrten Weg.