PNG in SVG umwandeln

Vektorisieren Sie eine PNG-Datei im Browser zu einer skalierbaren SVG-Datei. Das eignet sich für Logos und flächige Icons mit wenigen Farben, nicht für Fotos.

Dateien hier ablegen

.png · bis 20 MB

Dateien auswählen

Anzahl der Farben8

Weitere Einstellungen

GlättungFormen ignorieren, die kleiner sind als8Konturbreite0Transparenz behaltenAusgabemaßstab

Vektorisieren: So geht’s

1
PNG ablegen
Bis zu 20 Dateien mit je 20 MB und 4 Megapixeln je Bild. JPEG-, WebP- und BMP-Dateien mit der Endung .png werden stillschweigend mit umgewandelt.
2
Anzahl der Farben wählen
Weniger Farben ergeben ein saubereres, leichteres Ergebnis. Zwei sind richtig für ein Zeichen in Schwarz auf Weiß, acht passen zu den meisten flächigen Icons.
3
SVG herunterladen
Die Ergebniskarte zeigt, wie viele Farben und Umrisse entstanden sind. So sehen Sie sofort, ob die Einstellungen gepasst haben.

Was beim Vektorisieren wirklich passiert

Vektorisieren ist keine Umwandlung, sondern eine Annäherung. Zuerst wird das Bild auf eine begrenzte Palette quantisiert, dann wird die Grenze jeder einfarbigen Fläche nachgefahren und in eine Kette aus geraden Segmenten und Bézierkurven übersetzt. Das funktioniert gut, wenn die Vorlage tatsächlich aus Flächen besteht: ein Logo, eine Schablone, ein App-Icon, der Screenshot eines Diagramms. Schlecht funktioniert es bei Bildern mit fließenden Farbübergängen: Ein Foto hat keine Flächen, die sich finden ließen, also erfindet die Vektorisierung Tausende winziger Flächen, Kanten runden sich ab, sanfte Verläufe zerfallen in sichtbare Streifen, und die SVG-Datei ist am Ende größer als die PNG-Datei und zugleich unschärfer. Dieses Tool verarbeitet trotzdem auch ein Foto und weist auf der Ergebniskarte darauf hin. Besser aber, Sie lesen es schon auf dieser Seite, als hinterher überrascht zu werden.

Die vier Einstellungen und wofür sie gut sind

„Anzahl der Farben“ ist der wichtigste Hebel. Diese Einstellung bestimmt, wie groß die Palette ist, auf die alles quantisiert wird, und prägt sowohl die Dateigröße als auch, wie sauber die Umrisse aussehen. „Glättung“ legt fest, wie eng sich die Kurven an die nachgefahrene Grenze schmiegen müssen: Niedrig erhält scharfe Ecken, kostet aber deutlich mehr Knoten; hoch erzeugt glatte Kurven, die kleine Details verschlucken können. „Kleine Formen ignorieren“ verwirft jeden Umriss, der kürzer ist als die angegebene Zahl an Pixeln, und ist damit genau das Richtige gegen JPEG-Artefakte und Scannerrauschen. „Konturbreite“ steht standardmäßig auf null, die Formen werden also ohne sichtbare Kontur gefüllt; erhöhen Sie den Wert, wenn jede Fläche zusätzlich mit einer passenden Kontur gezeichnet werden soll.

Transparenz und ein Ergebnis, das Sie prüfen können

Ist „Transparenz beibehalten“ aktiv, werden Pixel unter halber Deckkraft als eigener, transparenter Eintrag in der Palette behandelt und nicht gezeichnet. Ein Logo auf transparentem Hintergrund behält also seinen transparenten Hintergrund. Schalten Sie die Option aus, wird zuerst ein Rechteck in der häufigsten deckenden Farbe gelegt, und die nachgezeichneten Formen kommen darüber. Das hilft, wenn das Ziel überhaupt nicht mit Transparenz umgehen kann. In beiden Fällen ist das Ergebnis schlichtes, lesbares XML: Sie können es in jedem Editor öffnen, die Pfade sehen und eine Füllfarbe von Hand ändern.

Ihre Datei bleibt auf Ihrem Gerät

Decodieren und Vektorisieren laufen beide in Ihrem Browser-Tab. Der PNG-Decoder ist WebAssembly, die Vektorisierung JavaScript, und keins von beiden spricht mit einem Netzwerk. Nichts wird hochgeladen, nichts wartet in einer Warteschlange auf einem Server, und wenn Sie den Tab schließen, ist alles aus dem Arbeitsspeicher gelöscht.

Häufige Fragen

Warum sieht die SVG-Datei nicht genauso aus wie meine PNG-Datei?

Weil das Vektorisieren das Bild aus Kurven neu aufbaut, statt Pixel zu kopieren. Die Farben werden auf eine begrenzte Palette reduziert, und jede Grenze wird durch eine Kurve angenähert, die nahe an der ursprünglichen Kante verläuft, aber nicht exakt auf ihr. Bei flächigen Grafiken ist der Unterschied in normaler Größe nicht zu sehen, bei detailreichen oder fotografischen Motiven ist er offensichtlich.

Wie viele Farben sollte ich für ein Logo wählen?

Zählen Sie die Flächenfarben im Logo und nehmen Sie diese Zahl. Ein einfarbiges Zeichen auf weißem Hintergrund gelingt am besten mit 2, ein typisches zweifarbiges Markenzeichen mit 3 oder 4. Mehr Farben machen eine flächige Grafik nicht originalgetreuer. Zusätzliche Farben zerlegen nur die Pixel der Kantenglättung (Anti-Aliasing) in weitere Zwischenformen und blähen die Datei auf.

Warum ist das Ergebnis bei einem Foto so groß?

Ein Foto hat keine Flächen, deshalb erzeugt die Vektorisierung für jedes kleine Stück ähnlicher Farbe einen eigenen Umriss, oft Zehntausende davon. Kommen die Umrisse zusammen auf mehr als 50.000 Knoten, wird das Ergebnis verweigert statt ausgeliefert, weil es sich langsamer öffnen würde als das Original und schlechter aussähe. Wenn Sie es trotzdem versuchen wollen, senken Sie die Anzahl der Farben auf 4 und erhöhen Sie „Kleine Formen ignorieren“.

Was bewirkt „Kleine Formen ignorieren“?

Die Option verwirft jeden nachgezeichneten Umriss, der kürzer ist als die angegebene Zahl an Pixeln. Kleine Sprenkel aus der JPEG-Komprimierung, Scannerkörnung oder ein leicht verrauschter Hintergrund würden sonst alle zu Umrissen, und jeder davon macht die Datei schwerer, ohne etwas Sichtbares beizutragen. Der Standardwert 8 entfernt das meiste Rauschen und erhält gewollte kleine Details wie den i-Punkt.

Kann ich den Formen eine Kontur geben?

Ja. Stellen Sie „Konturbreite“ auf einen Wert über null, dann wird jede nachgezeichnete Fläche mit einer Kontur in ihrer eigenen Füllfarbe gezeichnet. Bei 0 werden die Formen nur gefüllt. Das ist bei einem Logo meist richtig, denn eine Kontur in derselben Farbe macht jede Form nur etwas dicker.

Bleibt die Transparenz erhalten?

Ja, wenn „Transparenz beibehalten“ aktiv ist. Pixel unter halber Deckkraft bekommen einen eigenen Paletteneintrag und werden gar nicht gezeichnet, sodass der Hintergrund transparent bleibt, statt zu einem weißen Kasten zu werden. Ist der Schalter aus, bekommen Sie stattdessen ein einfarbiges Hintergrundrechteck in der häufigsten Farbe des Bildes.

Wie viele Dateien kann ich auf einmal vektorisieren?

Bis zu 20 Dateien mit je 20 MB und 4 Megapixeln. Die Megapixel-Grenze liegt bewusst niedriger als bei unseren anderen PNG-Tools: Die Rechenzeit fürs Vektorisieren wächst schneller als die Zahl der Pixel, und ein größeres Bild würde den Tab einfrieren, statt fertig zu werden.

Wird die Datei auf einen Server hochgeladen?

Nein. Die PNG-Datei wird in Ihrem Browser decodiert und vektorisiert, und auch die SVG-Datei entsteht dort. Zu keinem Zeitpunkt verlässt etwas den Tab.

Anleitungen

Ein Favicon erstellen, das auch auf Retina-Displays scharf bleibtLange reichte eine einzige kleine favicon.ico für das ganze Web. Das ist seit Jahren vorbei, und dass sie trotzdem oft als ausreichend gilt, ist der Grund für so viele unscharfe Icons.