Bild in SVG umwandeln (Vektorisieren)

So wandeln Sie ein Bild in SVG um

1. Ziehen Sie ein PNG-, JPG-, WebP- oder GIF-Bild auf die Ablagefläche oder klicken Sie darauf, um eines auszuwählen. Das Original erscheint links.
2. Wählen Sie eine Voreinstellung: - Logo (flächige Farben, klare Formen) für Logos, Symbole, Stempel und flache Illustrationen; - Detailliert (mehr Farben und Pfade) für Zeichnungen mit Schattierungen oder vielen Farben; - Posterisiert (4 geglättete Farben) für ein stilisiertes, plakatartiges Ergebnis aus einem Foto.
3. Passen Sie bei Bedarf Anzahl der Farben (2 bis 64) und Flecken ignorieren kleiner als (px) an. Die Voreinstellung setzt für beide sinnvolle Werte.
4. Wählen Sie eine Arbeitsgröße (längste Seite). Das Bild wird in dieser Größe vektorisiert; das SVG selbst behält die Originalabmessungen.
5. Klicken Sie auf In SVG umwandeln. Das Ergebnis erscheint rechts mit Dateigröße, Anzahl der Pfade und Farben sowie der benötigten Zeit.
6. Klicken Sie auf SVG herunterladen oder auf SVG-Code kopieren, um das Markup in Ihr HTML oder Designprogramm einzufügen.

So funktioniert das Vektorisieren

Dieses Tool verwendet imagetracerjs, einen Open-Source-Vektorisierer, in drei Schritten:

1. Farbreduktion: Das Bild wird auf die gewählte Anzahl Farben reduziert. Jedes Pixel wird der nächstliegenden Palettenfarbe zugeordnet, und die Palette wird in mehreren Durchgängen verfeinert.
2. Kantenerkennung: Für jede Farbe werden die Umrisse aller Flächen dieser Farbe nachgezeichnet, einschließlich Löchern (etwa dem Inneren eines „O“).
3. Pfadanpassung: Die Umrisse werden zu geraden Linien und quadratischen Kurven vereinfacht, die im SVG zu <path>-Elementen werden.

Flächen unterhalb der Schwelle Flecken ignorieren kleiner als (px) werden verworfen, was Rauschen und JPG-Artefakte entfernt. Der Wert 0 behält alles; 8 bis 20 eignet sich gut für Logos; größere Werte ergeben eine sauberere, aber einfachere Zeichnung. Vollständig transparente Bereiche werden entfernt, sodass ein Logo auf transparentem Hintergrund transparent bleibt.

Was gute Ergebnisse liefert

Vektorisieren funktioniert am besten bei einfachen Logos und Zeichnungen: wenige flächige Farben, klare Kanten, keine Verläufe. Eine eingescannte Skizze, eine Unterschrift in Schwarz-Weiß oder ein Pixel-Art-Symbol lassen sich mit 2 bis 8 Farben sehr gut umwandeln.

Bei Fotos sieht es anders aus. Ein Foto enthält Tausende feiner Tonwerte, eine getreue Vektorversion bräuchte also viele Farben und Zehntausende Pfade – das SVG wird dann viel schwerer als das JPG. Nutzen Sie stattdessen Posterisiert (4 geglättete Farben) für einen künstlerischen Effekt und erwarten Sie kein fotografisches Ergebnis. Wird das SVG sehr groß, warnt Sie das Tool.

Tipps für ein saubereres Logo:

• Beginnen Sie mit der größten und schärfsten Version des Bildes, die Sie haben.
• Stellen Sie Anzahl der Farben auf die tatsächliche Farbanzahl des Logos (einschließlich Hintergrund).
• Erhöhen Sie die Fleckenschwelle, wenn Sie kleine Punkte an den Kanten sehen.

Datenschutz und sichere Vorschau

Das Bild wird in Ihrem Browser vektorisiert und nie hochgeladen. Die SVG-Vorschau wird als einfaches Bild von einer privaten Blob-Adresse angezeigt und nie in die Seite eingefügt, sodass selbst eine ungewöhnliche Datei keinen Code ausführen kann.