Von Claire Yoon6 Min. Lesezeit

So wandelst du WebP in SVG um (vektorisieren, nicht speichern)

Eine WebP-Datei ist ein Rasterbild, deshalb kannst du sie nicht einfach als SVG speichern. Du vektorisierst sie. So machst du aus WebP eine saubere, echte Vektordatei und vermeidest falsche SVGs.

Auf dieser Seite

Eine WebP-Datei ist ein Rasterbild, also ein Pixelraster wie JPG oder PNG. Deshalb gibt es kein "Speichern als SVG", das daraus eine Vektordatei macht. Das Bild muss zuerst in Formen und Pfade nachgezeichnet werden. Die meisten "WebP-zu-SVG-Konverter" gehen darüber hinweg, und manche verpacken deine Pixel einfach in einer .svg-Datei und nennen es erledigt. Das ergibt aber keine echte Vektordatei.

Hier erfährst du, wie du eine WebP-Datei tatsächlich in ein sauberes, bearbeitbares SVG umwandelst, worauf du achten solltest und wann du dir die Mühe sparen kannst.

Die Kurzfassung
  • Eine WebP-Datei ist ein Rasterbild und muss deshalb nachgezeichnet werden, statt als Vektor "gespeichert" zu werden.
  • Achte auf falsche Vektoren: Ein Konverter, der deine WebP-Datei in ein .svg einbettet, lässt sie weiter verpixeln.
  • WebP kann verlustbehaftet oder verlustfrei sein. Eine verlustbehaftete Datei enthält Kompressionsrauschen, starte also mit der saubersten Quelle.
  • Flächige, kontrastreiche Grafiken lassen sich gut umwandeln. Fotos nicht.
  • Vektorisiere sie mit dem WebP-zu-SVG-Konverter und prüfe danach, ob sie wirklich bearbeitbar ist.

Zuerst der Teil, den die meisten Konverter überspringen

Es lohnt sich, klar zu benennen, was tatsächlich passiert, denn die Top-Suchergebnisse tun das oft nicht:

  • Eine WebP-Datei speichert Pixel. Sie ist ideal fürs Web, weil die Dateien klein sind und Transparenz sowie Animationen unterstützt werden, aber sie bleibt ein Rasterbild.
  • Ein SVG speichert Mathematik: Punkte, Pfade und Kurven, die bei jeder Größe scharf bleiben.

Zwischen beiden gibt es keine verlustfreie "Konvertierung". Von WebP zu SVG zu gehen bedeutet, die Pixel als Formen neu zu zeichnen. Genau das ist Vektorisierung beziehungsweise Tracing. Deshalb braucht eine echte Umwandlung einen Tracer und keine bloße Dateiumbenennung.

Die Falle, die du vermeiden solltest: Viele generische Dateikonverter erzeugen ein SVG, das in Wirklichkeit nur deine WebP-Datei in einer .svg-Hülle einbettet. Die Erweiterung stimmt, aber beim Skalieren wird es weiter unscharf und du kannst keine einzelne Form bearbeiten. Wenn dein "SVG" beim Hineinzoomen verpixelt, ist genau das passiert. Du brauchst ein Tool, das das Bild in echte Pfade umwandelt.

Verlustbehaftet oder verlustfrei? Das verändert das Ergebnis

WebP gibt es in zwei Varianten, und welche du hast, beeinflusst die Vektorisierung:

  • Verlustbehaftetes WebP (der übliche Web-Export) komprimiert ähnlich wie JPG und bringt deshalb Artefakte sowie weiche, verrauschte Kanten mit. Ein Trace übernimmt diese Störungen, starte also mit der hochwertigsten Version, die du hast. (Dasselbe Problem gibt es beim Umwandeln von JPG in SVG.)
  • Verlustfreies WebP behält scharfe Kanten wie PNG und lässt sich dadurch sauber vektorisieren. (Sieh dir zum Arbeiten mit sauberen Quellen auch PNG ohne Qualitätsverlust in SVG umwandeln an.)

WebP unterstützt außerdem Transparenz. Wenn dein Bild einen transparenten Hintergrund hat, nutze also einen Konverter, der diese Transparenz erhält. Sonst bekommst du ein unerwünschtes gefülltes Rechteck hinter deinen Formen.

So wandelst du WebP Schritt für Schritt in SVG um

  1. Starte mit der besten Quelle. Verwende die originale WebP-Datei in der höchsten verfügbaren Qualität. Wenn sie stark verlustbehaftet komprimiert ist, musst du mit einem unruhigeren Trace rechnen.
  2. Nutze einen echten Vektorisierer statt eines generischen Dateikonverters. Du brauchst ein Tool, das das Bild in Pfade nachzeichnet, nicht eines, das das Rasterbild einbettet.
  3. Vektorisiere es. Zieh die WebP-Datei in den WebP-zu-SVG-Konverter und lass sie als saubere Pfade mit wenigen Knoten neu aufbauen.
  4. Vereinfache die Farben und behalte die Transparenz. Führe fast identische Farben zusammen, denn verlustbehaftetes WebP fügt oft ein paar hinzu, und achte darauf, dass ein transparenter Hintergrund transparent bleibt.
  5. Lade das Ergebnis herunter und prüfe es (siehe unten).

So sieht das mit PerfectVector aus

Das Ziel bei WebP ist eine echte Vektordatei: saubere Pfade, die du bearbeiten kannst, statt versteckter Pixel. Genau das erzeugt PerfectVector. Es zeichnet die WebP-Datei in glatte Pfade mit wenigen Knoten nach, erhält Transparenz und bietet dir einen Farbeditor, mit dem du die zusätzlichen Farben zusammenführen kannst, die ein verlustbehaftetes WebP einbringt. Du kannst WebP in ein sauberes SVG umwandeln, die Pfade selbst prüfen und deine ersten Bilder kostenlos konvertieren, ohne Kreditkarte.

Vorher
Ein verlustbehaftetes WebP eines einfachen Emblems mit weichen, verrauschten Kanten, als Rasterbild in ein SVG eingebettet, sodass es beim Vergrößern weiter verpixelt
Eine WebP-Datei in ein .svg verpackt: weiterhin Pixel und beim Skalieren weiterhin unscharf.
Nachher
Dasselbe Emblem, nachgezeichnet als echtes SVG mit sauberen, bearbeitbaren Pfaden mit wenigen Knoten, die bei jeder Größe scharf bleiben
Ein echter Trace mit sauberen, bearbeitbaren Pfaden, die bei jeder Größe scharf bleiben.

Schneller Ergebnis-Check. Eine echte WebP-zu-SVG-Umwandlung hat:

  • Bearbeitbare Pfade statt der in ein .svg eingebetteten WebP-Datei. Zoome hinein, und es sollte scharf bleiben.
  • Eine geringe Knotenzahl, also saubere Kurven statt Tausender Punkte (mehr zur Knotenzahl).
  • Erhaltene Transparenz, falls die Quelle sie hatte, ohne störendes Hintergrundrechteck.
  • Eine aufgeräumte Farbpalette mit nur den Farben, die du wirklich meinst, statt der zusätzlichen Farbtöne, die ein verlustbehaftetes WebP hinzugefügt hat.

Wann du den Konverter überspringen solltest

Tracing ist nicht für jede WebP-Datei die richtige Wahl:

  • Fotos und fotorealistische Bilder werden zu posterisierten Flächen, behalte sie also als Rasterbild.
  • Grafiken mit vielen Verläufen oder Texturen verlieren ihre Feinheiten. Baue sie als flächige Formen neu auf, wenn du einen Vektor brauchst.
  • Winzige oder stark komprimierte WebP-Dateien lassen sich nicht retten. Suche eine bessere Quelle oder erstelle die Grafik neu.

Wie immer gilt: Vektorisierung ist für flächige, illustrative Motive wie Logos, Icons und einfache Grafiken gedacht, nicht für Fotos. (Neu beim Thema? Starte mit was Bildvektorisierung ist.)

FAQ

Kann ich eine WebP-Datei einfach als SVG speichern? Nein. Eine WebP-Datei ist ein Rasterbild (Pixel), ein SVG ist ein Vektor (Formen und Pfade). Kein "Speichern als" macht aus dem einen das andere. Das Bild muss in Vektorformen nachgezeichnet werden, und genau das erledigt ein Vektorisierer.

Warum sieht meine WebP-Datei nach dem "Konvertieren" in SVG immer noch verpixelt aus? Ein generischer Konverter hat deine WebP-Datei wahrscheinlich in einer .svg-Hülle eingebettet, statt sie nachzuzeichnen. Das ist ein falscher Vektor und verpixelt weiterhin. Nutze ein Tool, das das Bild in echte, bearbeitbare Pfade umwandelt.

Kann ich WebP kostenlos in SVG umwandeln? Ja. Lade deine WebP-Datei in einen Vektorisierer, vereinfache die Farben und lade das SVG herunter. Du kannst deine ersten Bilder kostenlos konvertieren, ohne Kreditkarte. Prüfe nur, ob das Ergebnis ein wirklich nachgezeichneter Vektor ist und nicht die WebP-Datei in einer .svg-Hülle.

Wird WebP-Transparenz ins SVG übernommen? Das kann funktionieren, wenn du einen Konverter nutzt, der sie erhält. WebP unterstützt Transparenz, und ein guter Trace hält den Hintergrund transparent, damit du kein unerwünschtes gefülltes Rechteck bekommst.

Kann ich ein Foto von WebP in SVG umwandeln? Du kannst, aber meistens solltest du es nicht tun. Fotos haben zu viele Tonwerte und Verläufe, um zu sauberen Formen zu werden. Das Ergebnis ist dann eine posterisierte Fläche oder eine riesige Datei. Vektorisierung ist für Logos, Icons und Illustrationen gedacht.


Hast du ein WebP-Logo oder eine Grafik, die du skalieren musst? Wandle sie in ein echtes, bearbeitbares SVG um, zeichne sie nach, vereinfache die Farben und lade sie in Sekunden herunter.

Mehr aus dem Blog