Vektorisieren in drei Schritten
Ziehen Sie ein Bild in das Feld oben oder fügen Sie es mit Strg+V ein. Wählen Sie, was das Bild zeigt: ein Logo, eine Unterschrift oder eine Strichzeichnung. Das Werkzeug rechnet sofort und zeigt Original und SVG übereinander. Mit dem Schieber in der Mitte vergleichen Sie beide; ziehen Sie ihn nach links, sehen Sie mehr von der Vektorgrafik.
Passen die Kanten nicht, ändern Sie die Farbzahl oder die Glättung. Jede Änderung wird nach einem kurzen Moment neu berechnet. Ist das Ergebnis gut, laden Sie die SVG herunter oder kopieren Sie den Code direkt in eine Webseite.
Ein Beispiel ist vorbelegt: ein Logo mit 512 × 512 Pixeln, dunkelblauem Ring und magentafarbenem Dreieck auf Weiß. Mit 2 Farben und transparentem Hintergrund entsteht eine SVG mit genau zwei Pfaden, je einer pro Farbe, und ohne weiße Fläche.
So rechnet das Werkzeug
Ein Rasterbild besteht aus Pixeln, eine SVG aus Formen. Die Umwandlung läuft in drei Stufen.
- Farben reduzieren. Im Modus Logo sucht ein k-Means-Verfahren die gewählte Zahl typischer Farben, plus eine für den Hintergrund. Jeder Pixel bekommt die nächstliegende Farbe. Im Modus Unterschrift und Strichzeichnung trennt eine Helligkeitsschwelle Tinte und Papier. Die Schwelle bestimmt das Verfahren von Otsu automatisch aus dem Helligkeitshistogramm; Sie können sie auch von Hand verschieben.
- Konturen verfolgen. Für jede Farbe läuft die gemeinfreie Bibliothek ImageTracer.js die Ränder der Flächen ab und ersetzt sie durch Geraden und quadratische Kurven. Die Glättung legt fest, wie weit eine Kurve von den Pixelkanten abweichen darf (0,5 bis 5 Pixel) und wie kleine Flecken als Rauschen wegfallen.
- SVG schreiben. Je Farbe entsteht ein einziger Pfad. Der Hintergrund ist die häufigste Farbe am Bildrand und wird auf Wunsch weggelassen. Die Datei folgt SVG 1.1 und behält die Pixelmaße des Originals als Breite und Höhe.
Kleine Bilder unter 600 Pixel Kantenlänge rechnet das Werkzeug vorher hoch, höchstens auf das Vierfache. Die Kurven werden dadurch runder. Bilder über 1.600 Pixel werden verkleinert, damit die Berechnung auf dem Handy nicht zu lange dauert.
Wofür es gut ist
Ein Logo als SVG bleibt in jeder Größe scharf, auf der Visitenkarte wie auf dem Messestand. Druckereien und Schilderhersteller verlangen deshalb oft Vektordaten. Weitere Einsätze:
- Schneideplotter (Cricut, Silhouette, Brother): eine Farbe, Hintergrund aus, mittlere Glättung.
- Lasergravur (LightBurn, xTool): Strichzeichnung mit wenig Glättung, damit feine Linien erhalten bleiben.
- Stickerei: wenige Farben, denn jede Farbe ist später ein Garnwechsel.
- Webseiten: Eine SVG ist für einfache Logos meist kleiner als ein PNG in Retina-Auflösung.
- Unterschrift: als Vektor im PDF oder in der E-Mail-Signatur, ohne grauen Papierrand.
Typische Fehler
- Schmale Ränder an Kanten: Die Farbzahl ist zu hoch. Die Mischfarben der Kantenglättung bekommen dann eine eigene Fläche. Eine Farbe weniger behebt das meist.
- Ähnliche Farben verschmelzen: Die Farbzahl ist zu niedrig. Erhöhen Sie sie um eins.
- Unterschrift löchrig: Die Schwelle ist zu niedrig. Schieben Sie sie nach rechts, dann zählen auch hellere Striche als Tinte.
- Grauer Schatten im Unterschrift-Foto: Fotografieren Sie bei Tageslicht ohne Blitz und schneiden Sie das Foto knapp zu. Für eine freigestellte PNG gibt es Unterschrift freistellen.
- Eckige Rundungen: Das Bild ist sehr klein oder stark komprimiert. Ein größeres Original oder mehr Glättung hilft; vorher hochrechnen geht mit Bild hochskalieren.
Grenzen bei Fotos
Ein Foto hat weiche Verläufe, Rauschen und feine Strukturen. Mit 16 Farben entsteht daraus ein Bild im Plakatstil, das je nach Motiv mehrere Megabyte groß wird. Das ist als Effekt brauchbar, ersetzt aber kein Foto. Farbverläufe übernimmt das Werkzeug nicht; jede Fläche ist einfarbig. Auch Schrift wird nicht als Text erkannt, sondern als Form nachgezeichnet. Wer den Text ändern will, muss ihn im Grafikprogramm neu setzen.
SVG weiterverwenden
Die Datei öffnen Sie in Inkscape (kostenlos), Adobe Illustrator, Affinity Designer oder direkt im Browser. In Word und PowerPoint fügen Sie sie über Einfügen › Bilder ein. Brauchen Sie wieder ein Pixelbild in fester Größe, etwa als Favicon, wandeln Sie die SVG mit SVG in PNG zurück. Ein Foto mit störendem Hintergrund stellen Sie mit Hintergrund entfernen frei.