Zum Inhalt springen
Codex DesignBETA

PNG in SVG umwandeln.

Wandle ein PNG-, JPG- oder WebP-Bild in ein SVG um, indem seine Formen als Vektorpfade nachgezeichnet werden. Wähle, wie viele Farben bleiben und wie genau die Kanten verfolgt werden, vergleiche das Ergebnis mit dem Original und kopiere dann den SVG-Code oder lade die Datei herunter. Am besten geeignet für Logos, Icons und flache Illustrationen. Alles läuft in deinem Browser, deine Bilder werden nie hochgeladen.

Detail

Am besten für Logos, Icons und flache Illustrationen. Fotos werden zu sehr vielen kleinen Formen und einer großen Datei.

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

Stattdessen SVG in PNG umwandeln

So wandelst du PNG in SVG um

  1. Wähle ein Bild oder zieh es in das Feld oben: PNG, JPG oder WebP.
  2. Leg die Anzahl der Farben fest, von 2 bis 24. Voreingestellt sind 8. Ein zweifarbiges Logo braucht nur 2 oder 3; mehr Farben erhalten mehr Schattierung, erzeugen aber mehr Formen.
  3. Wähle das Detail: Fein folgt den Kanten genau, Ausgewogen passt für die meisten Logos, und Glatt ergibt rundere Kurven und weniger Formen.
  4. Umwandeln, das SVG mit dem Original vergleichen, dann den Code kopieren oder die .svg-Datei herunterladen.

Gut zu wissen:

  • Am besten für Logos und Icons. Beim Nachzeichnen werden Flächen in flacher Farbe zu Formen. Ein Foto wird zu Tausenden kleiner Formen und einer großen Datei, also lass Fotos als WebP oder JPG.
  • Große Bilder. Vor dem Nachzeichnen wird das Bild auf 1.000 Pixel an der längsten Seite verkleinert. Das reicht für ein Logo und hält das SVG klein.
  • Es ist eine Nachzeichnung, nicht das Original. Hat die Designerin oder der Designer das Logo noch als SVG-, AI- oder Figma-Datei, exportiere lieber von dort. Das Nachzeichnen ist für Fälle, in denen nur die Bitmap übrig ist.

Das SVG mit Codex aufräumen

Ein nachgezeichnetes SVG funktioniert so, wie es ist, aber Codex kann es in deinem Projekt handlicher machen: weniger Punkte, eine Farbe, die du per CSS ändern kannst, oder eine Komponente zum Importieren.

Ein nachgezeichnetes SVG aufräumen
Dieses SVG ist eine nachgezeichnete Version unseres Logos. Vereinfache die Pfade, ohne das Aussehen zu ändern, entferne Formen kleiner als [2px], setze die Hauptfarbe auf currentColor, damit CSS sie ändern kann, und füge einen title für Screenreader hinzu. Mach daraus dann eine [React]-Komponente namens [Logo] mit einer size-Prop.

Häufige Fragen

Ist der PNG-zu-SVG-Konverter kostenlos?

Ja. Ohne Anmeldung, ohne Wasserzeichen und ohne Tageslimit.

Werden meine Bilder hochgeladen?

Nein. Dein Browser zeichnet das Bild nach und erstellt das SVG auf deinem Gerät. Die Website zählt nur, dass das Tool genutzt wurde, nie, was du hineingibst.

Warum ist mein SVG so groß?

Wahrscheinlich hat das Bild viele Farben oder feine Strukturen, wie ein Foto oder ein Verlauf. Verringere die Anzahl der Farben und wähle Glatt, dann sinkt die Zahl der Formen, die unter dem Ergebnis steht. Für Fotos ist eine Umwandlung von PNG in SVG nicht das richtige Werkzeug; nimm stattdessen WebP.

Kann ich das SVG danach bearbeiten?

Ja. Das Ergebnis ist ein normales SVG aus gefüllten Pfaden, einer pro Form. Du kannst es in Figma, Illustrator oder Inkscape öffnen oder den Code direkt bearbeiten.

Weiterlesen

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.