> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVGcode: Die exportierten Vektorformen überprüfen > Zeichnen Sie ein flaches Farbbild in SVGcode nach, kopieren Sie die eigentliche SVG-Datei und überprüfen Sie deren Palette, innere Öffnungen, Hintergrund und Leinwand, bevor Sie die Datei in Ihrem Design verwenden. Source: https://perfectvector.com/de/blog/svgcode-image-tracing Language: de Author: Irene Kim Published: 2026-11-02T08:00:00+09:00 Für die SVGcode-Bildverfolgung laden Sie Ihre Rastergrafik, wählen Sie Color SVG oder Monochrome SVG, passen Sie die Verfolgung an und überprüfen Sie dann die exportierte SVG-Datei selbst. Überprüfen Sie die Farben, die Innenlöcher und die Leinwand, bevor Sie es annehmen. In unserem Flat-Color-Test erzeugte SVGcode echte Pfade und behielt die Öffnung des Rahmens bei, aber beide exportierten Varianten änderten die ursprüngliche Palette und verwendeten eine andere Leinwand. Wenn Sie einen anderen Browser-Workflow für ein Bild wünschen, das Sie bereits haben, können Sie es [kostenlos in PerfectVector in der Vorschau anzeigen](https://perfectvector.com/de/image-to-vector). Sie müssen das Ergebnis entsperren, bevor Sie es bearbeiten oder exportieren können. Verwenden Sie unten die gleichen Form- und Farbkaros; In dieser exemplarischen Vorgehensweise wird die Ausgabequalität der beiden Tools nicht verglichen. ## Welche SVGcode-Traces und was Sie vorbereiten müssen [SVGcode](https://svgco.de/) konvertiert Rasterbilder in SVG-Vektorgrafiken. Der Autor beschreibt eine Potrace-basierte WebAssembly-Implementierung, die Farbe für Farbe verfolgt; Das [offizielle Quell-Repository](https://github.com/tomayac/SVGcode) dokumentiert diese Implementierung. Das erklärt den Ansatz, aber die exportierte Datei ist der Beweis für Ihr eigenes Kunstwerk. Beginnen Sie mit einer Kopie eines PNG- oder anderen unterstützten Rasterbilds, einem Browser, der auf SVGcode zugreifen kann, und der Berechtigung zum Verarbeiten des Bildmaterials. Für die Zwischenablage-Route unten muss Ihr Browser den Zugriff auf die Bild-Zwischenablage zulassen. Halten Sie einen Nur-Text-Editor zum Speichern kopierter SVG-Markups sowie einen SVG-Viewer oder -Editor für die Vollständigkeitsprüfung bereit. Eine flache Markierung mit deutlichen Farbbereichen ist eine nützliche erste Eingabe. Notieren Sie sich die Farben und Öffnungen, die Sie beibehalten müssen, bevor Sie die Einstellungen ändern. Entscheiden Sie für ein Foto oder einen weichen Farbverlauf, welche Details Sie vereinfachen können. Die Ablaufverfolgung kann nicht jede beabsichtigte Grenze aus Pixeln ableiten. Im [Leitfaden zur Bildvektorisierung](https://perfectvector.com/de/blog/what-is-image-vectorization) wird diese Raster-zu-Pfad-Entscheidung ausführlicher erläutert. ## 1. Laden Sie das Bild und wählen Sie einen Nachverfolgungsmodus Öffnen Sie SVGcode und laden Sie Ihr Bild. Legen Sie für die von uns getestete Route das eigentliche Bild in die Zwischenablage und wählen Sie **Bild einfügen**. Vergewissern Sie sich, dass in der Vorschau das gewünschte Bild angezeigt wird, einschließlich transparenter Bereiche und kleiner Innendetails, bevor Sie etwas anpassen. Wählen Sie **Color SVG**, wenn separate Farbbereiche wichtig sind. Verwenden Sie **Monochrome SVG**, wenn eine einfarbige Silhouette das gewünschte Ergebnis ist. In dieser exemplarischen Vorgehensweise wurde durchgehend Color SVG verwendet; Es wird kein separater Schwarzweißtest gemeldet. Lassen Sie das Originalraster neben der Vorschau geöffnet. Beurteilen Sie die Spur nicht nur danach, ob ihre Kanten bei Vergrößerung glatt aussehen. Eine leere Mitte, eine kleine Lücke oder eine bewusst getrennte Farbe können mehr ausmachen als ein glatter Außenrand. ## 2. Ändern Sie die Einstellungen unter Berücksichtigung eines sichtbaren Details Beginnen Sie mit einem Fehler, auf den Sie hinweisen können, z. B. unerwünschte Punkte außerhalb des Bildmaterials oder eine kleine Öffnung, die verschwindet. Ändern Sie ein Steuerelement, warten Sie, bis die Vorschau aktualisiert wird, und vergleichen Sie dann dieses Detail erneut. **Flecken unterdrücken** entfernt kleine Bereiche. Das Erhöhen kann bei vereinzelten Punkten hilfreich sein, aber überprüfen Sie kleine Details, die Sie behalten wollten. **Eingabebild posten** reduziert Farbabweichungen vor dem Nachzeichnen; Bei der Posterisierung werden Farben in weniger Ebenen gruppiert. In der [SVGcode-Komplettlösung](https://web.dev/case-studies/svgcode?hl=en) des Autors werden sowohl die Steuerung als auch die Posterisierung pro Kanal erläutert. Die aktuelle App stellt auch Strichbreite und Experteneinstellungen zur Verfügung. Lassen Sie nicht benötigte Steuerelemente in Ruhe, bis Sie über einen Baseline-Export verfügen. Bei einer großen Anzahl gleichzeitiger Änderungen ist es schwierig zu sagen, welche Änderung das Ergebnis verändert hat. **Illustration** ![Konzeptpalette, offener Rahmen und Zeichenfläche zur Veranschaulichung von drei separaten SVG-Inspektionsprüfungen](https://perfectvector.com/blog/svgcode-image-tracing/inspection-checklist.webp) *Palette, Löcher und Leinwand sind separate Kontrollen.* ### Was unser ursprünglicher Flat-Color-Test ergab Wir haben ein 512 × 512 PNG mit einem transparenten Hintergrund, einem marineblauen rechteckigen Rahmen mit einer Öffnung, einem goldenen Rechteck und einem überlappenden blaugrünen Rechteck erstellt. Wir haben das Originalbild in die öffentliche SVGcode-App eingefügt, Color SVG, Flecken unterdrücken 2 und Strichbreite 0 verwendet und dann zwei tatsächliche SVG-Ausgaben kopiert. Das erste verwendete Posterize-Eingabebild mit Rot, Grün und Blau in jeweils 7 Schritten und Alpha in 1 Schritt. Bei der zweiten Funktion wurde dasselbe Bild verwendet, wobei die Option „Eingabebild posterisieren“ deaktiviert war. In diesem zweiten Zustand wurden die RGB- und Alpha-Steuerelemente deaktiviert. | Überprüfen | Original PNG | Posterisierung auf | Posterisierung aus | | ------------------------ | ------------------------------- | ----------------------------------- | ----------------------------------- | | Einfarbige Regionsfarben | `#152b46`, `#e6aa3c`, `#3e948d` | Schwarz, `#d4aa00`, blaugrün | `#002a2a`, `#d4aa2a`, `#2a8080` | | Rahmenöffnung | Transparent | Im gerenderten SVG öffnen | Im gerenderten SVG öffnen | | Leinwand | 512 × 512 Pixel | `viewBox="0 0 1024 1024"` | `viewBox="0 0 1024 1024"` | | SVG-Struktur | Rastereingabe | Drei Pfade, kein eingebettetes Bild | Drei Pfade, kein eingebettetes Bild | Durch das Deaktivieren der Posterisierung wurden **nicht** die exakten Originalfarben dieses Bildes wiederhergestellt. Beide SVGs platzierten das Kunstwerk auch auf einer anderen Leinwand. Hierbei handelt es sich um Beobachtungen aus einem kontrollierten Bild, nicht um einen Benchmark oder eine Vorhersage für jede Datei. Dies sind gute Gründe, den tatsächlichen Export zu prüfen, bevor Sie ihn als Farb- oder Layoutmaster verwenden. ## 3. Kopieren Sie die SVG-Datei und behalten Sie das tatsächliche Markup bei Wenn die Vorschau fertig ist, wählen Sie **SVG kopieren**. Warten Sie, bis die **SVG-Optimierung** abgeschlossen ist, bevor Sie die Zwischenablage lesen oder einfügen. Bei unserem Durchlauf war ein unmittelbarer Lesevorgang in der Zwischenablage leer; Beim Lesen nach der Optimierung wurde das SVG-Markup zurückgegeben. Fügen Sie das Markup in einen Nur-Text-Editor ein und speichern Sie es mit der Erweiterung `.svg`, z. B. `artwork-trace.svg`. Bestätigen Sie, dass es ein ``-Element und ein abschließendes ``-Element und keinen Screenshot oder ein Rich-Text-Dokument enthält. Behalten Sie für jede Einstellungsvariante einen separaten Dateinamen bei, damit der spätere Export Ihre Referenz nicht ersetzt. Dies ist die Route mit kopiertem Markup, die wir abgeschlossen haben. SVGcode zeigt auch „SVG speichern“ an, diese exemplarische Vorgehensweise beweist jedoch nicht das Verhalten des nativen Dateispeicherdialogs oder den erfolgreichen Import in eine andere App. ## 4. Überprüfen Sie Farben, Öffnungen und Leinwand in der gespeicherten Datei Öffnen Sie die gespeicherte SVG-Datei in einem Viewer oder Editor neben der unberührten Quelle. Überprüfen Sie diese separat: 1. **Palette:** Vergleichen Sie wichtige Füllungen mit den beabsichtigten Farbwerten. Eine Spur kann drei Bereiche beibehalten und gleichzeitig alle drei Farben ändern. Wenn genaue Farben erforderlich sind, stellen Sie die beabsichtigten Füllungen in Ihrem Editor wieder her und überprüfen Sie sie. 2. **Eröffnungen:** Platzieren Sie einen kontrastierenden Hintergrund hinter dem Kunstwerk. Der neue Hintergrund sollte durch die vorgesehenen Löcher und den Außenraum sichtbar sein. Eine weiß gestrichene Form kann wie eine Öffnung auf Weiß aussehen. Der [transparente SVG-Hintergrundleitfaden](https://perfectvector.com/de/blog/transparent-background-svg) zeigt, wie man die beiden unterscheidet. 3. **Leinwand:** Überprüfen Sie die Dokumentgrenzen sowie die Grenzen der Grafik. Die **viewBox** definiert das interne Koordinatenrechteck der SVG; es ist kein Versprechen physischer Dimensionen. Überprüfen Sie die Ränder und die Größe in der App, in der Sie die Datei verwenden möchten. 4. **Geometrie:** Wählen Sie wichtige Bereiche einzeln aus und versuchen Sie es mit einer kleinen Umfärbung oder Verschiebung, und machen Sie es dann rückgängig. Eine Datei, die Pfade enthält, muss für Ihren beabsichtigten Job noch auf Bearbeitbarkeit geprüft werden. SVG kann eine Öffnung mit mehreren Konturen innerhalb eines zusammengesetzten Pfads darstellen; Der [SVG-Pfadstandard](https://www.w3.org/TR/SVG2/paths.html) beschreibt Unterpfade und Lücken. Sie benötigen nicht für jede sichtbare Grenze ein eigenes Pfadelement. Umgekehrt beweist eine geringe Pfadanzahl allein nicht, dass alle beabsichtigten Details erhalten geblieben sind. Unsere Abschlussprüfung erfolgte digital: Überprüfen Sie das kopierte Markup und rendern Sie die tatsächlichen SVGs. Öffnung und Außenraum waren in beiden Varianten transparent. Es wurde kein Zieleditor-Import-, Druck- oder Ausschneideergebnis getestet. Für eine umfassendere Übergabeüberprüfung verwenden Sie die [Vector Trace Quality Scorecard](https://perfectvector.com/de/blog/evaluate-vector-trace-quality). ## Wiederherstellung nach der ersten fehlgeschlagenen Prüfung | Was Sie sehen | Was als nächstes zu überprüfen ist | | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Es bleiben vereinzelte Punkte übrig | Erhöhen Sie „Unterdrückung von Flecken“ vorsichtig und überprüfen Sie dann absichtlich kleine Teile erneut. | | Eine kleine Funktion verschwindet | Vergleichen Sie die Quelle und eine niedrigere Speckle-Einstellung, bevor Sie unabhängige Steuerungen ausprobieren. | | Farben unterscheiden sich | Vergleichen Sie exportierte Füllungen mit Ihrer Palette. Gehen Sie nicht davon aus, dass durch Deaktivieren der Posterisierung die exakten Werte wiederhergestellt werden. | | Ein Loch sieht gefüllt aus | Testen Sie vor einem kontrastierenden Hintergrund und prüfen Sie dann, ob die Innenkontur vorhanden ist. | | Das Kunstwerk weist unerwartete Ränder auf | Vergleichen Sie die Grenzen von Leinwand und Bildmaterial. Stellen Sie die erforderliche Dokumentgröße in Ihrer Ziel-App ein. | | Das Kopieren von SVG ergibt nichts Brauchbares | Warten Sie auf die Optimierung, kopieren Sie erneut und überprüfen Sie den eingefügten Text, bevor Sie ihn speichern. | | „Bild einfügen“ ist nicht verfügbar | Überprüfen Sie die Berechtigung für die Zwischenablage und die anderen sichtbaren Bildladeoptionen der App in Ihrem Browser. | Wenn ein Loch weiterhin falsch ist, trennt der [SVG-Loch-Fehlerbehebungsleitfaden](https://perfectvector.com/de/blog/svg-holes-fill-in) fehlende Spurgeometrie von der Interpretation der Füllregeln. Informationen zu einem Desktop-Trace-Workflow mit direkten Bereinigungstools finden Sie unter [Inkscape Trace Bitmap](https://perfectvector.com/de/blog/inkscape-trace-bitmap). Behalten Sie das Originalbild und die akzeptierte SVG-Datei bei. Notieren Sie alle Palettenkorrekturen oder Leinwandanpassungen, die die nächste Person benötigen wird. Wenn Sie Ihr vorhandenes Kunstwerk in einem anderen Browser-Tool ausprobieren möchten, [starten Sie kostenlos mit PerfectVector](https://perfectvector.com/de/image-to-vector) und überprüfen Sie die Silhouette und Öffnungen der Vorschau. ## FAQ **Kann SVGcode ein PNG in echte SVG-Pfade zurückverfolgen?** Ja. Unser ursprüngliches, flaches PNG erzeugte ein kopiertes SVG-Markup mit drei Pfaden und keinem eingebetteten Bild. Überprüfen Sie Ihre eigene exportierte Datei. Dieses Ergebnis garantiert nicht die gleiche Struktur oder Wiedergabetreue für jedes Bild. **Behält die Deaktivierung der Posterisierung die Originalfarben bei?** Dies war in unserem kontrollierten Test nicht der Fall. Beide Einstellungen veränderten die ursprünglichen Volltonwerte. Vergleichen Sie die exportierten Füllungen mit Ihrer beabsichtigten Palette und korrigieren Sie sie, wenn es auf die exakte Farbe ankommt. **Warum unterscheidet sich die SVG-Leinwand von meiner PNG-Größe?** Das kopierte SVG in unserem Test verwendete eine 1024 × 1024 ViewBox aus einer 512 × 512 Eingabe. Überprüfen Sie die exportierte Leinwand, die Grafikgrenzen und die beabsichtigte Anzeigegröße separat, anstatt davon auszugehen, dass die ursprünglichen Pixelabmessungen beibehalten werden. **Woher weiß ich, dass eine Öffnung transparent ist?** Platzieren Sie einen kontrastierenden Hintergrund hinter der gespeicherten SVG-Datei. Es sollte durch die Öffnung sichtbar sein. Ist dies nicht der Fall, prüfen Sie, ob die Spur ihre Innenkontur verloren hat oder dort eine gemalte Form erzeugt hat. ## Quellen 1. [SVGcode-App](https://svgco.de/) – Bildverfolgungsschnittstelle und aktuelle Steuerelemente. 2. [SVGcode-Autor-Komplettlösung auf web.dev](https://web.dev/case-studies/svgcode?hl=en) – farbliche Nachverfolgung, Speckle-Unterdrückung und Posterisierung. 3. [Offizielles SVGcode-Repository](https://github.com/tomayac/SVGcode) – Projektimplementierung und Quelldokumentation. 4. [W3C SVG-Pfade](https://www.w3.org/TR/SVG2/paths.html) – zusammengesetzte Pfade, Unterpfade und Öffnungen. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/svgcode-image-tracing) - [Potrace: PNG zu SVG mit Transparenz und erhaltenen Löchern](https://perfectvector.com/de/blog/potrace-png-to-svg.md) - [Beste AI-Vektorisierer 2026: Empfehlungen nach Einsatzzweck](https://perfectvector.com/de/blog/best-ai-vectorizers-2026.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)