PNG zu SVG - wann ein Rasterbild vektorisieren
Verwenden Sie PNG to SVG zum Umwandeln von Logos, Icons und Strichgrafiken in skalierbare Vektordateien. Das Werkzeug verfolgt Farbregionskanten serverseitig. Vektorisieren Sie, wenn das Bild ohne Pixelisierung skaliert oder in Illustrator/Inkscape bearbeitet werden soll. Fotos vermeiden - die Tabelle unten zeigt, welche Quelltypen gut konvertieren.
FreetoolOnline editorial team| Quelltyp | SVG-Ergebnisqualitaet | Anwendungsfall | Alternative |
|---|---|---|---|
| Logo / Icon (Vollfarben) | Ausgezeichnet - saubere Pfade | Web-Einbettung, Druck jeder Groesse | PNG to SVG |
| Strichgrafik / Silhouette | Gut - verfolgbare Kanten | Illustration, Clip Art | PNG to SVG |
| Fotografie | Schlecht - Hunderte rauschender Pfade | Nur Dateigroesse | Optimiertes PNG oder WebP |
| Verlauf / Textur | Schlecht - Banding-Artefakte | Skalierung ohne Pixelverlust | Hochaufloesungs-PNG in Zielgroesse |
Was Raster vs Vektor bedeutet (und warum diese Umwandlung approximativ ist)
Ein Rasterbild (PNG, JPG, BMP, Screenshot, Fotografie) ist ein festes Raster aus farbigen Pixeln - die Datei kennt die Farbe von Pixel (0,0), (0,1), und so weiter, und nichts anderes. Ein Vektorbild (SVG) ist eine Liste geometrischer Anweisungen - "zeichne einen Kreis mit Radius 12 bei (50,50) rot gefuellt", "zeichne einen Pfad entlang dieser 14 Punkte schwarz umrandet" - die ein Renderer in der Groesse in Pixel umsetzt, die die Seite anfordert. Da Raster keine Formdaten traegt, kann kein Werkzeug die urspruenglichen geometrischen Anweisungen aus einem PNG wiederherstellen; die Pixel erinnern sich nicht, welche frueher zu "dem Buchstaben A" oder "der Kurve des Logos" gehoerten. Vektorizer lesen daher das Pixelraster, finden Laeufe aehnlicher Farben, folgen den Grenzen zwischen ihnen und geben einen SVG-<path> pro Region aus. Das Ausgabe-SVG sieht aus wie der Input nur, wenn diese Farbgrenzen mit den tatsaechlichen Formen uebereinstimmen, die das menschliche Auge liest; wenn nicht, ist die Ausgabe ein unruhiges Mosaik aus Polygonen, das unendlich skaliert, aber nicht wie das Foto aussieht.
Wann PNG-zu-SVG tatsaechlich funktioniert
Die Vektorisierung produziert ein brauchbares SVG, wenn der Input eine kleine Anzahl von Regionen mit Volltonfarben und scharfen Grenzen dazwischen hat. Die vier haeufigen Faelle:
- Logos und Markenzeichen. Ein Logo hat normalerweise 1-4 Volltonfarben mit scharfen Kanten - genau das, was Auto-Tracing braucht. Das Ausgabe-SVG skaliert bis zu Plakatgroesse, ohne Kantenscharfen zu verlieren, kann durch Bearbeiten des
fill-Attributs umgefaerbt werden, und liefert in wenigen Kilobytes. Das ist der kanonische Anwendungsfall. - Icons und Piktogramme. Einfarbige Silhouetten (Ordner-Icons, Hamburger-Menues, Chevrons, Social-Media-Glyphen) tracen sauber, weil es genau eine Vordergrund / Hintergrund-Grenze gibt. Das Ergebnis ist als Pfade editierbar und mit einer CSS-Regel umfaerbbar.
- Strichgrafiken und Tuschezeichnungen. Schwarz-auf-weiss-Zeichnungen, Comic-Strichgrafik, mit hohem Kontrast gescannte handgezeichnete Skizzen: jeder Strich wird zu einem geschlossenen Pfad, und das SVG kann hinterher in jeder Farbe oder Strichstaerke neu umrandet werden.
- UI-Screenshots mit scharfen Formen. Screenshots von Buttons, Dialogboxen, einfachen Charts oder Text auf einem flachen Hintergrund haben Pixelkanten mit Anti-Aliasing, die zu sehr nahen Approximationen der urspruenglichen Geometrie vektorisiert werden. Das Ergebnis ist perfekt fuer die Einbettung in responsive Dokumentation.
Wann PNG-zu-SVG NICHT funktioniert
Fuer Fotos, weiche Verlaeufe und rauschende Scans erzeugt das Tracing-Werkzeug Fake-Vektorpfade, die zwar skalieren, aber dem Original nicht aehneln - diese Quelltypen bleiben besser als PNG oder WebP.
- Fotografien. Ein Foto eines Gesichts, einer Landschaft oder eines Produkts hat Tausende subtil unterschiedlicher Farben, die ineinander uebergehen. Jede einzelne Farbregion wird zu einem eigenen SVG-Pfadsegment - ein kleines Foto (800 x 600 Pixel) kann Zehntausende Segmente erzeugen, sodass die Ausgabedatei auf Dutzende Megabytes anwaechst und im Browser langsam scrollt. Alternativ quantisiert der Vektorizer die Farben auf einige Dutzend Regionen, und die Ausgabe sieht aus wie eine posterisierte Version des Fotos. Behalten Sie bei Fotos das Raster und optimieren Sie es als JPG oder WebP.
- Weiche Verlaeufe und feine Texturen. Ein Button mit einem weichen Top-Bottom-Verlauf, ein Aquarell mit auslaufenden Kanten oder jedes Bild mit Filmkorn hat keine scharfen Farbgrenzen zum Verfolgen. Der Vektorizer erfindet willkuerliche Grenzen an Quantisierungsschwellen, und das SVG sieht dort "streifig" oder "blockig" aus, wo das Original weich war.
- Anti-aliasing-Text als Pixel gerendert (niedriger Kontrast / klein). Text, der in kleinen Groessen oder mit starkem Anti-Aliasing gerendert wird, wird zu einer Suppe grauer Pixel um jedes Glyph. Auto-Tracing produziert unleserliche Buchstabenformen. Wenn Sie den Text als Pfade brauchen, richten Sie das Dokument mit der eigentlichen Schrift in einem Vektorwerkzeug ein, statt einen gerenderten Screenshot zu vektorisieren.
Vektorisieren auf freetoolonline
Vektorisieren auf freetoolonline fuer PNG zu SVG wann eine Rastergrafik vektorisieren: PNG to SVG oeffnen, ein sauberes Logo oder Icon ablegen, SVG erst laden wenn Kanten beim Zoomen scharf wirken.
Laedt https://freetoolonline.com/image-converter-tools/png-to-svg.html die Datei hoch oder laeuft lokal in Ihrem Browser?
Die Bruecke https://freetoolonline.com/image-converter-tools/png-to-svg.html laedt das PNG auf den freetoolonline-Server hoch. Die Seite ist kein vollstaendig offline, nur-client- oder nur-browser-Werkzeug, und sie laeuft nicht lokal. Diese Upload-Aussage ist direkt: der freetoolonline-Server uebernimmt das Auto-Trace, und das SVG-Ergebnis wird nach dem Standard-Aufbewahrungsfenster aus dem Speicher rotiert.
Was PNG-zu-SVG NICHT ist
Was PNG-zu-SVG NICHT ist in diesem Guide: ein verlustfreier Fotoformat-Wechsel - Vektorisieren ist fuer hartkantige Artwork, nicht um Kamera-JPEGs als SVG zu shippen.
- "Als SVG speichern" eines PNG in einem Editor. Die meisten Editoren speichern ein PNG bereitwillig als SVG-Datei - aber was sie wirklich tun, ist die PNG-Bytes in ein SVG-
<image>-Element einzupacken. Das Ergebnis hat die Erweiterung.svgund dieselben Pixel wie der Input; es skaliert NICHT besser und ist NICHT als Pfade editierbar. Vektorisierung (was https://freetoolonline.com/image-converter-tools/png-to-svg.html tut) zeichnet den Inhalt als tatsaechliche<path>-Elemente neu, was eine andere Operation ist. - SVG zu PNG (Rastern). Die umgekehrte Richtung - einen Vektor zu nehmen und in ein Raster fester Groesse zu rendern - ist eine separate Aufgabe mit anderen Abwaegungen (Aufloesungswahl, Anti-Aliasing, eingebettete Schriften). Siehe SVG zu PNG - wann ein SVG rastern fuer die Rasterung, und das SVG to PNG-Werkzeug fuer die Operation.
- Ein PNG zu einem kleineren PNG komprimieren. Wenn das Ziel ist "die Datei ist zu gross" und der Inhalt fotografisch oder texturreich, ist der richtige Schritt Raster-Kompression, nicht Vektorisierung. Siehe JPEG ohne Qualitaetsverlust komprimieren - Qualitaet vs Groesse fuer die Foto-Kompressions-Abwaegung, JPG vs PNG fuer das Web fuer die Wahl des Rasterformats, und das Compress Image-Werkzeug fuer die Operation.
Verwandte Bildkonvertierungs-Leitfaeden: SVG zu PNG - wann ein SVG rastern (die umgekehrte Richtung), PNG vs SVG - wann welches verwenden (die Formatwahl-Entscheidung vor dem Konvertieren), und JPG vs PNG fuer das Web (Raster-Formatwahl, wenn Vektorisierung nicht die Antwort ist).