Ein PNG besteht aus Pixeln und wird beim Vergrößern unscharf. Ein SVG besteht aus mathematischen Pfaden und bleibt in jeder Größe gestochen scharf. PNG in SVG umzuwandeln — genannt Vektorisieren oder Tracing — ist ein toller Trick für Logos und Icons, aber eine schlechte Idee für Fotos. So erkennst du den Unterschied.
Wir haben das selbst gemessen. Vektorisieren zahlt sich nur aus, wenn das Bild schon aus flachen Formen besteht. Unser transparentes Logo ging von 28,8 KB auf 1,7 KB — 94% gespart — und ist jetzt beliebig skalierbar. Beim Foto lief es genau umgekehrt: Aus 1,88 MB PNG wurden 7,74 MB SVG-Pfade, das Vierfache des Originals. alle Messwerte ansehen
Raster vs. Vektor in einem Satz
- Raster (PNG, JPG, WebP): ein Raster aus farbigen Pixeln. Ideal für Fotos; wird beim Hochskalieren klotzig.
- Vektor (SVG): durch Mathematik beschriebene Formen. Skaliert unendlich, meist winzige Datei, ideal für Logos und Druck.
Was Tracing tatsächlich macht
Ein Konverter kann die Formen in deinem Bild nicht magisch erkennen. Er nähert an: Er fasst Bereiche ähnlicher Farbe zusammen und zeichnet sie als Vektorpfade neu. Das Ergebnis ist also eine saubere Interpretation des Originals, keine pixelgenaue Kopie. Wenige Farben und scharfe Kanten lassen sich besser nachzeichnen; weiche Verläufe und feine Details schlechter.
Wann PNG zu SVG hervorragend funktioniert
- Logos und Icons mit flachen Farben und klaren Kanten
- Strichzeichnungen und einfache Illustrationen
- Schwarz-Weiß-Marken, die auf jedem Bildschirm und im Druck scharf sein sollen
Dafür erzeugt PNG in SVG eine kleine, skalierbare Datei, die du ohne Unschärfe in eine Website oder ein großes Banner setzen kannst.
Der gemessene Fall für das Nachzeichnen ist schmal, aber eindeutig. Unser transparentes Logo ging 28.8 KB → 1.7 KB (-94%) und wurde beliebig skalierbar — der größte Einzelgewinn in unseren ganzen Daten. Das kaufen dir „wenige Farben, harte Kanten”.
Wann du die Rasterdatei behalten solltest
- Fotos — das Nachzeichnen eines Fotos ergibt tausende unsaubere Pfade, eine größere Datei und ein schlechtes Ergebnis.
- Komplexe Verläufe oder Texturen — dasselbe Problem.
Bei Fotos bleib beim Rasterformat und steuere die Größe stattdessen mit der Bildkomprimierung.
Und der Fall dagegen ist genauso klar. Dasselbe Werkzeug machte aus einer flachen Illustration 34.7 KB → 117.0 KB (+238%), aus einem UI-Screenshot 18.0 KB → 27.3 KB (+52%) und aus einem Foto 1.88 MB → 7.74 MB (+312%). Ein JPG-Foto nachzuzeichnen war noch schlimmer: 330.2 KB → 7.49 MB (+2224%). Jede Farbfläche wird ein Pfad, und ein Foto hat Zehntausende davon.
So wandelst du um — privat
Diese Tools zeichnen komplett im Browser nach — dein Bild wird nie hochgeladen:
- PNG in SVG — ein PNG-Logo oder -Icon vektorisieren.
- JPG in SVG — dasselbe, ausgehend von einem JPG.
Wähle eine Detailstufe, sieh dir die Vorschau an und lade herunter. Sieht die getracte Version sauber aus, hast du ein Logo, das nie wieder verpixelt; sieht sie unruhig aus, gehört das Bild schlicht ins PNG-Format.
Eine schnelle Entscheidungshilfe
| Dein Bild | Zu SVG tracen? | Warum |
|---|---|---|
| Flaches Logo, 2–4 Farben | Ja | Saubere Kanten, winzige Datei |
| Icon oder Strichzeichnung | Ja | Pfade bleiben in jeder Größe scharf |
| Screenshot mit Text | Meist nein | Kantenglättung wird zu unsauberen Pfaden |
| Fotografie | Nein | Tausende Pfade, größere Datei, schlechteres Ergebnis |
| Verlauf oder Textur | Nein | Weiche Töne lassen sich nicht auf Flächen reduzieren |
Ein konkretes Beispiel
Stell dir ein schwarz-weißes Vereinslogo vor, als 512-px-PNG gespeichert. Vergrößerst du es auf einem Poster, zerfallen die Kanten in eine Pixeltreppe. Trace es zu SVG, und dieselbe Marke druckt in jeder Größe gestochen scharf, oft in unter 10 KB. Versuch dasselbe mit einem Familienfoto: Der Tracer hat keine einzelne Form, der er folgen kann, und zerlegt das Bild in tausende Farbkleckse. Die Datei bläht sich auf, und Haut und Himmel sehen aus wie ein Malen-nach-Zahlen-Poster. Gleiches Werkzeug, gegenteiliges Ergebnis — weil das eine Bild aus Formen besteht und das andere aus fließenden Tönen.
Das hat das Tracing bei zwei sehr unterschiedlichen Eingaben tatsächlich erzeugt:
| Testbild | Eingabe | Ausgabe | Änderung |
|---|---|---|---|
| Logo mit Alpha | 28.8 KB | 1.7 KB | -94% |
| Screenshot | 18.0 KB | 27.3 KB | +52% |
Das flache Logo wurde zu 1.7 KB (-94%) getraced — ein echter Gewinn, denn eine Handvoll Formen beschreibt es vollständig. Der Screenshot ging von 18.0 KB auf 27.3 KB (+52%): Der Tracer musste für jede Region ähnlicher Farbe einen Pfad ausgeben, und ein Screenshot voller Text hat Tausende davon. Dieser Abstand ist die Entscheidungsregel. Wenn Tracing die Datei größer macht, war das Bild von Anfang an kein Vektormaterial.
Häufige Irrtümer
- „SVG ist immer kleiner.” Nur bei einfacher Grafik. Ein getractes Foto ist meist größer als das ursprüngliche PNG.
- „Tracing holt verlorene Details zurück.” Kann es nicht. Es interpretiert nur, was schon da ist, und fügt nie Auflösung hinzu.
- „Jedes PNG wird zum sauberen Logo.” Ist die Vorlage unscharf oder verrauscht, erbt der Trace genau dieses Durcheinander.
FAQ
Kann ich das SVG danach bearbeiten?
Ja. Da ein SVG aus Pfaden besteht, kannst du es in einem Vektoreditor öffnen und einzelne Teile umfärben oder umformen — bei einem flachen PNG geht das nicht.
Warum wirkt meine getracte Datei posterisiert?
Der Tracer hat dein Bild auf wenige Volltonfarben reduziert. Erhöhe die Farb- oder Detailstufe, oder akzeptiere, dass es ein Foto ist, und behalte es als Raster.
Und die umgekehrte Richtung?
Von Vektor zurück zu Pixeln ist unkompliziert und bleibt in der gewählten Größe scharf — siehe SVG in PNG.