So konvertieren Sie PNG in SVG

Der einfachste Weg, eine PNG in eine SVG zu konvertieren, ist die Verwendung eines PNG-zu-SVG-Konverters, der das Bild vektorisiert und seine Pixel in skalierbare Pfade und Formen umwandelt.

Es gibt jedoch einen wichtigen Unterschied.

PNG und SVG sind grundlegend verschiedene Bildformate. Ein PNG speichert ein Bild als Pixel, während ein SVG Grafiken mithilfe von Pfaden, Kurven und Formen beschreiben kann. Aus diesem Grund erfordert die Konvertierung einer PNG in eine nützliche SVG normalerweise eine Vektorisierung und nicht nur eine Änderung der Dateierweiterung.

Für eine schnelle Konvertierung:

1. Laden Sie Ihr PNG in einen PNG-zu-SVG-Konverter hoch.
2. Lassen Sie den Konverter die Formen, Farben und Kanten nachzeichnen.
3. Zeigen Sie das Vektorergebnis in der Vorschau an.
4. Laden Sie das SVG herunter.
5. Überprüfen Sie das SVG in einer größeren Ansicht und bearbeiten Sie die Pfade bei Bedarf.

Bei Logos, Symbolen, Illustrationen, Cliparts und anderen Grafiken mit klaren Kanten kann dieser Prozess hervorragende Ergebnisse liefern. Komplexe Fotos erfordern in der Regel eine stärkere Vereinfachung.

Was passiert, wenn Sie PNG in SVG konvertieren?

Ein PNG ist ein Rasterbild.

Das bedeutet, dass das Bild aus einem festen Raster einzelner Pixel besteht. Wenn es weit über seine ursprünglichen Abmessungen hinaus vergrößert wird, können diese Pixel sichtbar werden.

Ein SVG ist anders aufgebaut. SVG-Pfade können Befehle für Linien, Kurven, Bögen und andere Geometrien enthalten, anstatt sich auf ein festes Pixelraster zu verlassen.

Während der Vektorisierung analysiert die Software Bereiche wie:

• Kanten
• Formen
• Farben
• Kontrast
• Kurven
• Transparente Regionen

Anschließend wird versucht, diese Bereiche mithilfe von Vektorobjekten und -pfaden nachzubilden.

Das Ergebnis ist nicht einfach das gleiche PNG mit einer anderen Dateiendung. Es ist eine neue grafische Darstellung des Originalbildes.

Methode 1: PNG online in SVG konvertieren

Für die meisten Benutzer ist ein Online-PNG-zu-SVG-Konverter die schnellste Option.

Schritt 1: Wählen Sie Ihr PNG

Beginnen Sie mit der hochwertigsten Version des Bildes, das Sie haben. Klare Bilder mit deutlichen Kanten geben einem Vektorisierer normalerweise mehr nützliche Informationen zum Arbeiten als winzige, unscharfe oder stark komprimierte Bilder.

Schritt 2: Laden Sie das PNG hoch

Laden Sie Ihr Bild hoch oder ziehen Sie es in den PNG-zu-SVG-Konverter.

Schritt 3: Vektorisieren Sie das Bild

Starten Sie die Konvertierung.

Der Vektorisierer analysiert das Rasterbild und rekonstruiert seine sichtbaren Formen als Vektorpfade. Einige Vektorisierungssysteme können auch separate Farben oder Regionen analysieren und sie als individuelle Vektorformen nachbilden. Bildvektorisierungstools arbeiten häufig so, dass sie Grenzen, Farben und Kanten erkennen und sie in Pfade und Kurven übersetzen.

Schritt 4: Vorschau des SVG

Laden Sie das Ergebnis nicht herunter, ohne es zu überprüfen.

Schauen Sie genau hin:

• Gekrümmte Kanten
• Scharfe Ecken
• Kleiner Text
• Dünne Linien
• Transparente Bereiche
• Kleine isolierte Formen
• Farbgenauigkeit

Das Ziel ist nicht nur die Erstellung einer .svg-Datei. Das Ziel ist die Erstellung eines sauberen und nutzbaren Vektors.

Schritt 5: Laden Sie das SVG herunter

Sobald das Ergebnis richtig aussieht, laden Sie das SVG herunter.

Versuchen Sie, deutlich hineinzuzoomen. Die Vektorpfade sollten scharf bleiben, da ihre Geometrie in verschiedenen Größen gerendert werden kann.

Methode 2: PNG in SVG in Adobe Illustrator konvertieren

Adobe Illustrator bietet den „Bildnachzeichner“ (Image Trace) zum Konvertieren von Rastergrafiken in bearbeitbare Vektorpfade. Adobe positioniert Image Trace speziell für die Umwandlung von Raster- oder kontrastreichen Grafiken in Vektorgrafiken.

Schritt 1: Öffnen Sie das PNG

Öffnen Sie Illustrator und platzieren Sie Ihr PNG auf der Zeichenfläche. Wählen Sie das Bild aus.

Schritt 2: Öffnen Sie Bildnachzeichner

Wählen Sie „Bildnachzeichner“. Die von Ihnen gewählte Voreinstellung sollte vom Kunstwerk abhängen.

Beispielsweise erfordert ein schwarzes Logo nicht den gleichen Nachzeichnungsansatz wie eine detaillierte mehrfarbige Illustration.

Schritt 3: Passen Sie die Nachzeichnung an

Wichtige Steuerelemente können beeinflussen, wie komplex das endgültige SVG wird.

Der Image Trace-Workflow von Adobe enthält Steuerelemente für die Pfadanpassung, Ecken und Rauschen. Niedrigere Rauscheinstellungen können kleinere Details erfassen, während Pfad- und Eckeneinstellungen beeinflussen, wie genau die Nachzeichnung dem Originalbild folgt.

Mehr Details sind nicht immer besser. Das Nachzeichnen jeder winzigen Abweichung in einem PNG kann zu Hunderten oder Tausenden unnötiger Ankerpunkte führen.

Schritt 4: Erweitern Sie die Nachzeichnung

Wenn Sie mit dem Ergebnis zufrieden sind, erweitern Sie die Nachzeichnung (Umwandeln), sodass die Vektorformen zu bearbeitbaren Pfaden werden.

Schritt 5: Bereinigen Sie die Pfade

Untersuchen Sie Folgendes:

• Unebene Kurven
• Zusätzliche Formen
• Unerwünschte Hintergrundobjekte
• Übermäßige Ankerpunkte
• Winzige Artefakte

Wenn die nachgezeichnete Grafik zu viele Ankerpunkte enthält, bietet Illustrator unter Objekt → Pfad → Vereinfachen eine Option zur Reduzierung unnötiger Punkte, wobei versucht wird, die allgemeine Pfadform beizubehalten.

Schritt 6: Exportieren als SVG

Exportieren oder speichern Sie das fertige Kunstwerk als SVG.

Methode 3: Konvertieren von PNG in SVG in Inkscape

Inkscape bietet eine kostenlose Desktop-Option für die Vektorverfolgung. Die Funktion „Bitmap nachzeichnen“ (Trace Bitmap) kann Vektoren mithilfe von Ansätzen wie Helligkeits-Grenzwert, Kantenerkennung, Farbquantisierung und Mittellinien-Nachzeichnung erstellen.

Schritt 1: Importieren Sie die PNG

Öffnen Sie Inkscape und importieren Sie Ihre PNG.

Schritt 2: Wählen Sie das Bild aus

Klicken Sie auf die PNG, damit das Rasterbild ausgewählt wird.

Schritt 3: Öffnen Sie Bitmap nachzeichnen

Gehen Sie zu: Pfad → Bitmap nachzeichnen

Schritt 4: Wählen Sie eine Nachzeichnungsmethode

Der richtige Modus hängt von Ihrem Bild ab.

• Helligkeits-Grenzwert kann gut für einfache Silhouetten funktionieren.
• Kantenerkennung konzentriert sich auf sichtbare Konturen.
• Farbquantisierung kann helfen, Grenzen zwischen Farben nachzuzeichnen.
• Mittellinien-Nachzeichnung kann für bestimmte Strichzeichnungen nützlich sein.

Schritt 5: Vorschau des Ergebnisses

Passen Sie die Einstellungen an, bevor Sie die Nachzeichnung akzeptieren. Versuchen Sie, die wichtige Geometrie zu erfassen, ohne jede Unvollkommenheit auf Pixelebene zu reproduzieren.

Schritt 6: Entfernen Sie die ursprüngliche PNG

Der neu nachgezeichnete Vektor kann direkt über dem Rasterbild liegen. Verschieben Sie den Vektor kurz, um sicherzustellen, dass ein neues Objekt erstellt wurde, und entfernen Sie dann die ursprüngliche Bitmap, wenn Sie sie nicht mehr benötigen. Im eigenen Nachzeichnungsleitfaden von Inkscape wird darauf hingewiesen, dass eine erfolgreiche nachgezeichnete Version fast identisch aussehen kann, während sie direkt über der Quell-Bitmap liegt.

Schritt 7: Als SVG speichern

Speichern Sie den fertigen Vektor als SVG.

Methode 4: Das PNG manuell nachzeichnen

Eine automatische Vektorisierung ist praktisch, aber nicht immer die beste Methode. Bei einem einfachen Logo, Symbol oder geometrischen Zeichen kann ein manuelles Neuzeichnen des Bildes manchmal zu einer saubereren SVG führen.

Anstatt Software Dutzende von Punkten um eine Kurve generieren zu lassen, kann ein Designer dieselbe Kurve mit nur wenigen sorgfältig positionierten Ankerpunkten nachbilden.

Manuelles Nachzeichnen ist besonders nützlich, wenn:

• Das Quellbild ist verschwommen
• Das Logo enthält einfache Geometrie
• Exakte Kurven sind wichtig
• Automatisches Nachzeichnen erzeugt zu viele Knoten
• Kleine Typografie muss neu erstellt werden
• Der Vektor wird für die professionelle Produktion verwendet

Automatisches Nachzeichnen bietet Geschwindigkeit. Manuelles Nachzeichnen bietet Kontrolle.

Welche PNG-Bilder lassen sich am besten in SVG konvertieren?

Nicht jedes PNG sollte auf die gleiche Weise vektorisiert werden.

Logos

Logos sind einer der besten Kandidaten für die PNG-zu-SVG-Konvertierung, insbesondere wenn sie Volltonfarben und saubere Grenzen enthalten.

Symbole (Icons)

Einfache Symbole lassen sich normalerweise gut vektorisieren, da sie eine begrenzte Anzahl von Formen enthalten.

Strichzeichnungen (Line Art)

Schwarz-Weiß-Illustrationen, Unterschriften und Strichzeichnungen können oft effizient nachgezeichnet werden.

Clipart

Flache Illustrationen mit klar getrennten Farbregionen können gute Vektorergebnisse liefern.

Text

Text kann vektorisiert werden, aber die Neuerstellung des Textes mit der Originalschriftart kann zu saubereren Pfaden führen als das Nachzeichnen eines Screenshot mit geringer Auflösung.

Fotos

Fotos sind schwieriger.

Ein Foto kann Tausende oder Millionen von Variationen in Farbe, Textur, Beleuchtung und Detail aufweisen. Die Reproduktion all dieser Variationen als separate Vektorformen kann zu einer extrem komplizierten SVG führen.

Bei Fotos besteht das Ziel oft darin, eine stilisierte Vektorinterpretation zu erstellen und nicht eine exakte mathematische Rekonstruktion jedes sichtbaren Pixels. CorelDRAW stellt ebenfalls fest, dass sehr detaillierte Fotografien nicht immer praktische Kandidaten für die direkte Vektorisierung sind.

So konvertieren Sie PNG in SVG ohne Qualitätsverlust

Das SVG selbst lässt sich sauber skalieren, aber das bedeutet nicht automatisch, dass die Vektorisierung das PNG genau wiedergibt. Die Qualität des Ergebnisses hängt stark vom Quellbild und dem Nachzeichnungsprozess ab.

• Beginnen Sie mit einer großen, klaren PNG: Eine klarere Quelle bietet dem Vektorisierer bessere Grenzen zur Erkennung.
• Verwenden Sie starken Kontrast: Eine klare Trennung zwischen Motiv und Hintergrund erleichtert die Kantenerkennung.
• Entfernen Sie unnötige Hintergründe: Wenn der Hintergrund nicht Teil des Kunstwerks ist, entfernen oder ignorieren Sie ihn vor dem Nachzeichnen. Andernfalls kann er zu einer weiteren Vektorform werden.
• Vermeiden Sie das Nachzeichnen von Komprimierungsartefakten: Pixelrauschen, Unschärfe und Komprimierungsspuren können als echte Formen interpretiert werden.
• Verwenden Sie nach Möglichkeit weniger Farben: Bei flachen Kunstwerken kann die Reduzierung unnötiger Farbvariationen den Vektor erheblich vereinfachen.
• Reizen Sie nicht jede Detaileinstellung aus: Mehr Details bedeuten oft mehr Pfade und mehr Ankerpunkte.

Der beste Vektor ist nicht unbedingt der mit der höchsten Anzahl von Knoten. Es ist die einfachste Geometrie, die das beabsichtigte Kunstwerk genau darstellt.

Woran erkennen Sie, ob Ihre SVG wirklich vektorisiert ist?

Ein nützlicher Test ist das Öffnen der SVG in einem Vektoreditor.

Wählen Sie einen Teil des Kunstwerks aus. Wenn Sie bearbeitbare Vektorformen, Pfade und Ankerpunkte sehen können, weist die Grafik eine Vektorstruktur auf.

Wenn sich die SVG wie ein einzelnes rechteckiges Bitmap-Bild verhält, enthält sie möglicherweise ein eingebettetes Rasterbild anstelle einer nützlichen nachgezeichneten Version des Kunstwerks.

Sie können auch hineinzoomen. Eine ordnungsgemäß rekonstruierte Vektorform sollte geometrisch scharf bleiben, anstatt das Pixelraster der ursprünglichen PNG zu offenbaren.

Warum hat meine PNG-zu-SVG-Datei so viele Knoten?

Die automatische Nachzeichnung folgt sichtbaren Änderungen in einem Bild.

Wenn die Quelle raue Kanten, Anti-Aliasing, Schatten, Textur, JPEG-ähnliche Artefakte, komplexe Farbverläufe oder kleine Details enthält, erstellt der Vektorisierer möglicherweise eine große Anzahl von Ankerpunkten in dem Versuch, diese Variationen nachzuzeichnen.

Dies kann die Bearbeitung der SVG erschweren und in extremen Fällen für Design-, CAD- oder Schneidesoftware schwerer zu verarbeiten machen. Benutzer, die mit nachgezeichneten Vektoren arbeiten, berichten häufig über Leistungsprobleme, die durch Kunstwerke mit Tausenden von Ankerpunkten verursacht werden.

PNG vs SVG: Was sollten Sie verwenden?

Verwenden Sie PNG, wenn Sie Folgendes benötigen: Pixelbasierte Bilder, Screenshots, detaillierte Fotos, komplexe Texturen oder Rastertransparenz.

Verwenden Sie SVG, wenn Sie Folgendes benötigen: Logos, Symbole, Illustrationen, Strichzeichnungen, Schneidedateien, skalierbare Webgrafiken oder bearbeitbare Vektorformen.

Keines der Formate ist allgemein besser. Sie lösen unterschiedliche Probleme.

Häufig gestellte Fragen

Konvertieren Sie Ihr PNG in SVG

Wenn Sie den schnellsten Arbeitsablauf wünschen, beginnen Sie mit unserem PNG-zu-SVG-Konverter.

Laden Sie Ihr Bild hoch, wandeln Sie es in Vektorgrafiken um, zeigen Sie das Ergebnis in der Vorschau an und laden Sie das SVG herunter.

Für mehr Kontrolle über das Ergebnis fahren Sie mit unserer Anleitung Wie man ein Bild vektorisiert fort oder lernen Sie, wie man SVG-Knoten reduziert, wenn Ihr Vektor mehr Ankerpunkte enthält, als Sie benötigen.