Zum Inhalt springen
Depixelise
Artikel · 5 Min.

PNG in SVG umwandeln: mit Transparenz und echten Pfaden

PNG in SVG umwandeln, ohne die Transparenz zu verlieren: hellen Saum vermeiden, aufgemaltes Schachbrett erkennen, echte Pfade im SVG prüfen.

Von Gaël Pons

Veröffentlicht am

eine Hand hält vor dem Himmel eine durchsichtige Acrylplatte mit dem Logo „ONDE.“, ganz ohne Hintergrund, in der Ecke ein kleiner Depixelise-Sticker

Probier es gleich aus

Lade dein Bild hoch: Du siehst das Ergebnis sofort in Großansicht und kannst hineinzoomen. Die SVG-Datei und das Druckpaket schicken wir dir per E-Mail.

Ein PNG in SVG umzuwandeln heißt, seine Pixel als Pfade neu zu zeichnen, damit dein Logo in jeder Größe scharf bleibt. Beim PNG kommt eine zweite Aufgabe dazu: Was transparent war, muss transparent bleiben, ohne weißen Kasten und ohne hellen Saum um die Buchstaben.

Wie wandelst du ein PNG in SVG um?

Um ein PNG in SVG umzuwandeln, lässt du es vektorisieren: Ein Programm erkennt die Farbflächen deines Bildes, zeichnet ihre Umrisse als Pfade nach und lässt die durchsichtigen Bereiche leer. Heraus kommt eine Vektorgrafik, die du ohne Qualitätsverlust auf jede Größe bringst, vom Stempel bis zum Banner.

Beim PNG hängt das Ergebnis an drei Punkten:

  1. Echte Transparenz. Der leere Raum um dein Logo ist wirklich durchsichtig und kein ins Bild gemaltes Schachbrett.
  2. Saubere Ränder. Die weichen Kanten des PNG werden zu klaren Konturen, ohne hellen Schimmer um die Schrift.
  3. Pfade statt Pixel. Der Konverter hat dein Bild neu gezeichnet, statt das PNG unverändert in eine SVG-Hülle zu stecken.

Die allgemeine Methode, von der Suche nach der besten Vorlage bis zur Kontrolle im Zoom, findest du in unserer Anleitung zum Vektorisieren.

Bleibt die Transparenz erhalten, wenn du PNG in SVG umwandelst?

Beim Umwandeln von PNG in SVG bleibt die Transparenz erhalten, wenn der Konverter zwei Dinge richtig macht: Er lässt die durchsichtigen Flächen leer, statt sie mit Weiß zu füllen, und er entscheidet an den Rändern sauber, was zur Form gehört. Die Ränder sind dabei der heikle Teil.

Ein PNG kann für jedes einzelne Pixel festhalten, wie durchsichtig es ist: Das Format unterstützt einen Alphakanal mit 8 oder 16 Bit. Bei 8 Bit ergibt das 256 Abstufungen zwischen voll transparent und voll deckend. Ein Logo mit geglätteten Kanten (Antialiasing) nutzt genau diese Zwischenstufen: Seine Randpixel sind halb durchsichtig, damit die Schrift auf jedem Untergrund weich ausläuft. Die Formen, die ein Vektorisierer zeichnet, haben dagegen eine klare Kontur. Jedes halb durchsichtige Randpixel landet also entweder in der Form oder im leeren Raum.

Trifft der Konverter diese Entscheidung schlecht, siehst du einen von zwei Fehlern:

  • Ein heller oder grauer Saum um die Buchstaben: Die halb durchsichtigen Randpixel wurden mit Weiß vermischt und als eigene Form nachgezeichnet. Auf weißem Papier fällt er nicht auf, auf einem dunklen Hoodie leuchtet er.
  • Ein weißes Rechteck hinter dem Logo: Der Konverter hat die Transparenz schon vor dem Umwandeln mit Weiß aufgefüllt und diesen Hintergrund gleich mit vektorisiert.

Auf einem schwarzen Trikot wird dieses Rechteck mitgedruckt, als gehörte es zu deinem Logo. Die typischen Fehler, ihre Ursache und was dagegen hilft:

Was du im SVG siehstWoher es kommtWas hilft
Heller Saum um die SchriftRandpixel wurden mit Weiß vermischtNeu umwandeln und den Hintergrund dabei entfernen lassen
Weißes Rechteck hinter dem LogoTransparenz wurde vorher mit Weiß gefülltNeu umwandeln, danach auf dunklem Grund prüfen
Grau-weißes SchachbrettDas Muster ist ins PNG gemaltOriginaldatei besorgen oder Hintergrund vorher entfernen
Treppenstufen an den Kanten im ZoomDas PNG steckt nur in einer SVG-HülleDas PNG wirklich vektorisieren
Farbstreifen statt VerlaufSchatten oder Verlauf im PNGEine flache Fassung des Logos umwandeln

Wie erkennst du ein PNG, das nur transparent aussieht?

Ein PNG, das nur transparent aussieht, erkennst du auf schwarzem Grund: Bleibt dort ein grau-weißes Schachbrett um dein Logo sichtbar, ist das Muster Teil des Bildes und kein leerer Hintergrund. So eine Datei entsteht zum Beispiel, wenn jemand die Vorschau eines Logos samt Schachbrett abgespeichert hat.

Die Vorschau eines Bildprogramms reicht für diesen Test nicht: Viele Bildbearbeitungsprogramme zeigen durchsichtige Bereiche selbst mit einem Muster an, zum Beispiel mit einem Schachbrett. Auch die Vorschau von Depixelise steht standardmäßig auf „Schachbrett“. Echte und aufgemalte Transparenz sind auf so einem Muster kaum auseinanderzuhalten.

So machst du den Test:

  1. Leg in deinem Präsentationsprogramm eine leere Folie mit schwarzem Hintergrund an.
  2. Füge das PNG auf dieser Folie ein.
  3. Sieh nach, was um das Logo herum passiert: Ist das Schachbrett verschwunden, ist die Transparenz echt. Ist es noch da, gehört es zum Bild.

Gehört das Schachbrett zum Bild, besorgst du dir am besten die Originaldatei bei der Person, die das Logo gestaltet hat. Klappt das nicht, stell das Logo vor dem Umwandeln in einem Bildprogramm frei, also entferne den Hintergrund von Hand. Sonst kann ein Vektorisierer das Schachbrett als Teil des Motivs nachzeichnen, Kästchen für Kästchen.

Welche PNGs ergeben das sauberste SVG?

Das sauberste SVG ergibt ein PNG, das direkt aus einem Grafik- oder Layoutprogramm exportiert wurde: wenige Farbflächen, harte Kanten, echte Transparenz und möglichst viele Pixel. Wenn du ein PNG vektorisieren willst, ist so eine Datei die beste Vorlage, die du bekommen kannst.

Das Format kommt dir dabei entgegen. PNG komprimiert verlustfrei und hat vor allem bei Grafiken wie Buttons, Icons und Logos das ältere GIF abgelöst. Beim Speichern gehen also keine Bildinformationen verloren, und es entstehen keine Kompressionsartefakte, die der Vektorisierer als Sprenkel mitzeichnen könnte. Eine Ausnahme gibt es: Wurde das PNG irgendwann aus einem JPG gespeichert, trägt es dessen Artefakte unverändert weiter.

Die Größe zählt trotzdem mehr als das Format. Ein großes, scharfes JPG ergibt ein besseres SVG als ein winziges PNG, weil die Menge der Details entscheidet und nicht die Dateiendung. Warum ein JPG beim Umwandeln mehr Nacharbeit verlangt, liest du im Artikel JPG in SVG umwandeln.

Was passiert mit Schatten und Farbverläufen im PNG?

Schatten, Glanzeffekte und Farbverläufe im PNG werden beim Umwandeln in SVG meist in Streifen aus einzelnen Farbflächen zerlegt, mit sichtbaren Stufen dort, wo das Original weich verlief. Bei Motiven mit Verläufen führt eine vollautomatische Vektorisierung nur zu unbefriedigenden Ergebnissen, und oft bleibt Handarbeit nötig.

Frag deshalb nach einer flachen Fassung deines Logos, ohne Schatten und ohne Verlauf, und wandle diese um. Einen Schatten kannst du später im Vektorprogramm wieder ergänzen, falls das Druckverfahren ihn zulässt.

Auch in der Werkstatt zählt jeder Farbstreifen. Im Siebdruck braucht jede Farbe ein eigenes Sieb, und ein Verlauf, der in viele Streifen zerfällt, macht aus einem einfachen Logo einen aufwendigen Auftrag. Ein Schneideplotter schneidet die Konturen einer Vektorgrafik in die Folie: Einen weichen Übergang kann er nicht ausschneiden.

Was tun, wenn dein PNG nur ein Favicon ist?

Ist dein PNG nur ein Favicon, such zuerst eine größere Fassung, denn das kleine Symbol einer Webseite hat viel zu wenige Pixel für ein genaues SVG: Ein Favicon misst 16 × 16, 32 × 32 oder 48 × 48 Pixel. Bei 300 dpi gedruckt wären selbst 48 Pixel nur rund 0,4 cm breit (48 ÷ 300 × 2,54 cm). Für dein eigenes Bild findest du den Wert mit dem Rechner Pixel in cm.

In so wenigen Pixeln besteht ein ganzer Schriftzug aus ein paar Pixelreihen, und jede Rundung aus einer Handvoll Stufen. Eine größere Datei findest du oft im Pressebereich der Website, in alten Druckdaten oder beim Grafiker von damals.

Gibt es keine, vergrößert Depixelise ein zu kleines Bild vor dem Vektorisieren automatisch und baut seine Formen dabei neu auf. Das Ergebnis ist eine Rekonstruktion, kein Abbild: Ein Buchstabe oder eine Ecke kann leicht anders aussehen als im Original. Leg beide Fassungen nebeneinander und geh die Details einzeln durch.

Woran erkennst du, dass im SVG nur dein PNG steckt?

Dass im SVG nur dein PNG steckt, erkennst du im Zoom: Werden die Kanten bei starker Vergrößerung stufig oder unscharf, hat der Konverter dein Bild nicht vektorisiert, sondern bloß eingebettet. Die SVG-Spezifikation des W3C lässt das ausdrücklich zu: Jeder standardkonforme SVG-Betrachter muss PNG-Bilder darstellen können, und ein eingebundenes Rasterbild wird dabei immer als RGBA verarbeitet, also mit Alphakanal.

Beim PNG ist dieses falsche SVG deshalb schwerer zu entlarven als beim JPG. Ein transparentes PNG bleibt in der SVG-Hülle in aller Regel durchsichtig: Auf dunklem Grund erscheint dann kein weißes Rechteck, und alles wirkt in Ordnung. Nur der Zoom bringt die Pixel zum Vorschein.

Gewissheit gibt dir ein Blick in die Datei selbst. Öffne das SVG in einem einfachen Texteditor: Findest du dort ein <image>-Element mit dem Vermerk data:image/png;base64, und dahinter einem endlosen Block aus Buchstaben und Ziffern, ist das dein PNG, als Data-URL in die Datei geschrieben. Wie eine echte SVG-Datei innen aussieht, zeigt unser Artikel zur SVG-Datei.

Wie lässt sich ein PNG in SVG umwandeln, wenn es schnell gehen muss?

Muss es schnell gehen, wandelst du dein PNG online mit Depixelise in etwa zehn Sekunden in SVG um, 100 % kostenlos und ohne Konto. Starte die Umwandlung und lies diesen Absatz zu Ende: Bis dahin ist dein SVG in der Regel fertig. Wer für den Verein Trikots bestellen soll und nur das PNG von der Vereinswebsite hat, braucht dafür weder ein Programm noch einen Grafiker.

Auf Depixelise ziehst du das PNG einfach in das Upload-Feld. Neben PNG nimmt das Feld JPG, WebP und SVG an, solange die Datei höchstens 10 MB groß ist. Auf dem Server wird das Bild bei Bedarf vergrößert und dann in Pfade übersetzt. Den Hintergrund entfernt das Tool bei jeder Umwandlung automatisch, ohne dass du etwas einstellen musst: Was im PNG durchsichtig war, bleibt im SVG leer.

Das SVG erscheint in Großansicht, beschriftet mit „Vektorisiertes SVG“, und liegt in der Vorschau auf einem Schachbrett. Schalte auf „Dunkel“ und zoome auf 800 %: So siehst du sofort, ob um deine Schrift ein heller Saum geblieben ist. Ein Wasserzeichen setzt Depixelise nicht.

Per E-Mail erhältst du vier Dateien, gebündelt im Druckpaket: dein SVG, ein PNG in 2.000 Pixel Breite mit durchsichtigem Hintergrund für Website und Dokumente, eine komplett schwarze Fassung für Gravur, Stempel oder eine einfarbige Stickerei sowie eine komplett weiße für dunkle Stoffe. Verlangt deine Druckerei statt des SVG ein PDF oder EPS, zeigt dir die Übersicht der Formate einer Vektordatei, wie du dorthin kommst.

FAQ

Ist ein PNG eine Vektorgrafik?

Nein, ein PNG ist eine Rastergrafik: ein festes Raster aus Pixeln, das beim starken Vergrößern unscharf wird. Auch ein PNG mit transparentem Hintergrund oder in hoher Auflösung bleibt eine Pixeldatei. Formen statt Pixel bekommst du erst durch das Vektorisieren.

Ist das SVG größer als das PNG?

Das SVG kann deutlich kleiner sein als das PNG, wenn dein Logo aus wenigen Farbflächen besteht, etwa ein Schriftzug in zwei Farben. Ein Motiv mit vielen Details und Verläufen lässt die Datei dagegen stark anwachsen, ein Zeichen, dass es sich schlecht zum Vektorisieren eignet.

Kann ein PNG CMYK-Farben enthalten?

Nein, ein PNG kann keine CMYK-Farben enthalten: CMYK-Farbmodi unterstützt das Format laut Adobe nicht. Für den Vierfarbdruck (CMYK) müssen die Farben deshalb umgerechnet werden. Einen geschätzten CMYK-Wert für deinen Farbton zeigt dir der Rechner RGB in CMYK.

Kann ich ein PNG ohne Internet in SVG umwandeln?

Ja, ohne Internet wandelst du ein PNG mit einem installierten Programm in SVG um, zum Beispiel mit der freien Software Inkscape. Sie läuft unter Windows, macOS und Linux, importiert PNG-Dateien und vektorisiert Rastergrafiken. Die Einstellungen für die Erkennung nimmst du dort selbst vor.

Behält das Logo beim Umwandeln seine Farben?

In der Regel ja: Die Hauptfarben deines Logos bleiben beim Umwandeln erhalten, und jede wird zu einer Fläche in genau einem Farbton. Sehr ähnliche Töne können dabei zusammengefasst werden. Braucht deine Druckerei einen exakten Farbwert, vergleiche PNG und SVG mit dem Tool Farbcode erkennen: Es liest die HEX- und RGB-Codes beider Dateien aus.