Logo von PNG zu SVG vektorisieren — ohne die Feindetails zu verlieren

Sie haben ein Logo als PNG. Sie brauchen es als SVG — für die Website, für die E-Mail-Signatur, die auf Retina-Displays scharf wird, für den Drucker, der Vektor für die Visitenkarten will. Einen Designer engagieren, um es nachzubauen, dauert Tage. Auto-Vektorisierungs-Tools brauchen Sekunden. Diese Anleitung erklärt, wie man sauber vektorisiert, wo diese Tools versagen und wie man sich erholt, wenn sie es tun.

Genutztes Tool: paste-to-download.com/vectorize — browser-basierter PNG/JPG-zu-SVG-Konverter, ohne Upload, ohne Wasserzeichen.

Warum SVG für Logos wichtig ist

Logos müssen in jeder Größe richtig aussehen. Ein 32 × 32-Favicon und ein 4000 × 4000-Messestand-Banner sind dasselbe Logo, aber eine Rasterdatei (PNG, JPG) kann nur eine Größe sein — der Rest ist entweder verpixelt (wenn größer gezogen) oder verschwendete Bytes (wenn zu groß für den Slot).

SVG (Scalable Vector Graphics) beschreibt das Logo als Mathe — Kurven, Füllungen, Striche. Die Mathe rendert perfekt in jeder Größe. Standard überall, wo ein moderner Browser existiert, plus die meiste Designsoftware.

Das Ideal: das Master-Logo als SVG speichern, Rasterversionen bei Bedarf exportieren.

Was Auto-Vektorisierung wirklich tut

Ein Vektorisierer (auch „Trace“ genannt) schaut ein Rasterbild an und identifiziert Regionen ähnlicher Farbe. Für jede Region berechnet er einen geschlossenen Pfad, der den Umriss der Region verfolgt. Die Ausgabe ist ein Pfad pro Region — das ist Ihre SVG.

Die Qualität der Ausgabe hängt ab von:

Quellauflösung — höherer Input = mehr Detail zu tracen
Kantenschärfe — saubere Kanten tracen sauber; unscharfe Kanten produzieren wackelige Pfade
Farbanzahl — weniger Farben = simplerer Output; mehr Farben = mehr Pfade
Anti-Aliasing-Artefakte — weiche Kanten aus dem Rasterisieren erzeugen falsche Mikro-Farbregionen

Das verstanden, können Sie die Quelle vorverarbeiten, um sauberen Vektor-Output zu bekommen.

Schritt 1: Mit der höchstauflösenden Quelle starten

Goldene Regel: existiert die Original-Vektordatei (AI, EPS, PDF, SVG), die nutzen. Nicht vektorisieren, wenn Sie das Original haben.

Wenn Sie nur Raster haben, das größte, sauberste wählen:

Ein 2000 × 2000-PNG vektorisiert immer besser als ein 200 × 200-Thumbnail
Ein Screenshot des Logos von einer Website ist schlechter als die Quelldatei, die die Website nutzte
Ein Foto eines gedruckten Logos (Kamera in der Hand, Visitenkarte aufgenommen) ist viel schlechter als eine Digitaldatei — Re-Encoding durch JPEG plus fotografisches Rauschen erzeugt viele falsche Farbregionen

Ist die Quelle klein oder verrauscht, zuerst /upscale mit Lanczos-Modus probieren, um vor dem Vektorisieren zu bereinigen und zu vergrößern.

Schritt 2: Quelle bei Bedarf bereinigen

Vektorisierer mögen:

Saubere weiße oder transparente Hintergründe
Volltonfarben (keine Verläufe oder fotografischen Texturen)
Scharfe Kanten (anti-aliased ist okay; unscharf nicht)

Vektorisierer kämpfen mit:

JPEG-Artefakten (jeder 8×8-Block wird eine falsche Region)
Verläufen (als viele diskrete Farbstufen interpretiert)
Schlagschatten (vektorisiert als Folge von Niedrig-Alpha-Ringen)
Fotografischen Hintergründen (jedes Blatt, jede Wolke wird ein Pfad)

Vorverarbeitung:

Hintergrund entfernen mit /remove-background, wenn das Logo auf komplexem Hintergrund liegt
Leichten Blur anwenden, wenn die Quelle JPG-Artefakte hat (kontraintuitiv — weichzeichnet falsche Kanten vor dem Tracen)
Kontrast erhöhen, wenn die Quelle verblasst ist
Sättigung boosten, wenn der Vektorisierer Farbregionen klar unterscheiden soll

Schritt 3: Vektorisierungs-Tool öffnen und richtigen Modus wählen

/vectorize öffnen. Logo reinwerfen. Modus wählen:

Hochkontrast: am besten für 1–2-Farben-Logos (Schwarz-auf-Weiß, Schwarz-auf-Farbe). Erzeugt 1–2 Pfade.
Farbe: am besten für mehrfarbige Logos mit Flächen (3–8 distinkte Farben). Erzeugt einen Pfad pro Farbregion.
Detailliert: für Logos mit vielen kleinen Elementen oder feiner Linienarbeit. Erzeugt mehr Pfade, größere Ausgabe.

Für die meisten modernen Markenlogos (sauber, flach, 2–4 Farben) ist Farb-Modus der Standard. Für altmodische Monogramm- oder Einzelfarben-Logos Hochkontrast.

Schritt 4: Schwellenwert und Farbanzahl einstellen

Zwei kritische Slider:

Schwellenwert (0–255): die Helligkeitsschwelle zur Unterscheidung dunkel von hell. Höherer Schwellenwert = mehr Pixel gehen in die „dunkle“ Region. Standard 128 (mittelgrau). Tunen, bis die Kanten dem Original entsprechen.
Farbanzahl: die maximale Zahl distinkter Füllfarben in der SVG. Ein 2-Farben-Logo sollte auf 2 gesetzt sein. Ein 5-Farben-Logo auf 5. Zu hoch erzeugt Rauschen; zu niedrig verschmilzt distinkte Farben.

Im paste-to-download-Vektorisierer zeigen beide Slider eine Live-Vorschau. Einstellen, bis die Vorschau dem Original entspricht, dann exportieren.

Schritt 5: SVG exportieren und im Browser verifizieren

Vectorize & Download klicken. Die resultierende .svg-Datei direkt im Browser öffnen (Datei in die Adresszeile ziehen):

Sollte identisch zum PNG rendern
Mit Strg+= (oder ⌘+= auf Mac) reinzoomen — bei 1000% Zoom sollten die Kanten immer noch knackig sein
Browser-Fenster vergrößern — die SVG rendert in jeder Größe scharf

Sieht es kaputt aus (zackige Pfade, fehlende Farben, komische Formen), zurück zu Schritt 4 und andere Einstellungen probieren.

Häufige Fehler und Fixes

„Die Logo-Kanten sehen wellig aus“

Die Quelle war entweder zu niedrigauflösend oder hatte JPG-Komprimierungs-Artefakte. Eine höherauflösende Quelle probieren, oder die Quelle erst durch /compress zu PNG laufen lassen (entrauscht die JPG-Artefakte), dann vektorisieren.

„Manche Farben sind zu einer verschmolzen“

Farbanzahl zu niedrig. Erhöhen, bis jede distinkte Füllfarbe im Original einen eigenen Pfad bekommt.

„Es gibt einen Halo aus Zwischenfarben um das Logo“

Anti-Aliasing-Artefakte. Farbanzahl senken (kollabiert den Halo in die Hauptfüllung) oder höheren Schwellenwert nutzen (eliminiert helle Kantenpixel).

„Feiner Text im Logo ist unlesbar“

Text ist das Schwierigste am Rastervektorisieren. Zwei Optionen: (a) die Originalschrift nutzen und den Text manuell in der SVG neu setzen (Schriftname suchen; Firmen nutzen oft kommerziell verfügbare Schriften), oder (b) die Vektor-Annäherung akzeptieren und später fixen.

„Verlauf im Original wurde zu Banding-Stufen“

Vektorisierer können kontinuierliche Verläufe nicht leicht abbilden. Sie müssten die Banding-Stufen manuell durch ein <linearGradient>- oder <radialGradient>-Element ersetzen. Für die meisten Logos lohnt sich das nicht; ist der Verlauf essentiell, das Logo in Illustrator/Figma mit der Markenfarbpalette neu erstellen.

Wann Sie stattdessen einen Designer engagieren sollten

Auto-Vektorisierung ist großartig für:

Interne Nutzung (Folien, interne Sites, Prototypen)
Erste Konvertierungen aus Druckmaterialien
Kleinere Logos mit einfachen Formen

Nicht großartig für:

Finale markentaugliche Assets, die jahrelang genutzt werden
Logos mit komplexen handgezeichneten Elementen
Druck in sehr großen Größen (Banner, Fahrzeugbeklebungen)

Für finale Marken-Assets ist der Workflow: auto-vektorisieren → die Ausgabe als Startpunkt nutzen → manuell in Inkscape oder Illustrator bereinigen. Ein Designer, der von einer auto-vektorisierten Basis startet, braucht 30 Minuten statt 3 Stunden.

Browser-local: Warum es bei Logos zählt

Logos sind oft pre-launch vertraulich. Sie für die Vektorisierung an einen unbekannten Dienst hochzuladen ist ein Leak-Risiko.

/vectorize läuft komplett in Ihrem Browser-Tab. Der Potrace-basierte Vektorisierer ist zu WebAssembly kompiliert, läuft lokal, Ihr Logo verlässt das Gerät nicht. Network-Panel öffnen: null ausgehender Traffic mit Logo-Daten.

Die Kurzversion

Mit der höchstauflösenden sauberen Quelle starten, die Sie haben
Hintergrund entfernen oder Quelle entrauschen, falls nötig
/vectorize öffnen, richtigen Modus wählen
Schwellenwert und Farbanzahl tunen, bis Vorschau dem Original entspricht
Exportieren, im Browser bei mehreren Zoom-Stufen verifizieren

Das Ergebnis: ein Logo, das vom 16-px-Favicon bis zum 5-Meter-Messestand-Banner perfekt skaliert.