Worin sie sich unterscheiden
SVG speichert Formen, Pfade und Farben als Anweisungen, bleibt daher bei jeder Größe scharf und ist oft winzig. Es ist ein textbasiertes Format, ein Browser zeichnet es also in jeder benötigten Größe neu. PNG speichert ein festes Raster aus Pixeln, ein Vergrößern macht es daher unscharf, und es erfasst jedes Pixel auch in einfarbigen Flächen, was große Bilder schwer machen kann.
Kurz gesagt: SVG passt besser, wenn das Bild aus Formen aufgebaut ist, und PNG passt besser, wenn das Bild aus Pixeln besteht, etwa ein Screenshot oder ein Scan. Keines ist in jeder Situation besser, die Wahl hängt also vom Inhalt und vom Einsatzort der Datei ab.
Wann SVG verwenden
Logos, Icons, einfache Illustrationen und Diagramme auf Webseiten. SVG-Dateien lassen sich ohne Qualitätsverlust gestalten und skalieren, und eine einzige Datei kann einen kleinen Handybildschirm und ein großes Display gleich gut bedienen. Bei flächigen Farben und klaren Formen liefert SVG meist die kleinsten Dateien.
SVG ist außerdem praktisch, weil sich die Farben oft im Code ändern lassen, sodass ein Icon in hellen und dunklen Designs erscheinen kann. Sehr komplexe Grafiken mit Tausenden von Formen können ein SVG allerdings größer und langsamer zu zeichnen machen als ein PNG.
Wann PNG verwenden
Screenshots, Bilder mit komplexen Details und Orte, die kein SVG akzeptieren, etwa viele soziale Netzwerke und E-Mail-Programme. PNG ist verlustfrei, Text in Screenshots bleibt also scharf, und es unterstützt Transparenz. Bei gewöhnlichen Fotografien ist JPG oder WebP meist kleiner als PNG.
Wählen Sie PNG, wenn Sie ein festes Ergebnis brauchen, das überall identisch aussieht, etwa ein Bild in einer E-Mail, auf einer Präsentationsfolie oder in einem Social-Media-Beitrag.
Ein Beispiel aus der Praxis (veranschaulichend)
Sagen wir, Sie haben ein einfaches Logo aus drei Formen. Als SVG ist es vielleicht nur wenige KB groß und sieht auf einer Visitenkarte, im Kopfbereich einer Webseite und auf einer Werbetafel perfekt aus. Als PNG mit 200 Pixeln Breite sieht es auf einer Webseite gut aus, aber weich, wenn es jemand auf Plakatgröße streckt.
Nehmen wir nun an, ein soziales Netzwerk verlangt einen Bild-Upload und lehnt SVG ab. Sie exportieren das Logo als PNG mit 1024 Pixeln Breite, was Spielraum zum Verkleinern lässt, und laden stattdessen dieses hoch. Behalten Sie das SVG als Ihre Masterkopie, damit Sie später ein frisches PNG in jeder anderen Größe exportieren können, ohne an Schärfe zu verlieren.
SVG in PNG umwandeln
Wählen Sie die benötigte Breite, zum Beispiel 1024 Pixel, und rendern Sie das SVG in dieser Größe. Transparente Bereiche bleiben im PNG transparent. Es ist besser, in der benötigten Größe zu rendern, als klein zu rendern und später zu vergrößern, denn das Vergrößern eines PNG kann keine Details zurückholen.
Brauchen Sie mehrere Größen, etwa 256, 512 und 1024 Pixel, rendern Sie jede einzeln aus dem SVG. Prüfen Sie die Ränder auf einem dunklen und einem hellen Hintergrund, um zu bestätigen, dass die Transparenz richtig aussieht.
Häufige Fehler
- Ein PNG für ein Logo verwenden und es dann über seine Größe hinaus strecken
- Ein Foto in SVG umwandeln und eine kleine Datei erwarten
- Ein PNG zu klein rendern und später vergrößern
- Vergessen, dass manche Programme SVG ignorieren oder einschränken
- Das SVG nach dem Export löschen, sodass kein scharfes Master übrig bleibt
Die meisten davon entstehen, weil man die beiden Formate für austauschbar hält. Am besten verwendet man sie zusammen: SVG als bearbeitbares Master und PNG als Export für Orte, die Pixel brauchen.
Vorsicht bei nicht vertrauenswürdigen SVG-Dateien
Ein SVG kann Skripte und andere aktive Inhalte enthalten, nicht nur Formen. Öffnen Sie SVG-Dateien nur aus Quellen, denen Sie vertrauen, und seien Sie bei Dateien aus unbekannten E-Mails oder Webseiten vorsichtig.
Kurze Checkliste
- Flaches Logo oder Icon für das Web: SVG
- Foto oder komplexes Bild: JPG, WebP oder PNG
- Plattform lehnt SVG ab: ein PNG exportieren
- Die PNG-Breite vor dem Export wählen
- Das SVG als Master behalten
Mit DoneImg im Browser erledigen
Öffnen Sie das Konvertierungs-Tool, fügen Sie Ihr SVG hinzu und wählen Sie PNG als Ausgabe. Legen Sie die benötigte Breite fest und laden Sie das Ergebnis herunter. Transparente Bereiche bleiben transparent.
Die Umwandlung findet in Ihrem Browser statt, Ihre Datei wird also nicht hochgeladen. Öffnen Sie trotzdem nur SVG-Dateien, denen Sie vertrauen.
Anschließend können Sie das Komprimierungs-Tool auf das PNG anwenden, wenn die Datei schwerer ist, als Sie möchten, oder das Tool zum Verkleinern, um kleinere Versionen zu erstellen.