Logo vektorisieren: PNG oder JPG in SVG umwandeln

Was beim Umwandeln von PNG in SVG wirklich passiert

Ein PNG ist ein Raster aus farbigen Quadraten. Ein Logo mit 1024 px besteht aus rund einer Million Bildpunkten, und die Datei weiß nichts über Formen – nur, dass dieses Pixel orange und das nächste weiß ist. Skalierst du es hoch, werden die Quadrate größer und die Kanten wirken unscharf oder stufig. Ein SVG speichert die Formen selbst: wenige Ankerpunkte pro Umrisslinie, verbunden durch Kurven, jeweils mit einer Farbe gefüllt. Ein Browser oder Drucker zeichnet diese Kurven in jeder gewünschten Größe frisch neu, sodass die Kanten auf dem Smartphone genauso scharf bleiben wie auf einem Riesenplakat.

Die Umwandlung eines PNGs in ein SVG bedeutet daher Vektorisieren (Tracing). Eine Software sucht die Kanten jedes Farbbereichs und legt Kurven daran an. Das Ergebnis ist eine neue Zeichnung, die dem Original folgt. Es ist kein PNG, das bloß in eine SVG-Datei eingepackt wurde, und es ist kein Hochskalieren. Ein Upscaler – ob mit KI oder ohne – erzeugt lediglich ein größeres PNG mit mehr Pixeln. Über seine neue Größe hinaus verschwimmt es trotzdem, du kannst es nicht Form für Form umfärben und ein Schneideplotter kann es nicht schneiden.

Ein Vektorisierer ist immer nur so gut wie die Formen, die er im Bild erkennt. Ein Logo mit wenigen flachen Farben und klaren Kanten ergibt saubere Pfade. Weiche Verläufe, Leuchteffekte, Texturen, Schatten oder Fotohintergründe haben keine feste Kante, sodass der Vektorisierer eine Kontur erfinden muss. Der nächste Abschnitt zeigt an echten Beispielen, wie das aussieht.

Was sich gut vektorisieren lässt und was nicht

Wir haben vier Uploads ohne vorherige Bereinigung und ohne KI-Boost durch den Vektorisierer von Logobundle geschickt. Eines ist ein flaches Logo. Die anderen drei sind typische Bilder, die oft als Logo hochgeladen werden.

✓

Flache Farben

✗

Glow auf dunklem Grund

✗

Aquarell

✗

Grunge-Textur

• Flache Farben (✓): zwei Farben, solide Füllungen und fette Buchstaben. Jede Kante ist klar erkennbar, sodass Haus, Hammer, Dach und selbst die kleine Textzeile darunter präzise erhalten bleiben.
• Glow / Leuchteffekt (✗): Das Leuchten geht fließend in einen dunklen Hintergrund über, es gibt also keine klare Kante, an der das Logo endet. Die Vektorisierung erzeugt ein dunkles Quadrat, lila Schlieren und ein fleckiges Herz. Generiere das Logo ohne Leuchten auf hellem, neutralem Grund.
• Aquarell (✗): Jeder Pinselstrich hat eine eigene Nuance. Die Katze zerfällt in dutzende hellblaue und rosafarbene Flecken mit Punkten ringsum, und der Farbspritzer wird überwiegend gelb. Vektorisiere stattdessen eine flache Version der Motividee.
• Grunge (✗): Die zerkratzte Textur zerreißt jede Form in Fragmente, die rote Rose wird dunkelbraun und die Schrift bekommt Löcher. Ein Vektorlogo kann solche Mikrostrukturen nicht sinnvoll abbilden – entferne sie vor dem Vektorisieren.

Bereite dein PNG vor dem Vektorisieren vor

Die meisten Probleme beim Vektorisieren lassen sich vor dem Durchlauf beheben. Zwei Fehler treten besonders häufig auf: Farbverläufe und Mockups.

Original-Upload

✗

Direkt vektorisiert

Planet und Rakete sind mit weichen Verläufen schattiert und liegen vor einem Sternenhimmel mit Leuchten. In der Vektorisierung sind die Verläufe verloren: Der Planet ist eine flache blaue Scheibe mit helleren Flecken, die Flamme blassrosa, die Rakete mattbraun, und der Verlauf im Titel bricht in zwei harte Streifen auf. Ein ausgefranster dunkelblauer Fleck des Himmels blieb um das Motiv herum stehen, weil das Leuchten den Rand des Hintergrunds verwischt. Logobundle behält saubere Farbverläufe als echte SVG-Gradients bei, wenn sie eindeutig zuzuordnen sind. Hier überlagerten sich Verläufe, Glanzpunkte und Leuchten, sodass das nicht möglich war. Glätte die Schattierungen oder bitte den Generator um Volltonfarben.

Mockup-Upload

✗

Direkt vektorisiert

Ein Mockup vektorisiert die komplette Szene. Das Ergebnis ist ein sepiabraunes Bild von Tisch, Fenster, Untertasse und Löffel. Das Logo selbst überlebt nur als braune Schrift und Kontur auf der Tasse: Das Gelb der Sonne ist weg und die kleine Zeile „Coffee & Treats“ verschwunden, weil der Vektorisierer seine Farbpalette mit dem Raum teilen musste. Schneide das Bild vorab eng auf das Logo zu – oder nutze direkt die flache Originalgrafik, aus der das Mockup erstellt wurde.

• Auflösung: Nutze das größte und schärfste Original, das du hast; Unschärfe hat keine Kante und führt zu holprigen Konturen. Rund 1000 px an der langen Seite reichen für ein Logo völlig aus. Ein kleines oder unscharfes Bild künstlich hochzuskalieren hilft selten – der Upscaler errät die Kanten nur.
• Hintergrund: Reines Weiß oder eine gleichmäßige Volltonfarbe. Schneide Mockups, Papierstrukturen, Schatten und Fotohintergründe weg.
• Farben: Zähle sie nach. Zwei bis sechs flache Farben lassen sich perfekt vektorisieren. Entferne Leuchteffekte, Verläufe und Texturen, die du nicht zwingend brauchst.
• Schrift: Sehr kleine Schriftzeichen können dünne Linien verlieren. Einen feinen Slogan kannst du nach dem Vektorisieren oft sauberer als echten Text neu setzen.

Von Hand vektorisieren: Inkscape, Illustrator und kostenlose Konverter

Du brauchst Logobundle nicht zwingend, um ein Logo zu vektorisieren. Inkscape ist kostenlos und Illustrator der Branchenstandard; beide liefern gute Ergebnisse, wenn das PNG sauber ist. Keines der beiden entfernt jedoch Mockup-Hintergründe oder fasst fast identische Farbnuancen automatisch zusammen – beachte daher zuerst die Punkte aus Bereite dein PNG vor. Die Schritte unten gelten für Inkscape 1.4 und Illustrator 2025.

Kostenlose Online-Konverter nutzen ähnliche Nachzeichner mit starren Voreinstellungen. Dabei treten drei typische Probleme auf: Sie behalten den Hintergrund bei. Sie zeichnen JPEG-Kompression und weiche Kanten als hunderte fast identische Farbflecken nach. Und manche liefern ein SVG, das lediglich das ursprüngliche Pixelbild in ein <image>-Tag einbettet: Es hat zwar die Dateiendung .svg, verpixelt aber genauso wie das PNG. Welches Werkzeug du auch nutzt – öffne das Ergebnis und mache die Prüfungen unten.

Vektorisieren mit Logobundle

Logobundle erledigt Vorbereitung und Vektorisierung in einem einzigen Upload. Es erkennt und entfernt schlichte Hintergründe – etwa Volltonfarben, dezente Papiertöne, Visitenkartenschatten oder gefälschte Transparenz-Schachbretter; komplexe Szenen oder starke Texturen können jedoch erhalten bleiben, wie das Tassen-Mockup oben zeigt. Die Farben werden auf eine kompakte Palette reduziert, sodass Nuancen zu einheitlichen Volltonflächen verschmelzen. Jede Farbe wird anschließend in glatte Vektorpfade nachgezeichnet. Saubere Farbverläufe bleiben wo passend als SVG-Gradients erhalten.

Mit der kostenlosen Vorschau prüfst du das Ergebnis vorab: Du siehst jede Bilddatei aus dem Paket mit Wasserzeichen bis 256 px, ohne Vektordateien. Nach einmaliger Zahlung erhältst du SVG, PDF und EPS. Das Komplettpaket ergänzt Favicons, App-Icons und Social-Media-Grafiken, direkt aus dem Vektor gerendert. In den Bezahlpaketen ist der KI-Boost enthalten: Dabei zeichnet Gemini das Logo vor dem Vektorisieren flach und sauber nach – ideal für schwierige Vorlagen wie Leuchteffekte oder Aquarell. Zur reinen Vektorisierung kannst du jederzeit mit einem Klick wechseln.

Stammt dein Logo aus einem KI-Generator? Die Ratgeber für Midjourney-Logos und ChatGPT-Logos erklären die jeweiligen Eigenheiten wie Papierstrukturen und falsche Schachbrettmuster.

Prüfe das SVG vor dem Einsatz

Egal welches Werkzeug du genutzt hast: Prüfe die Datei, bevor du sie an die Druckerei schickst oder auf deiner Website einbindest. Diese vier Prüfungen dauern nur zwei Minuten.

✓

400 % Zoom: Kanten bleiben scharf

✗

Bei 16 px

Bei 400 % sind die Kanten von Pizzastück, Salami und Pilz gestochen scharf, mit sauberen Füllungen ohne Pixelstufen: Das ist ein echter Vektor. Bei 16 px ist dieselbe Datei nur ein oranger Fleck. Das ist kein Fehler der Vektorisierung: Ein detailreiches Maskottchen mit Schriftzug enthält einfach zu viele Details für einen winzigen Browser-Tab. Nutze für kleine Größen nur das Bildsymbol allein; der Favicon-Ratgeber zeigt, wie das geht.

• Zoom: Öffne das SVG in einem Browser-Tab und zoome auf 400 % oder mehr. Die Kanten müssen scharf bleiben, ohne Stufen oder Weichzeichnung.
• Farben: Öffne die Datei in einem Grafikprogramm und zähle die Farbflächen. Ein dreifarbiges Logo sollte drei Farben haben, nicht vierzig Nuancen von jeder.
• Kleine Ansicht: Sieh dir das Logo bei 16 und 32 px an. Wird es zu einem unkenntlichen Fleck, brauchst du für Favicon und Profilbild ein vereinfachtes Bildzeichen.
• Echte Pfade: Öffne die Datei in einem Texteditor und suche nach <image. Findest du diesen Eintrag, enthält das SVG nur ein eingebettetes Pixelbild statt Vektoren. Im Grafikprogramm musst du einzelne Formen markieren können, nicht nur ein einziges Rechteck.

PNG oder SVG: Was du wo einsetzt

Behalte das SVG als Master-Datei und erstelle alle weiteren Formate daraus. Ein PNG ist überall dort richtig, wo eine Plattform ein Bild in einer festen Pixelgröße verlangt.

Ein gutes Logo-Paket enthält beides: den Vektor als Master-Datei und daraus gerenderte PNGs in allen benötigten Größen. Genau das erstellt Logobundle. Die genauen Maße für Startbildschirm-Icons findest du unter App-Icons aus einem Logo.

Das Ergebnis feineinstellen

Nach dem Upload kannst du den Detailgrad anpassen, Ecken für geometrische Logos schärfen und steuern, wie viel Hintergrund entfernt wird – oder die Hintergrundentfernung ganz ausschalten (praktisch für Kacheln von App-Icons).

Jeder Regler zielt auf eines der typischen Probleme ab : „Detail“ reicht von „Einfachere Formen“ bis „Kleine Teile behalten“ – regle nach unten, wenn ein unruhiges Bild Flecken hinterlässt, und nach oben, wenn feine Linien oder kleine Buchstaben verloren gehen. „Ecken“ reicht von „Runder“ bis „Spitzer“: Geometrische Logos, Buchstaben und Badges wirken mit schärferen Ecken meist besser, handgezeichnete Formen mit runderen. „Hintergrundentfernung“ reicht von „Sanft“ bis „Stark“: Wähle eine stärkere Stufe, wenn Schatten- oder Papierkanten stehen bleiben, und eine sanftere, wenn Kanten des Logos angegriffen werden.

Passe die Regler einzeln an und vergleiche das Ergebnis. Wenn die Standard-Vektorisierung an ihre Grenzen stößt – wie bei den Beispielen mit Leuchten oder Aquarell oben –, hilft der KI-Boost im Bezahlpaket: Er zeichnet das Motiv vor dem Vektorisieren flach und sauber nach.