Konvertieren Sie Raster-PNG/JPG-Bilder in skalierbare Vektor-SVG-Grafiken. Sicher, schnell und vollständig in Ihrem Browser verarbeitet.
Unterstützt bis zu 50 MB
Beim Konvertieren von PNG in SVG handelt es sich grundsätzlich um einen Nachverfolgungsvorgang und nicht um eine Formatänderung. PNG speichert Pixel; SVG speichert geometrische Grundelemente. Der Übergang von einem Pixelraster zu skalierbaren Vektorpfaden erfordert die Interpretation der Bitmap und das Zeichnen annähernder Formen um Bereiche ähnlicher Farbe. Das Ergebnis ist wirklich skalierbar – Sie können die Größe ohne Pixelierung frei ändern –, aber es ist keine perfekte Reproduktion der Quelle. Fotoinhalte lassen sich schlecht nachzeichnen, da jede Farbvariation auf Pixelebene zu einer Form wird, wodurch riesige SVGs entstehen, die den Zweck verfehlen. Logos, Symbole, Strichzeichnungen und kontrastreiche Grafiken lassen sich sauber nachzeichnen, da sie über eine kleine Anzahl von Farbbereichen mit klar definierten Grenzen verfügen.
Dieser Konverter verwendet die ImagetracerJS-Bibliothek, eine JavaScript-Portierung von Vektorverfolgungsalgorithmen ähnlich wie Potrace. Das PNG wird in eine RGBA-Bitmap dekodiert, die Bitmap wird mithilfe einer konfigurierbaren Palette in Farbregionen segmentiert, die Grenzen jeder Region werden in einen Pfad eingezeichnet, Pfade werden mithilfe der Bezier-Näherung vereinfacht und die resultierenden Pfade werden als SVG-Pfadelemente ausgegeben. Die gesamte Pipeline läuft in Ihrem Browser, ohne dass ein Server-Upload erforderlich ist.
Tracing-Parameter steuern den Kompromiss zwischen Wiedergabetreue und Dateigröße. Mehr Farben und feinere Details erzeugen eine größere SVG-Datei, die der Quelle besser entspricht; Weniger Farben und eine gröbere Nachzeichnung erzeugen eine kleinere SVG-Datei mit einem stilisierteren Eindruck. Die Standardeinstellungen sind für Logos und Symbole angepasst. Komplexe Bilder können von einem Tracing-Durchgang mit angepassten Einstellungen profitieren oder sind möglicherweise einfach keine guten Kandidaten für die Vektorisierung.
Das Vektorisieren eines PNG ist am nützlichsten, wenn Sie das Bild über seine ursprüngliche Auflösung hinaus skalieren müssen. Vor allem Logos liegen oft als PNGs in bescheidener Größe vor und müssen auf Werbetafeln, Retina-Displays und großformatigen Drucken gestochen scharf dargestellt werden. Eine Vektorverfolgung erzeugt ein SVG, das ohne Qualitätsverlust skaliert werden kann; Der Kompromiss besteht in der Treue zu den Originalpixeln.
SVG ist außerdem deutlich kompakter als PNG für Grafiken mit wenigen Farben und großen flachen Bereichen. Ein PNG-Symbol mit 256×256 könnte 8 KB groß sein; das entsprechende SVG mit zwei oder drei Farben ist oft unter 1 KB groß. Bei UI-Symbolbibliotheken, die an ein Web-Frontend bereitgestellt werden, reduzieren Vektorversionen die Bundle-Größe und verbessern die Schärfe bei allen Anzeigedichten.
Legen Sie ein PNG ab, wählen Sie die Tracing-Einstellungen und generieren Sie ein SVG.
imagetracerjs implementiert eine mehrstufige Pipeline: Die Farbquantisierung reduziert die Bitmap mithilfe von K-Means-Clustering oder Median Cut auf eine feste Anzahl von Farben. Kantenerkennung identifiziert Pixelgrenzen zwischen Regionen; Die Konturverfolgung folgt Grenzen, um geschlossene Polygone zu erzeugen. Die Linien- und Kurvenanpassung nähert Polygone mit Bezier-Kurven an, um Pfaddaten zu reduzieren.
Die wichtigsten Algorithmusparameter sind die Anzahl der Farben (typisch: 4–32), Pathomit (Pfade, die kürzer als diese Anzahl an Pixeln sind, werden als Rauschen verworfen), Ltres (Linientoleranz – wie weit eine Kante abweichen kann, bevor sie in ein neues Segment aufgeteilt wird) und Qtres (quadratische Kurventoleranz – wie aggressiv Kurven geglättet werden). Die Standardeinstellungen eignen sich gut für Logos. Komplexe Bilder profitieren von der Optimierung pro Bild.
Die Ausgabe erfolgt im Standard-SVG 1.1 mit Pfadelementen. Jeder Farbbereich wird zu einem Pfad mit einem Füllattribut. Die resultierende Datei wird in jedem Browser, Vektoreditor oder SVG-fähigen Designtool geöffnet. Die Dateigröße hängt hauptsächlich von der Pfadanzahl und der Knotendichte ab. Ein typisches nachgezeichnetes Logo ist 1–10 KB groß.