Bild in SVG umwandeln: PNG und JPG vektorisieren

Fotos und die meisten Bilder im Web sind Rastergrafiken: Raster aus farbigen Pixeln. Vergrößert man sie, wachsen die Pixel mit, und Kanten werden gezackt oder unscharf. Vektorgrafiken wie SVG beschreiben Formen stattdessen mit mathematischen Pfaden und Füllungen und bleiben daher in jeder Größe perfekt scharf – vom Favicon bis zur Plakatwand.

Ein Rasterbild in einen Vektor umzuwandeln, nennt man Vektorisieren oder Nachzeichnen. Die Software findet Bereiche ähnlicher Farbe, folgt ihren Umrissen und ersetzt sie durch glatte Kurven. Am besten funktioniert das bei Bildern aus Farbflächen mit klaren Kanten.

Was wann passt

Raster vs. Vektor in einem Satz: Raster ist am besten für Fotos mit endlosen feinen Details, Vektor für Logos, Icons, Text und Illustrationen mit klaren Formen. Ein vektorisiertes Foto kann künstlerisch wirken, wird aber nie so originalgetreu sein wie die ursprünglichen Pixel.

Fügen Sie ein Bild hinzu, indem Sie es in das Feld ziehen, auswählen oder aus der Zwischenablage einfügen. Wählen Sie eine Voreinstellung, passen Sie bei Bedarf die Farbanzahl an und klicken Sie auf „In SVG umwandeln“. Das Tool reduziert das Bild auf die gewählte Anzahl Farben, findet den Umriss jedes Farbbereichs und schreibt ihn als SVG-Pfad. Ein Regler lässt Sie dann Original und Vektor nebeneinander vergleichen.

Unter dem Vergleich sehen Sie die Anzahl der Pfade, die Größe der SVG-Datei und wie lange die Vektorisierung gedauert hat. Laden Sie die Datei herunter oder kopieren Sie den Code, um ihn direkt in HTML oder ein Design-Tool einzufügen.

Logos

PNG in SVG ist die häufigste Aufgabe, weil Logos oft nur als PNG-Dateien vorliegen. Nutzen Sie die Voreinstellung „Logo“ mit so vielen Farben, wie das Logo wirklich hat, meist zwei bis acht. Aktivieren Sie „Hintergrundfarbe entfernen“, wenn das Logo auf einem schlichten Hintergrund sitzt und Sie einen transparenten Vektor möchten.

Skizzen und Line Art

Um Line Art in Vektoren umzuwandeln – etwa Skizzen, Unterschriften, Stempel und gescannte Zeichnungen –, wählen Sie „Schwarz-Weiß“. Verschieben Sie den Schwellenwert, bis dünne Linien vollständig sind, die Papierstruktur aber verschwindet. Das Ergebnis ist ein sauberes zweifarbiges SVG, ideal für Schneideplotter und Gravur.

Detailliert und weich

„Detailliert“ bewahrt kleine Merkmale und feine Kurven – passend für Illustrationen und komplexe Abzeichen, aber mit größeren Dateien. „Weiche Illustration“ glättet Rauschen vor dem Vektorisieren und ergibt fließende Formen – passend für handgezeichnete Illustrationen und gescannte Grafiken mit Körnung.

Posterisiert und Graustufen

„Posterisiert“ reduziert das Bild auf wenige kräftige Farbflächen für einen grafischen Siebdruck-Look. „Graustufen“ entfernt zuerst die Farbe – nützlich für einfarbigen Druck und um Fotos in einen künstlerischen, monochromen Vektor zu verwandeln.

Beginnen Sie mit der größten und schärfsten Version des Bildes, die Sie haben. Kompressionsartefakte und Unschärfe werden in der Vektorisierung zu zusätzlichen Formen. Ist Ihre Vorlage klein oder weich, kann unser KI-Hochskalierer sie zuerst vergrößern und schärfen – eine sauberere Vorlage ergibt einen deutlich besseren Vektor.

Nutzen Sie so wenige Farben wie möglich, solange es noch richtig aussieht. Jede zusätzliche Farbe bringt Pfade und Dateigröße. Für ein zweifarbiges Logo stellen Sie zwei oder drei Farben ein, für eine flächige Illustration reichen meist acht bis sechzehn. Die Einstellung „Detail“ steuert die Arbeitsgröße: 1000 Pixel sind ein guter Kompromiss, 2000 Pixel erfassen mehr Details auf Kosten der Geschwindigkeit.

Komprimierte Fotos

JPG in SVG funktioniert genauso, aber die JPEG-Kompression erzeugt Rauschen an Kanten. Die Voreinstellung „Weich“ oder eine etwas geringere Farbanzahl verbirgt dieses Rauschen und ergibt sauberere Formen.

SVG-Dateien öffnen sich in Illustrator, Inkscape, Figma, Affinity Designer, Canva und den meisten Programmen für Schneideplotter. Auf einer Website können Sie die Datei in einem img-Tag nutzen oder den Code direkt in Ihr HTML einfügen, wo er sich mit CSS gestalten lässt. Für Favicons und App-Icons akzeptiert unser Favicon-Generator SVG und erstellt jede benötigte Größe.

Brauchen Sie wieder eine Pixelversion, etwa für ein Social-Media-Profil, rendert unser SVG-in-PNG-Konverter den Vektor in jeder Größe, mit oder ohne Transparenz.

Schneideplotter

Für SVG-Dateien für Cricut und andere Schneideplotter nutzen Sie „Schwarz-Weiß“ oder „Logo“ mit wenigen Farben und entfernen den Hintergrund. Wenige, größere Formen schneiden sauberer als viele winzige – senken Sie also die Detailgröße, wenn die Vektorisierung viele Sprenkel enthält.

Die Vektorisierung läuft komplett in Ihrem Browser, unveröffentlichte Logos und Kundengrafiken verlassen Ihr Gerät also nie. Große, detailreiche Fotos können einige Sekunden dauern und große Dateien erzeugen; das Tool warnt Sie, wenn das SVG 1 MB überschreitet.

Automatisches Vektorisieren ist nicht dasselbe wie von Hand gezeichnete Vektorarbeit. Für ein Markenlogo mit perfekter Geometrie nutzen Sie die Vektorisierung als Ausgangspunkt und verfeinern sie in einem Vektorprogramm. Das Tool ist kostenlos, unbegrenzt, fügt kein Wasserzeichen hinzu und verbraucht keine EnhancerPro-Credits.

Warum hat mein SVG so viele Formen?

Rauschen, Verläufe und Schattierungen erzeugen viele kleine Bereiche mit leicht unterschiedlicher Farbe. Senken Sie die Farbanzahl, wählen Sie „Weich“ oder „Posterisiert“ oder verringern Sie die Detailgröße. Auch das Entfernen des Hintergrunds reduziert die Anzahl der Pfade spürbar.

Kann ich Text vektorisieren?

Ja, Text in einem Logo wird zu Formen, ist danach aber kein bearbeitbarer Text mehr. Kennen Sie die Schrift, liefert das erneute Eintippen in einem Vektorprogramm das sauberste Ergebnis.

Stimmen die Farben exakt?

Das Tool wählt repräsentative Farben aus dem Bild, sie können also minimal von Ihren Markencodes abweichen. Lesen Sie mit unserem Farbwähler die exakten Codes aus dem Original und passen Sie die Füllungen in einem Vektorprogramm an, wenn es auf Präzision ankommt.

Ein altes Logo von einer Website

Viele kleine Unternehmen haben ihr Logo nur als kleines Bild von einer alten Website. Skalieren Sie es zuerst hoch, wenn es winzig ist, und vektorisieren Sie es dann mit der Voreinstellung „Logo“ und der tatsächlichen Farbanzahl. Das resultierende SVG lässt sich in jeder Größe auf Schilder, Shirts und Fahrzeuge drucken – mit den ursprünglichen Pixeln war das unmöglich.

Eine Handskizze

Zeichnen Sie mit einem dunklen Stift auf weißes Papier, fotografieren Sie bei Tageslicht und schneiden Sie eng zu. Der Schwarz-Weiß-Modus mit sorgfältig gesetztem Schwellenwert verwandelt die Zeichnung in saubere Formen, die Sie in einem Vektorprogramm einfärben, für Sticker nutzen oder mit einem Folienplotter schneiden können.

Icons für eine App oder Website

Einfache Icons lassen sich sehr gut vektorisieren. Halten Sie die Farbanzahl niedrig, entfernen Sie den Hintergrund und fügen Sie den Code direkt in Ihre Seite ein. Weil das SVG ohne Unschärfe skaliert, sieht dieselbe Datei auf jeder Bildschirmdichte scharf aus.

Unterschriften und Stempel

Gescannte Unterschriften und Stempel werden im Schwarz-Weiß-Modus zu kleinen, transparenten SVGs. Sie lassen sich in jeder Größe auf Dokumenten platzieren und ohne die grauen, unscharfen Ränder eines fotografierten Originals drucken.

Poster aus Fotos

Für einen künstlerischen Effekt vektorisieren Sie ein Foto mit „Posterisiert“ und vier bis sechs Farben. Das Ergebnis ist eine kräftige, flächige Illustration, die zu Postern und Social-Media-Grafiken passt und sich sauber für große Drucke skalieren lässt. Probieren Sie verschiedene Farbanzahlen, bis das Motiv noch erkennbar ist, die Formen aber einfach bleiben. Graustufen mit wenigen Tönen ergeben einen klassischen Schablonen-Look, der sich einfarbig gut auf Papier oder Stoff drucken lässt.

Sind Sie mit einer vektorisierten Datei zufrieden, behalten Sie das Rasteroriginal daneben. Wünscht ein Kunde später einen etwas anderen Ausschnitt oder eine andere Farbe, vektorisieren Sie in Sekunden neu, statt Hunderte winziger Pfadpunkte von Hand zu bearbeiten. Klare Dateinamen wie logo-vorlage.png und logo-vektor.svg halten einen kleinen Designordner übersichtlich.