Kostenloses Werkzeug im Browser
Bild vektorisieren: PNG oder JPG in eine SVG-Vektorgrafik umwandeln
Legen Sie ein PNG oder JPG ab, und dieser Konverter von Raster zu Vektor zeichnet es direkt auf dieser Seite als SVG nach – nichts wird irgendwohin hochgeladen. Er reduziert das Bild auf flächige Farben, folgt der Grenze jeder Fläche jeder Farbe und schreibt pro Farbe einen Pfad. Genau das brauchen ein Logo, eine Strichzeichnung, ein Diagramm oder eine eingescannte Abbildung. Für ein Foto ist das Werkzeug nicht gedacht, und der Text unten sagt offen, warum.
Beispiel wird gezeichnet …
Eingebautes Beispiel: ein Balkendiagramm, das nur als PNG existiert
Polygone, ein Pfad pro Farbe. Das Schachbrettmuster scheint überall dort durch, wo nichts gemalt wurde.
PNG, JPG, WebP, GIF oder BMP hier ablegen
Die Datei wird von Ihrem Browser dekodiert und auf dieser Seite nachgezeichnet. Sie wird nie hochgeladen, es gibt also keine Größengrenze außer der, die Ihr eigener Rechner setzt.
Genug Farben für die Datenreihen, enge Toleranz, damit die Achsen gerade bleiben, Hintergrund bleibt erhalten.
Größere Bilder werden vor dem Nachzeichnen hierauf heruntergerechnet, und genau das hält die Seite flüssig. Danach ist das SVG auflösungsunabhängig, eine größere Arbeitsgröße kauft also Genauigkeit der Grenzen und nicht Ausgabegröße – bezahlt wird mit Punkten.
Das Bild wird per Median Cut auf so viele flächige Farben reduziert, und jede wird ein Pfad. Zwei Farben ergeben eine Silhouette; acht genügen meist für ein Diagramm.
Wie weit sich eine Kontur von der Pixelgrenze entfernen darf, wenn Punkte wegfallen. Bei 0 bekommen Sie die exakte Treppe; bei 1 px sind gerade Kanten sauber und Kurven noch glatt.
Flächen und Löcher, die kleiner sind als das, werden verworfen – JPEG-Blockartefakte, Scannerstaub und einzelne verirrte Pixel. Bei dieser Einstellung wurden 123 Flächen verworfen.
#fcfcfa5 Ringe, 450 Punkte#0072b24 Ringe, 156 Punkte#d55e002 Ringe, 12 Punkte#3341552 Ringe, 466 Punkte#009e732 Ringe, 240 Punkte
So sieht das Nachzeichnen in flächigen Farben aus
Eingescannte Strichzeichnung
Zwei Farben, weißer Hintergrund entfernt, Mindestfläche groß genug, um die Papierkörnung fallen zu lassen. Ein Scan hat entlang jedes Strichs tausende fast graue Pixel; erst die Reduktion auf zwei flächige Farben macht aus dem Strich eine Form.
Ein Diagramm, das Sie nur als PNG haben
Der häufigste Grund, hier zu landen: Die Abbildung steckt in einer Präsentation oder in einem alten Paper, und das Skript dazu ist verschwunden. Acht Farben decken die Datenreihen und die Achsen ab, und eine enge Toleranz hält die Achsenlinien gerade.
Zwei Farben gegen acht
Mehr Farben sind nicht besser. Bei zwei ist das Logo eine klare Silhouette; bei acht wird die weiche Schattierung zu vier sichtbaren Bändern, denn ein Nachzeichnen in flächigen Farben kann keinen Farbverlauf abbilden und posterisiert ihn stattdessen.
Warum eine Vektorgrafik skaliert
Dieselbe Ecke in achtfacher Vergrößerung. Das Rasterbild hat außer seinem eigenen Pixelraster nichts mehr zu zeigen; das SVG zeichnet die Kante in jeder Größe neu, die die Druckerei oder das Journal verlangt.
Löcher, die wirklich Löcher sind
Eine äußere Grenze und das Loch darin werden als zwei Ringe mit entgegengesetzter Umlaufrichtung nachgezeichnet, und der Pfad wird mit fill-rule evenodd geschrieben. Die Mitte eines O, eines Kreisrings oder eines Ringdiagramms bleibt leer, statt übermalt zu werden.
Was ein Foto daraus macht
Gezeigt, weil alle danach fragen. In einem Foto gibt es keine flächigen Bereiche zu finden, also erfindet die Nachzeichnung sie: tausende Flecken, eine Datei von mehreren Megabyte und ein Bild, das in jeder Größe schlechter aussieht als das Original.
So wandeln Sie ein Bild in eine Vektorgrafik um
Die ganze Umwandlung läuft in der Seite ab. Es gibt keine Warteschlange, kein Konto und keinen Upload-Schritt; die einzige Grenze ist, was Ihr eigener Browser dekodieren kann.
- Legen Sie ein PNG, JPG, WebP, GIF oder BMP auf das Feld, oder wählen Sie eine Datei. Der Browser dekodiert sie und zeichnet sie auf ein Canvas, neu abgetastet, sodass die längste Seite in die gewählte Arbeitsgröße passt.
- Legen Sie die Anzahl der Farben fest. Das ist die wichtigste Entscheidung: Das Bild wird auf so viele flächige Farben reduziert, und jede davon wird im SVG zu einem einzigen Pfad.
- Erhöhen Sie die Vereinfachungstoleranz, bis die Konturen keine Treppenstufen mehr zeigen. Etwa 1 Pixel passt für die meisten Grafiken; 0 behält die exakte Pixelgrenze.
- Erhöhen Sie die Mindestfläche, bis die Sprenkel verschwinden. Scannerstaub, JPEG-Blockartefakte und einzelne verirrte Pixel würden sonst jeweils zu einem eigenen kleinen Polygon.
- Schalten Sie das Entfernen des weißen Hintergrunds ein, wenn die Grafik auf dem liegen soll, was dahinter ist, und nicht auf einem weißen Rechteck. Gebrochen weißes Scanpapier zählt als weiß.
- Prüfen Sie die Punktzahl. Sie ist das ehrliche Maß dafür, wie schwer die Datei ist; laden Sie das SVG herunter, wenn der Wert zur sichtbaren Detailmenge passt.
Was das Nachzeichnen tatsächlich tut
Lohnt sich genau zu sagen, denn „vektorisieren“ wird locker verwendet, und das Ergebnis ist nur so gut wie das, was tatsächlich passiert. Vier Schritte, alle in Ihrem Browser.
- Farbquantisierung per Median Cut. Die Pixel landen in einem Farbhistogramm mit 32.768 Fächern, das immer wieder geteilt wird, bis es so viele Boxen gibt, wie Sie Farben verlangt haben; jede Box wird zu einer Palettenfarbe – dem echten Mittelwert der Pixel darin. Geteilt wird jeweils die Box mit dem größten Produkt aus Pixelzahl und Farbausdehnung, nicht die mit der größten Pixelzahl allein, damit die weite Fläche fast weißen Papiers eines Scans nicht die ganze Palette verschlingt.
- Eine binäre Maske pro Farbe, dann die Grenzverfolgung. Der Tracer läuft entlang der Fugen zwischen einem gefüllten Pixel und einem leeren Nachbarn, was den exakten achsenparallelen Umriss der Fläche ergibt und nicht eine um ein halbes Pixel nach innen versetzte Kontur. Zwei Flächen, die sich nur an einer Ecke berühren, ergeben zwei Formen und nicht eine eingeschnürte Acht.
- Löcher werden als eigene Ringe mit entgegengesetzter Umlaufrichtung nachgezeichnet, und jeder Pfad wird mit fill-rule evenodd geschrieben, sodass das Loch wirklich leer ist. Das Innere eines O bleibt offen.
- Vereinfachung nach Ramer-Douglas-Peucker, mit der von Ihnen gesetzten Toleranz. Jeder Punkt in der Ausgabe ist ein Punkt, der auf der Pixelgrenze lag – nichts wird interpoliert.
- Die Ausgabe besteht aus Polygonen. Dieses Werkzeug fittet keine Bézier-Kurven, ein nachgezeichneter Kreis ist also ein vielseitiges Polygon und kein Bogen. Bei einer sinnvollen Toleranz sehen Sie den Unterschied weder am Bildschirm noch im Druck, aber wenn Sie das SVG in einem Editor öffnen, finden Sie Liniensegmente – und das sollten Sie wissen, bevor Sie jemandem eine Kurve versprechen.
Was sich gut vektorisieren lässt und was nicht
Das Nachzeichnen von Raster zu Vektor findet Flächen einer Farbe. Alles dazu, welche Bilder funktionieren, folgt aus diesem einen Satz.
- Funktioniert gut: Logos und Wortmarken, Tuschezeichnungen, eingescannte Diagramme und Abbildungen, Flussdiagramme, Karten, Screenshots von Plots, Balken- und Liniendiagramme, Icons, Stempel und Siegel, schraffierte technische Zeichnungen. Das alles sind flächige Bereiche mit klaren Kanten.
- Funktioniert mit Vorsicht: kantengeglättete Screenshots und Text. Die weichen Pixel entlang jeder Kante werden der nächstgelegenen flächigen Farbe zugeordnet, was einen dünnen Saum hinterlassen kann. Mehr Farben geben dem Saum eine eigene Ebene; weniger Farben schlucken ihn. Kleine Schrift wird lesbar nachgezeichnet, aber als Umrisse und nicht als bearbeitbare Buchstaben.
- Funktioniert nicht: Fotos. Ein Foto hat kontinuierliche Tonwerte – es gibt keine flächigen Bereiche zu finden – , also muss die Nachzeichnung sie erfinden, und heraus kommt eine posterisierte Fleckenkarte mit tausenden Flächen und eine Datei, die größer ist als das JPG, aus dem sie stammt. Keine Einstellung behebt das, denn das Problem ist das Bild und nicht die Parameter.
- Funktioniert nicht: Farbverläufe, weiche Schatten, Unschärfe, Leuchteffekte und halbtransparente Überlagerungen. Jedes davon wird zu sichtbaren Bändern. Hat das Original einen Verlauf, bleiben zwei ehrliche Wege: mit zwei Farben nachzeichnen und den Verlauf selbst im Editor neu anlegen, oder die Quelldatei suchen.
- Schon Vektor: Kommt die Abbildung aus einer Plot-Bibliothek, einem CAD-Programm oder einem Zeichenprogramm, suchen Sie zuerst das originale SVG, PDF oder EPS. Das Nachzeichnen eines PNG-Exports einer Vektordatei verliert immer etwas – exakte Koordinaten, Gruppierungen, Text als Text.
Die vier Regler und was jeder davon kostet
Jeder Regler hier gibt eine Sache auf, um eine andere zu bekommen. Zu wissen, in welche Richtung er kostet, ist schneller als Raten.
- Farben, 2 bis 16. Zu wenige, und verschiedene Teile des Bildes verschmelzen zu einer Form. Zu viele, und die Kantenglättung entlang jeder Kante bekommt eine eigene Ebene, was die Zahl der Pfade vervielfacht, ohne etwas Sichtbares hinzuzufügen. Zählen Sie die flächigen Farben, die Sie im Bild wirklich benennen können, und fangen Sie dort an.
- Vereinfachungstoleranz, in Pixeln. Bei 0 folgt die Kontur exakt dem Pixelraster und sieht vergrößert wie eine Treppe aus. Höhere Werte fassen die Treppe zu geraden Strecken zusammen, noch höhere schneiden Ecken von echtem Detail ab. Dünne Elemente verschwinden zuerst – wenn ein Strich fehlt, liegt es daran.
- Mindestfläche, in Quadratpixeln. Verwirft Flächen und Löcher, die kleiner als der Schwellwert sind. Ein Scan braucht meist 20 oder mehr, ein sauberer Export fast nichts. Ein Loch kann nur kleiner sein als die Fläche um es herum, deshalb bleibt beim Erhöhen nie ein Loch in einer verworfenen Form zurück.
- Entfernen des weißen Hintergrunds. Verwirft jede Ebene, deren Farbe nahezu weiß ist, statt sie zu malen. Nützlich, um eine Strichzeichnung über eine farbige Folie zu legen; nicht das, was Sie wollen, wenn das Weiß zur Grafik gehört, zum Beispiel das Weiß eines Auges oder Lücken in einer Abbildung, die deckend bleiben sollen.
- Arbeitsgröße. Größer heißt, die Grenze wird an mehr Pixeln gemessen, die Nachzeichnung ist also treuer und hat mehr Punkte. Sie ändert nicht, wie groß das SVG gezeichnet werden kann – eine Vektorgrafik hat keine Auflösung – , erhöhen Sie sie also für Genauigkeit, nicht für die Ausgabegröße.
Nach dem Download
Ein SVG ist eine Textdatei voller Koordinaten; genau deshalb ist es mehr wert als ein größeres PNG.
- Sie skaliert unbegrenzt. Dieselbe Datei druckt in einer 90 mm breiten Journalspalte und auf einem A0-Poster ohne Pixeltreppen und ohne Neuberechnung – der übliche Grund, warum ein Verlag Vektorgrafiken verlangt.
- Jede Farbe ist ein Pfad, das Umfärben einer Ebene in Illustrator, Inkscape, Affinity oder Figma ist also ein einzelner Klick. Die Ebenen werden größte zuerst geschrieben, der Hintergrund steht also oben in der Datei.
- Sie lässt sich als Geometrie bearbeiten. Sie können eine Fläche löschen, einen Punkt verschieben oder zwei Formen vereinen. Was nicht geht, ist Text bearbeiten, denn nachgezeichnete Schrift besteht aus Umrissen – müssen die Beschriftungen geändert werden, beschriften Sie die Abbildung neu statt die Nachzeichnung.
- Sie lässt sich direkt einbetten. LaTeX nimmt sie über svg oder nach einer Umwandlung in PDF, PowerPoint und Word importieren sie als Formen, und ein Browser stellt sie inline ohne zusätzliche Anfrage dar.
- Sie lässt sich diffen und versionieren. Weil sie Text ist, können zwei Nachzeichnungen derselben Abbildung Zeile für Zeile verglichen werden – bei einem binären PNG geht das nicht.
Häufige Fragen
Ist dieser Konverter von Bild zu SVG kostenlos?
Ja, und es gibt nichts, wofür Sie sich anmelden müssten. Das Nachzeichnen läuft in Ihrem Browser, es kostet keine Credits, es gibt kein Wasserzeichen und keine Obergrenze dafür, wie viele Bilder Sie umwandeln. An der Seite ändert sich nichts, wenn Sie ein Konto haben.
Wie wandle ich ein PNG in SVG um?
Legen Sie das PNG auf das Feld auf dieser Seite, stellen Sie die gewünschte Zahl flächiger Farben ein, erhöhen Sie die Vereinfachungstoleranz, bis die Konturen sauber aussehen, erhöhen Sie die Mindestfläche, bis die Sprenkel weg sind, und laden Sie das SVG herunter. Für ein Logo oder eine Strichzeichnung sind das meist zwei bis vier Farben und eine Toleranz um 1 Pixel; für ein Diagramm acht Farben und eine engere Toleranz.
Wird mein Bild auf einen Server hochgeladen?
Nein. Der Browser dekodiert die Datei, zeichnet sie auf ein Canvas, und der Nachzeichen-Code in dieser Seite liest diese Pixel. Keine Netzwerkanfrage trägt Ihr Bild fort – das heißt auch, dass das Werkzeug offline funktioniert, sobald die Seite geladen ist, und dass vertrauliche oder unveröffentlichte Abbildungen Ihren Rechner nie verlassen.
Vektorisiert es ein Foto?
Nicht brauchbar, und das zu sagen ist besser, als es Sie selbst herausfinden zu lassen. Das Nachzeichnen findet Flächen einer einzigen flächigen Farbe, und ein Foto hat keine – die Tonwerte ändern sich kontinuierlich. Zurück kommt eine posterisierte Fleckenkarte: tausende winzige Flächen, eine Datei, die oft größer ist als das ursprüngliche JPG, und ein Bild, das in jeder Größe schlechter aussieht. Wenn Sie ein Foto als Strichzeichnung brauchen, ist das eine Illustrationsaufgabe und keine Umwandlung.
Fittet es Kurven, oder besteht die Ausgabe aus Polygonen?
Polygone. Die Konturen entstehen aus der echten Pixelgrenze und werden mit Ramer-Douglas-Peucker ausgedünnt, jeder Punkt im SVG lag also auf dieser Grenze, und nichts wird zu einem Bogen interpoliert. Bei einer Toleranz um 1 Pixel wirkt ein nachgezeichneter Kreis glatt, er ist aber ein vielseitiges Polygon, und ein Editor zeigt Ihnen Liniensegmente statt Bézier-Anfasser.
Warum sieht mein nachgezeichnetes SVG ausgefranst aus?
Entweder liegt die Toleranz bei oder nahe 0, was die Pixeltreppe genau so lässt, wie sie ist, oder die Arbeitsgröße ist klein gegenüber dem Detail. Erhöhen Sie zuerst die Toleranz auf etwa 1 Pixel – das fasst die Treppe zu geraden Strecken zusammen. Ist die Grafik feingliedrig, erhöhen Sie auch die Arbeitsgröße, damit die Grenze an mehr Pixeln gemessen wird, bevor sie vereinfacht wird.
Wie bekomme ich einen transparenten Hintergrund statt eines weißen Rechtecks?
Schalten Sie das Entfernen des weißen Hintergrunds ein. Jede Ebene, deren quantisierte Farbe nahezu weiß ist, wird verworfen statt gemalt, das SVG hat dort also keine Füllung, wo das Papier war, und was dahinter liegt, scheint durch. Gebrochen weißes Scanpapier wird als weiß behandelt. Lassen Sie die Option aus, wenn das Weiß zur Grafik gehört.
Was ist der Unterschied zwischen einem Rasterbild und einer Vektorgrafik?
Ein Rasterbild – PNG, JPG, GIF, WebP – ist ein festes Pixelraster, Vergrößern macht also nur die Pixel größer. Eine Vektorgrafik – SVG, EPS, PDF-Grafik – speichert Formen als Koordinaten und wird in jeder gewünschten Größe neu gezeichnet; deshalb verlangen Verlage und Druckereien sie. Raster in Vektor umwandeln heißt, Formen aus Pixeln zurückzugewinnen, und das geht nur dort, wo die Pixel klar abgegrenzte flächige Bereiche bilden.
Verwandte Werkzeuge
DPI-Prüfung für Bilder
Prüfen Sie vor der Einreichung, ob eine Abbildung die Pixel hat, die eine Journalspalte verlangt.
Journal-Vorgaben für Abbildungen
Spaltenbreiten, Auflösung und Dateiformate der großen Verlage, mit offiziellen Quellen.
Bearbeitbarer SVG- und PPTX-Export
Holen Sie Abbildungen als bearbeitbare Vektoren und Folien heraus, nicht als flache Bilder.
Farbenblindheit simulieren
Sehen Sie eine Abbildung so, wie Protanopie, Deuteranopie oder Tritanopie sie sieht.
Die Abbildung muss neu gezeichnet werden, nicht umgewandelt?
Ist das Original ein Foto, ein Farbverlauf oder eine Abbildung, deren Quelldatei Sie nicht mehr haben, zeichnet SciFigure AI aus einer Beschreibung eine saubere, beschriftete Abbildung, statt eine Bitmap nachzuzeichnen.
Wissenschaftliches Diagramm erstellenZuletzt geprüft: 1. Oktober 2026. Quellen: W3C SVG 2: die Eigenschaft fill-rule; Heckbert, Color image quantization for frame buffer display (median cut, SIGGRAPH 1982); Douglas & Peucker, Algorithms for the reduction of the number of points required to represent a digitized line (1973); MDN, CanvasRenderingContext2D.getImageData.