So reduzieren Sie SVG-Knoten

Wenn Ihre SVG zu viele Knoten enthält, vereinfachen Sie die Vektorpfade, anstatt Punkte willkürlich zu löschen.

Der sicherste Arbeitsablauf ist:

1. Speichern Sie eine Kopie der ursprünglichen SVG.
2. Identifizieren Sie, welche Pfade übermäßige Knoten enthalten.
3. Vereinfachen Sie jeweils einen Pfad oder Abschnitt.
4. Vergleichen Sie den vereinfachten Pfad mit dem Original.
5. Schützen Sie wichtige Ecken und enge Kurven.
6. Entfernen Sie verbleibende unnötige Punkte manuell.
7. Optimieren Sie das SVG-Markup, nachdem die Geometrie bereinigt wurde.

In Adobe Illustrator können Sie Objekt → Pfad → Vereinfachen verwenden. Die automatische Vereinfachungsfunktion (Auto-Simplify) von Adobe wurde speziell entwickelt, um unnötige Ankerpunkte zu entfernen und den Pfad gleichzeitig zu glätten.

In Inkscape können Pfade mithilfe von Knoten und ihren Bézier-Griffen (Handles) vereinfacht und bearbeitet werden. Inkscape bietet auch eine Aktion zur Pfadvereinfachung zum Entfernen zusätzlicher Knoten.

Es gibt jedoch eine wichtige Warnung: Weniger Knoten sind nicht automatisch besser. Das Ziel besteht darin, redundante Knoten zu entfernen und gleichzeitig die beabsichtigte Geometrie beizubehalten.

Was sind SVG-Knoten?

Das Wort „Knoten“ kann je nach Software oder technischem Kontext etwas unterschiedliche Bedeutungen haben.

In Vektoreditoren wie Inkscape sind Knoten Punkte auf einem Pfad, die dabei helfen, seine Form zu definieren. Adobe Illustrator nennt diese im Allgemeinen Ankerpunkte.

SVG-Pfaddaten selbst beschreiben die Geometrie durch Befehle wie Bewegen, Zeichnen von Linien, Erstellen von Bézierkurven und Zeichnen von Bögen.

In diesem Leitfaden meinen wir mit SVG-Knoten in erster Linie die bearbeitbaren Ankerpunkte, die Vektorpfade definieren. Das unterscheidet sich von DOM-Knoten oder SVG-Elementen in der XML-Dokumentstruktur der SVG.

Warum hat meine SVG so viele Knoten?

Übermäßige Knoten resultieren normalerweise aus der Art und Weise, wie der Vektor erstellt wurde.

Automatische Bildnachverfolgung (Image Tracing)

Dies ist eine der häufigsten Ursachen. Wenn ein PNG oder JPG automatisch vektorisiert wird, versucht der Tracer, den sichtbaren Pixelgrenzen zu folgen. Eine raue Rasterkante kann zu einer Vektorkurve mit Dutzenden von Ankerpunkten werden.

Qualitativ minderwertige Quellbilder

Unscharfe oder verpixelte Bilder weisen unregelmäßige Kanten auf. Das Nachverfolgungssystem wandelt diese Unregelmäßigkeiten möglicherweise in Geometrie um.

Zu viele Nachverfolgungsdetails

Hohe Detaileinstellungen weisen den Tracer an, kleinere visuelle Variationen beizubehalten. Das erhöht häufig die Anzahl der Pfade und Punkte.

Zu viele Farben

Jeder zusätzliche Farbbereich kann möglicherweise zu einem separaten Vektorobjekt werden.

Freihandzeichnen

Beim Freihandzeichnen können viel mehr Punkte entstehen als bei einer sorgfältig konstruierten Bézierkurve.

Warum SVG-Knoten reduzieren?

Das Entfernen unnötiger Knoten kann verschiedene Teile des Workflows verbessern.

• Einfachere Bearbeitung: Eine Kurve mit fünf gut positionierten Punkten ist in der Regel einfacher umzuformen als dieselbe Kurve, die durch 100 winzige Punkte dargestellt wird.
• Glattere Kurven: Mehr Punkte erzeugen nicht unbedingt einen glatteren Pfad. Schlecht positionierte Punkte können Unebenheiten und Unregelmäßigkeiten verursachen.
• Bessere Softwareleistung: Eine große Anzahl von Ankerpunkten kann einen spürbaren Bearbeitungsaufwand verursachen. Benutzer haben über Verzögerungen, hohe Speichernutzung und Abstürze berichtet.
• Sauberere CAD- und Schneide-Workflows: Dichte SVG-Pfade können in nachgeschalteter Software wie Fusion 360, SolidWorks und Laserschneideprozessen problematisch werden.
• Möglicherweise kleinere Dateien: Einfachere Pfaddaten können die Menge der in einer SVG gespeicherten Koordinateninformationen reduzieren.

Methode 1: Übermäßige Knoten während der Vektorisierung vermeiden

Der beste Zeitpunkt zum Reduzieren von Knoten ist oft, bevor sie überhaupt erstellt werden. Wenn Ihre SVG aus einem PNG oder JPG stammt, kehren Sie zur Nachzeichnungsphase (Tracing) zurück.

Anstatt mit maximaler Detailgenauigkeit nachzuzeichnen:

• Unnötige Farben reduzieren
• Glättung erhöhen
• Winziges Rauschen ignorieren
• Ein saubereres Quellbild verwenden
• Zuerst den Hintergrund entfernen
• Nur die Geometrie nachzeichnen, die Sie tatsächlich benötigen

Ein saubereres Nachzeichnen ist normalerweise besser, als jedes Detail nachzuzeichnen und hinterher zu versuchen, Tausende von Punkten zu reparieren. Erfahren Sie mehr in unserem PNG-zu-SVG-Konvertierungsleitfaden.

Methode 2: Ankerpunkte in Adobe Illustrator reduzieren

Illustrator verfügt über eine spezielle Funktion zum Vereinfachen.

1. Pfad auswählen: Wählen Sie das Objekt aus, das Sie vereinfachen möchten.
2. Vereinfachen öffnen: Gehen Sie zu: Objekt → Pfad → Vereinfachen
3. Vorschau der Änderungen: Beurteilen Sie die Vereinfachung nicht nur nach der Anzahl der entfernten Punkte. Achten Sie auf Ecken, kleine Kerben, enge Kurven und Symmetrie.
4. Automatische Vereinfachung vorsichtig verwenden: Die automatische Vereinfachung (Auto-Simplify) von Adobe entfernt automatisch unnötige Ankerpunkte und glättet Pfade. Verwenden Sie für komplexere Kunstwerke die verfügbaren Steuerelemente für die Vereinfachung.
5. Ergebnis prüfen: Wechseln Sie nach Möglichkeit zwischen der ursprünglichen und der vereinfachten Version hin und her.

Methode 3: SVG-Knoten in Inkscape reduzieren

Inkscape bietet sowohl automatische Vereinfachung als auch manuelle Knotenbearbeitung.

1. Erstellen Sie ein Backup: Behalten Sie den ursprünglichen Pfad vor dem Vereinfachen bei, da die Vereinfachung die Geometrie ändert.
2. Wählen Sie den Pfad aus: Wählen Sie das Objekt mit den unnötigen Knoten.
3. Vereinfachen Sie den Pfad: Verwenden Sie die Vereinfachungsfunktion von Inkscape (Pfad → Vereinfachen).
4. Vermeiden Sie wiederholte aggressive Vereinfachungen: Wiederholte Vereinfachung kann die Form zunehmend verändern.
5. Wechseln Sie zum Knotenwerkzeug: Überprüfen Sie den verbleibenden Pfad manuell. Löschen Sie eindeutig redundante Knoten und passen Sie benachbarte Griffe (Handles) an.

Methode 4: Unnötige Knoten manuell entfernen

Eine automatische Vereinfachung ist nicht für jedes Design optimal. Bei Logos, Schriftzügen und geometrischen Kunstwerken kann eine manuelle Bereinigung für bessere Kontrolle sorgen.

• Ecken erhalten: Eine scharfe Ecke benötigt normalerweise einen Ankerpunkt beim Richtungswechsel. Entfernen Sie ihn nicht nur, um die Anzahl zu verringern.
• Kurven-Extrema beibehalten: Wichtige Wendepunkte (oben, unten, links und rechts) sind häufig nützliche Ankerpositionen.
• Bézier-Griffe verwenden: Die Griffe eines Knotens können große Abschnitte einer glatten Kurve beschreiben.
• Punkte zwischen glatten Abschnitten löschen: Wenn mehrere Anker auf einer fast identischen Kurve liegen, können einige redundant sein. Entfernen Sie einen und passen Sie benachbarte Griffe an.

Methode 5: Extrem unordentliche Pfade neu zeichnen

Manchmal dauert das Bereinigen länger als die Rekonstruktion. Wenn eine einfache Logoform nach dem automatischen Nachzeichnen mehrere hundert Punkte enthält, kann es effizienter sein, dieselbe Form manuell mit dem Zeichenstift- oder Bézier-Werkzeug neu zu zeichnen.

Optimieren Sie schlechte Geometrie nicht endlos, wenn sich saubere Geometrie schnell neu erstellen lässt.

Methode 6: Die ursprüngliche Nachzeichnung reparieren

Untersuchen Sie bei nachgezeichneten SVGs, warum die überschüssigen Knoten aufgetreten sind.

Ein besserer Prozess könnte sein: Sauberes Raster → Farben vereinfachen → vektorisieren → Pfade prüfen → leichte Bereinigung anstatt: Schlechtes Raster → Vektorisierung mit maximalen Details → Tausende von Knoten → aggressive Vereinfachung.

Methode 7: Den SVG-Code optimieren

Geometriebereinigung und SVG-Code-Optimierung sind verwandte, aber unterschiedliche Aufgaben.

Ein Tool wie SVGO kann redundante Informationen entfernen oder transformieren, einschließlich Metadaten, Kommentare, versteckte Elemente und ineffiziente Werte, ohne das gerenderte Ergebnis absichtlich zu ändern. Dies kann den SVG-Code kleiner und sauberer machen.

SVG-Knoten vs. SVG-Elemente: Was ist der Unterschied?

Betrachten Sie eine SVG, die einen <path> enthält. Das ist ein SVG-Grafikelement. Der Wert d innerhalb des Pfades kann jedoch viele Linien- und Kurvensegmente beschreiben.

Daher gibt es zwei verschiedene Optimierungsfragen:

• Habe ich zu viele Ankerpunkte innerhalb meiner Pfade? (Geometrie)
• Habe ich zu viele SVG-Elemente oder unnötige Codestrukturen? (Markup)

Sie erfordern unterschiedliche Lösungen.

Wie viele Knoten sollte eine SVG haben?

Es gibt keine universelle maximale Knotenanzahl. Ein einfaches Symbol benötigt möglicherweise nur sehr wenige, während eine detaillierte Illustration durchaus Hunderte benötigen kann.

Anstatt auf eine willkürliche Zahl abzuzielen, fragen Sie: Trägt jeder verbleibende Punkt sinnvoll zur Form bei?

Warum ruiniert „Vereinfachen“ meine SVG?

Vereinfachung ist eine Annäherung. Probleme treten auf, wenn die Toleranz zu aggressiv eingestellt ist. Möglicherweise sehen Sie abgerundete Ecken, abgeflachte Kurven, verzerrte Beschriftungen oder fehlende Details.

Die Lösung besteht nicht unbedingt darin, eine Vereinfachung zu vermeiden. Stattdessen: weniger vereinfachen, selektiv vereinfachen und wichtige Geometrie manuell schützen.

So reduzieren Sie Knoten ohne Verlust scharfer Ecken

Ecken gehören zu den Details, die durch automatische Vereinfachung am einfachsten beschädigt werden können.

Versuchen Sie diesen Workflow:

1. Duplizieren Sie die ursprüngliche Form.
2. Identifizieren Sie wichtige Ecken.
3. Konservativ vereinfachen.
4. Vergleichen Sie die Eckpositionen.
5. Stellen Sie verlorene Ecken wieder her oder erstellen Sie sie manuell neu.

Vereinfachen Sie glatte Abschnitte aggressiver als scharfe Abschnitte.

Häufig gestellte Fragen

Erstellen Sie sauberere SVG-Pfade

Ein gutes SVG definiert sich nicht über die Anzahl seiner Knoten. Es definiert sich darüber, ob die Geometrie genau, editierbar und nicht komplizierter als nötig ist.

Beginnen Sie mit unserem Leitfaden zu Wie man ein Bild vektorisiert, wenn Sie das SVG von Grund auf neu erstellen, oder lesen Sie Wie man PNG in SVG konvertiert für den vollständigen Raster-zu-Vektor-Workflow.