Bild in SVG umwandeln — PNG/JPG vektorisieren
Rastergrafiken in SVG-Vektoren nachzeichnen, mit Reglern für Farben und Details
Verarbeitung im Browser · kein Hochladen
Das Bild wird auf wenige Farben reduziert, und die Umrisse jeder Farbfläche werden mit Linien und Kurven nachgezeichnet. Das klappt gut bei Logos, Symbolen, Schriftzügen und einfachen Zeichnungen. Fotos wirken posterartig und die Datei kann sehr groß werden; Verläufe und weiche Kanten lassen sich nicht unverändert übernehmen.
Bild zur Umwandlung in SVG hierher ziehen
Ein JPG, PNG, WebP, GIF oder BMP (bis 50 MB). Einfügen mit Strg+V (⌘V auf dem Mac) geht auch. Es wird nichts hochgeladen.
Die Höchstzahl an Farben im SVG. Für Logos 2–8, für Illustrationen 16 oder mehr.
Höhere Werte folgen den Umrissen genauer und behalten kleine Flecken, ergeben aber größere Dateien und dauern länger. 1 ist einfach, 5 am nächsten am Original.
Was macht das Tool?
Es wandelt eine Rastergrafik (PNG, JPG, WebP, GIF oder BMP) in einen SVG-Vektor um. Rastergrafiken sind Pixelraster und werden beim Vergrößern klotzig; SVG speichert Linien und Kurven und bleibt in jeder Größe scharf. Das hilft, wenn die Original-Logodatei verloren ist und nur ein kleines PNG übrig blieb, wenn Sie ein Symbol für eine Website brauchen oder einen Vektor zum Lasern, Sticken oder für Aufkleber.
Kennen Sie vorher die Grenzen. Das Bild wird auf eine Handvoll Farben reduziert und der Umriss jeder Farbfläche nachgezeichnet, Verläufe, weiche Kanten und fotografische Strukturen lassen sich also nicht unverändert übernehmen. Je flächiger die Grafik, desto sauberer das Ergebnis.
So geht’s
- Legen Sie ein Bild ab oder klicken Sie auf Bild auswählen. Einfügen mit Strg+V funktioniert auch.
- Stellen Sie die Farben ein: 2 für ein Schwarz-Weiß-Logo, 4–8 für ein Logo mit wenigen Farben, 16 oder mehr für Illustrationen.
- Wählen Sie den Detailgrad von 1 bis 5. Höhere Werte folgen den Umrissen genauer.
- Vergleichen Sie die Vorschau mit dem Original und klicken Sie auf SVG speichern oder kopieren Sie den Code.
So funktioniert es
- Farbreduktion: Jedes Pixel wird einer von mehreren aus dem Bild entnommenen Palettenfarben zugeordnet, verfeinert in drei Durchgängen. Dasselbe Bild mit denselben Einstellungen ergibt immer dasselbe SVG.
- Nachzeichnen: Die Kanten der Farbflächen werden mit Geraden und quadratischen Kurven angenähert. Detailgrad 1 erlaubt 4 px Abweichung und verwirft Formen unter 32 Umrisspunkten; Detailgrad 5 folgt auf 0,25 px genau und behält kleine Flecken.
- Analysegröße: Aus Geschwindigkeitsgründen wird die lange Seite bei Detailgrad 1 auf 300 px, bei 3 auf 700 px und bei 5 auf 1400 px verkleinert, und die Koordinaten werden auf die Originalgröße zurückgerechnet.
- Aufräumen: Formen in vollständig transparenten Farben werden entfernt, Originalbreite, -höhe und eine viewBox werden gesetzt.
- Zum Nachzeichnen dient imagetracerjs (Public Domain).
Beispiele
| Original | Einstellungen | Ergebnis |
|---|---|---|
| Schwarzes Schriftzug-Logo als PNG, 800×300 | 2 Farben, Detailgrad 3 | Schwarzer Schriftzug auf Weiß, kleine Datei |
| Vierfarbiges Symbol als PNG, 512×512 | 4 Farben, Detailgrad 4 | 4 Farben, glatte Kurven |
| Landschaftsfoto als JPG, 4000×3000 | 16 Farben, Detailgrad 2 | Posteroptik, viel größere Datei als bei einem Logo |
Um einen Vektor wieder in ein PNG zu verwandeln, nutzen Sie SVG in PNG; für einen Satz Website-Symbole probieren Sie den Favicon-Generator.
Häufige Fragen
Kann ich ein Foto in SVG umwandeln?
Ja, aber es besteht dann aus wenigen flachen Farbflächen wie ein Poster, und bei hohem Detailgrad kann die Datei mehrere Megabyte groß werden. Fotos bleiben besser JPG oder WebP; das Tool eignet sich für Logos, Symbole, Schriftzüge und einfache Zeichnungen.
Im Ergebnis sind viele kleine Flecken.
Senken Sie den Detailgrad, damit kleine Flecken wegfallen, und verringern Sie die Farbanzahl, damit ähnliche Farben verschmelzen. Ist das Original ein verrauschtes JPG, helfen meist 2–8 Farben am meisten.
Bleibt ein transparenter Hintergrund erhalten?
Ja. Vollständig transparente Bereiche erzeugen keine Formen und bleiben im SVG leer. Halbtransparente Bereiche erhalten die Deckkraft der Farbe.
Welche Größe hat das gespeicherte SVG?
Es hat die Pixelbreite und -höhe des Originalbildes plus eine viewBox und lässt sich daher im Web oder in einem Designprogramm sauber auf jede Größe skalieren.
Wird mein Bild hochgeladen?
Nein. Analyse und Nachzeichnen laufen beide in Ihrem Browser.
