Von Claire Yoon10 Min. Lesezeit

PNG vs. SVG: Was du wann verwenden solltest, und wann Konvertieren sinnvoll ist

PNG besteht aus Pixeln und SVG aus Mathematik. Welches Format passt, hängt also davon ab, was du erstellst. Ein klarer Leitfaden zur Wahl zwischen beiden, plus wie du ein PNG in ein echtes SVG verwandelst.

Auf dieser Seite

PNG und SVG sind keine besseren oder schlechteren Versionen derselben Sache. Es sind zwei verschiedene Arten von Dateien, und die richtige hängt davon ab, was du erstellst. Ein PNG besteht aus Pixeln, wie ein winziges Mosaik aus farbigen Quadraten. Ein SVG besteht aus Mathematik: Linien, Kurven und Formen, die der Computer in jeder Größe neu zeichnet. Dieser eine Unterschied entscheidet alles Weitere. Die Kurzregel: Nutze PNG für Fotos und detailreiche Bilder, und SVG für Logos, Icons, Text und alles, was du skalieren, groß drucken oder mit einer Maschine schneiden willst. Und wenn du ein PNG-Logo hast, das du als SVG brauchst, speicherst du es nicht einfach als SVG. Du konvertierst es, und genau diese Konvertierung entscheidet, ob das Ergebnis funktioniert.

Die Kurzfassung
  • PNG = Pixel. Am besten für Fotos, Screenshots und detailreiche Bilder, die Transparenz brauchen.
  • SVG = Mathematik. Am besten für Logos, Icons, Text und alles, was du skalierst, groß druckst oder schneidest.
  • Skalieren verrät den Unterschied: Vergrößere beide 10-fach, und das PNG wird unscharf, während das SVG messerscharf bleibt.
  • Du kannst ein PNG nicht einfach in .svg umbenennen. Ein PNG in ein echtes SVG zu verwandeln bedeutet, es nachzuzeichnen. Konvertiere ein PNG in SVG und prüfe das Ergebnis.
  • Achte auf das falsche SVG: Ein PNG, das in eine .svg-Datei verpackt wurde, verpixelt weiterhin und lässt sich weiterhin nicht bearbeiten.

Was wirklich anders ist: Pixel vs. Mathematik

Öffne ein PNG, zoome weit hinein, und irgendwann stößt du auf die Quadrate. Es ist ein festes Raster aus Pixeln. Vergrößerst du es über seine native Größe hinaus, muss der Computer erraten, was zwischen diese Quadrate gehört. Dadurch werden Kanten weich und blockig. Genau deshalb sieht ein kleines Logo von einer Website sofort unscharf aus, sobald du es hochskalierst.

Ein SVG speichert stattdessen die Anweisungen: Zeichne hier eine Kurve, dort eine Form, fülle sie mit dieser Farbe. Weil es Mathematik ist, zeichnet der Computer es in jeder Größe perfekt scharf neu, vom Favicon bis zur Plakatwand. Es gibt nichts zu erraten und nichts, das verwischt. Wenn die Idee von "Anweisungen statt Pixeln" neu für dich ist, erklärt was Bildvektorisierung eigentlich ist die Grundlagen.

Dasselbe Bild, vergrößert
Ein Buchstabe S, links als verpixeltes Raster-PNG mit sichtbar gezackten Quadraten und rechts als glattes Vektor-SVG, das beim Vergrößern scharf bleibt
Vergrößerst du ein PNG, werden die Pixel sichtbar. Ein SVG wird aus Mathematik neu gezeichnet und bleibt deshalb in jeder Größe scharf.

PNG vs. SVG auf einen Blick

PNGSVG
Besteht ausPixeln (Raster)Mathematik (Vektor)
Skaliert ohne UnschärfeNein, feste AuflösungJa, jede Größe
Bearbeitbare FormenNein, ein flaches BildJa, separate Pfade und Farben
TransparenzJaJa
AnimationNeinJa
Fotos und feine DetailsKommt gut damit zurechtTut sich schwer, flacht sie ab
Browser- und App-UnterstützungUniversellBreit, aber nicht jede alte App oder jeder E-Mail-Client
Typische DateigrößeGrößerKleiner bei flacher Grafik, kann bei unruhiger Grafik größer sein
Am besten fürFotos, Screenshots, detailreiche GrafikenLogos, Icons, Schrift, Schnittdateien

Ein Hinweis zur Größe: Oft heißt es, "SVG ist kleiner", und bei einem flachen Logo oder Icon stimmt das meistens. Aber ein SVG einer komplexen, fotoähnlichen Grafik kann größer werden als das PNG, weil es jede winzige Form beschreiben muss, die es findet. Einfache, flache Grafiken sind der Bereich, in dem SVG bei der Dateigröße gewinnt.

Welches solltest du verwenden? Entscheide nach dem Einsatzzweck

Es gibt hier keinen pauschalen Gewinner. Es hängt komplett von der Aufgabe ab. Hier ist die schnelle Einordnung für die Dinge, nach denen Menschen tatsächlich fragen.

Was du erstellstVerwendeWarum
Website-Grafiken, Icons, UISVGScharf auf jedem Bildschirm und Retina-Display, dazu winzig beim Laden
Ein Logo, das du überall wiederverwendestSVGEine Datei skaliert von der Visitenkarte bis zum Messebanner, ohne erneut exportiert zu werden
FotografienPNG (oder JPG)Vektoren können fotografische Tonwertdetails nicht nachbilden
Screenshots, App-MockupsPNGPixelgenau, mit Transparenz dort, wo du sie brauchst
Cricut, Silhouette, Vinyl-CutterSVGSchneidemaschinen folgen Pfaden, nicht Pixeln
Sublimation, DTG, bedruckte ShirtsHängt von Druck vs. Schnitt ab, siehe unten
QR-CodesSVGBleibt bei jeder Druckgröße scharf und scanbar
Druck: Visitenkarten, BeschilderungSVG für ein Logo oder eine Grafik, PNG/JPG für ein FotoLine Art druckt als Vektor schärfer; Fotos drucken als hochauflösendes Raster besser

Sublimation und bedruckte Shirts sorgen oft für Verwirrung. Eine häufige Frage in Craft-Gruppen ist, ob man für ein Shirt ein SVG oder ein PNG bestellen sollte. Die ehrliche Antwort hängt davon ab, wie das Shirt hergestellt wird. Sublimation und Direct-to-Garment-Druck sind Rasterprozesse, die Tinte aufbringen, deshalb will die Druckerei meist ein hochauflösendes PNG mit transparentem Hintergrund. Heat-Transfer-Vinyl ist das Gegenteil: Die Maschine schneidet entlang von Pfaden, also braucht sie ein SVG. Wenn du unsicher bist, stell deiner Druckerei eine Frage: Wird das Design gedruckt oder geschnitten? Für die Schnittseite ist ein schnittfertiges SVG zu erstellen eine eigene kleine Fähigkeit.

Und wenn dein Logo immer wieder mit einem weißen Kasten drumherum auftaucht, ist das kein Formatkrieg. Es ist Transparenz. Du hast ein JPG gespeichert, das keinen transparenten Hintergrund speichern kann, obwohl du ein PNG oder SVG gebraucht hättest.

Kann ich ein PNG in ein SVG verwandeln?

Kannst du ein PNG in ein SVG verwandeln? Ja, aber du speicherst es nicht einfach als SVG. Du zeichnest es nach: Software baut das Pixelbild als Vektorpfade neu auf. Der umgekehrte Weg, SVG zu PNG, ist einfach und zuverlässig, weil du Formen nur auf eine feste Größe in Pixel abflachst. PNG zu SVG ist die schwierige Richtung, und die Qualität der Nachzeichnung ist alles.

In dieser schwierigen Richtung gehen die Ergebnisse extrem auseinander. Ein guter Tracer baut dein Artwork als saubere, bearbeitbare Pfade neu auf. Ein unachtsamer erzeugt ein Durcheinander aus Tausenden verirrten Ankerpunkten, gezackten Kanten und Farben, die du nicht auseinanderziehen kannst. Dieselbe Eingabe, komplett anderes Ergebnis. Die ausführliche Anleitung findest du in wie du ein PNG ohne Qualitätsverlust in SVG konvertierst.

Die Falle, die du kennen solltest: Manche Konverter zeichnen gar nicht nach. Sie verpacken dein ursprüngliches PNG in eine .svg-Datei und geben es dir zurück. Es hat die richtige Endung und lässt sich öffnen, aber es sind weiterhin Pixel. Es wird unscharf, wenn du es skalierst, und du kannst keine einzelne Form bearbeiten. Das ist ein falscher Vektor, und er macht still und leise den ganzen Grund zunichte, aus dem du konvertiert hast. Dieselbe Falle erwischt viele beim Vektorisieren eines Logos.

Drei schnelle Checks zeigen dir, ob du ein echtes SVG bekommen hast:

  • Skaliere es hoch. Ein echter Vektor bleibt scharf. Ein falscher verpixelt wie das PNG, das er heimlich immer noch ist.
  • Klicke auf eine Form. Du solltest einzelne Pfade auswählen und verschieben können, nicht ein flaches Bild.
  • Schau dir die Komplexität an. Saubere Kurven nutzen eine Handvoll Ankerpunkte, nicht Tausende. Ein aufgeblähter Trace ist mühsam zu bearbeiten und langsam zu schneiden. Mehr dazu, warum Traces zu viele Knoten bekommen.

Die Grenze sollte man direkt sagen: Nicht jedes PNG sollte zu einem SVG werden. Ein Foto, ein Screenshot eines Fotos oder verlaufsreiche AI-Grafik lässt sich nicht sauber nachzeichnen, weil Vektoren flache Formen beschreiben und kontinuierliche Tonwerte zu posterisierten Klecksen abgeflacht werden. Wenn deine Quelle ein Logo, Icon oder eine flache Illustration ist, sieht es gut aus. Wenn es ein Foto ist, lass es ein PNG.

Wie das mit PerfectVector aussieht

Bei PNG zu SVG geht es im Kern darum, eine Nachzeichnung zu bekommen, die diese Checks besteht, ohne dass du danach eine Stunde manuell aufräumen musst. Genau dafür ist PerfectVector gebaut. Es baut dein Bild als saubere Pfade mit niedriger Knotenzahl neu auf, behält jede Farbe als eigene bearbeitbare Form und liefert dir echte SVG-Ausgabe, die sich sauber in Illustrator, Figma oder Inkscape öffnen lässt. Du kannst ein PNG in ein SVG verwandeln und die Pfade selbst prüfen. Deine ersten Konvertierungen sind kostenlos, ohne Kreditkarte.

PNG, vergrößert
Ein PNG-Logo, so stark vergrößert, dass seine Kanten sichtbar unscharf und verpixelt sind
Das Raster-PNG zerfällt in weiche, blockige Kanten.
SVG, vergrößert
Dasselbe Logo als SVG, auf dieselbe Größe vergrößert, mit perfekt scharfen Kanten
Das nachgezeichnete SVG bleibt bei derselben Größe scharf.

Wann du beim PNG bleiben solltest

SVG ist nicht immer das Upgrade. Behalte das PNG, wenn:

  • Es ein Foto ist, oder irgendetwas mit fotografischen Details und Verläufen.
  • Du nur ein schnelles Bild fürs Web oder für E-Mail brauchst und es schon die richtige Größe hat.
  • Es überall ohne Überraschungen geöffnet werden soll. PNG ist das universelle Rasterformat.

PNG ist öfter die richtige Antwort, als Format-Evangelisten zugeben. Das Ziel ist nicht "immer SVG". Es ist die richtige Datei für die Aufgabe direkt vor dir.

FAQ

Ist SVG besser als PNG? Keines ist allgemein besser. Sie passen zu unterschiedlichen Aufgaben. SVG gewinnt bei Logos, Icons, Text und allem, was du skalierst, groß druckst oder schneidest, weil es ohne Unschärfe skaliert. PNG gewinnt bei Fotos, Screenshots und detailreichen Bildern, weil es echte Pixeldetails speichert, die ein SVG nicht nachbilden kann.

Kann ich ein PNG in ein SVG verwandeln? Ja, indem du es nachzeichnest, nicht indem du es umbenennst. Ein Konverter baut die Pixel als Vektorpfade neu auf. Das funktioniert gut bei flacher, kontrastreicher Grafik wie Logos und Icons, und schlecht bei Fotos. Prüfe immer, ob das Ergebnis ein echter Vektor mit bearbeitbaren Pfaden ist, nicht ein PNG, das in ein .svg verpackt wurde.

Welche Nachteile hat SVG? SVG tut sich mit Fotografien und kontinuierlichen Tonwertdetails schwer, einige ältere Apps und E-Mail-Clients unterstützen es nicht vollständig, und eine unachtsame Konvertierung kann eine aufgeblähte Datei mit Tausenden unnötigen Knoten erzeugen, die schwer zu bearbeiten ist. Bei flachen Grafiken spielt davon meist nichts eine Rolle.

Ist PNG oder SVG besser für Cricut? SVG. Cricut und andere Schneidemaschinen folgen beim Schneiden Vektorpfaden, deshalb schneidet ein SVG sauber, während ein PNG zuerst in Design Space nachgezeichnet werden muss, oft schlecht. Lade ein SVG hoch, wann immer du kannst.

Sollte ich für ein bedrucktes Shirt PNG oder SVG verwenden? Das hängt von der Methode ab. Sublimation und Direct-to-Garment-Druck sind Rasterverfahren, deshalb brauchen sie ein hochauflösendes PNG mit transparentem Hintergrund. Heat-Transfer-Vinyl wird geschnitten, also braucht es ein SVG. Frag deine Druckerei, ob sie das Design druckt oder schneidet.

Was ist kleiner, PNG oder SVG? Bei flacher Grafik wie Logos und Icons ist das SVG meistens deutlich kleiner. Bei komplexen oder fotoähnlichen Bildern kann das SVG größer werden als das PNG, weil es jede Form beschreiben muss. Passe das Format an das Artwork an.


Hängt dein Logo oder deine Grafik als PNG fest? Konvertiere es in ein sauberes, bearbeitbares SVG und führe die drei Checks oben durch, um sicherzugehen, dass du wirklich einen echten Vektor bekommen hast.

Mehr aus dem Blog