Warum dein SVG zu viele Knoten hat und wie du das behebst

Ein SVG hat zu viele Knoten, wenn die Vektorisierung jeder Pixelstufe an einer Kante folgt, statt eine glatte Kurve zu ziehen. Ein Kreis, der vier oder acht Knoten bräuchte, endet mit sechzig. Die Datei wird schwer, das Bearbeiten wird mühsam, und Schneideplotter und Laser werden langsam und ruckeln auf den winzigen Segmenten.

Die Lösung: neu vektorisieren, mit Einstellungen, die glatte Kurven bevorzugen, also weniger Knoten, flachere Kurven, weniger Farben und keine Sprenkel. Ein vorhandenes SVG nachträglich zu vereinfachen geht auch, rundet aber gern Ecken ab und verschiebt Kanten. Zieh unten ein Bild hinein und schalte Pfade und Knoten anzeigen ein, um zu sehen, wie viele Knoten die Vektorisierung verwendet.

Probier es mit deinem Bild aus

Bild hineinziehen, einfügen oder auswählen

⌘V einfügen · ⌘O öffnen · Stapel

Kein Bild zur Hand? Probier eins von diesen:

Glattes SVG mit wenigen Knoten

Was ein Knoten ist und warum die Anzahl zählt

Ein Pfad in einem SVG ist eine Kette von Segmenten: gerade Linien und Kurven. Jeder Punkt, an dem ein Segment endet und das nächste beginnt, ist ein Knoten (manche Programme sagen Ankerpunkt). Eine gute Vektorisierung setzt Knoten nur dort, wo die Form die Richtung ändert, und überlässt den Rest den Kurven.

• Bearbeiten: Jeden Knoten musst du womöglich verschieben. Ein Logo mit ein paar Hundert Knoten lässt sich leicht anpassen, eins mit Tausenden nicht.
• Schneiden und Gravieren: Maschinen fahren von Knoten zu Knoten. Hunderte winzige Segmente lassen Messer oder Laserkopf ruckeln, hinterlassen eine raue Kante und dauern länger.
• Dateigröße: Mehr Knoten, größere Datei. Das zählt bei Web-Icons und bei Marktplätzen mit Upload-Limits.
• Optik: Eine Kurve, die in viele kurze Stücke zerfällt, zeigt oft kleine Dellen, die man beim Vergrößern sieht.

Warum automatisch vektorisierte SVGs so viele Knoten haben

• Kleine oder niedrig aufgelöste Vorlage: In kleiner Größe ist eine gebogene Kante eine Treppe aus Pixeln, und die Vektorisierung folgt den Stufen.
• JPG-Kompression und Rauschen: Fleckige Kanten und gesprenkelte Flächen werden zu Dutzenden winziger Formen, jede mit eigenen Knoten.
• Zu viele Farben: Verläufe und geglättete Kanten zerfallen in schmale Streifen, und jeder Streifen ist eine weitere Kontur.
• Einstellungen, die Genauigkeit bevorzugen: Eine Vektorisierung, die jedem Pixel folgt, behält jede Pixelstufe als Knoten.

Schritt für Schritt: glatte Vektorisierung mit weniger Knoten

1. Starte mit dem größten und saubersten Bild, das du hast. Ein scharfes PNG ergibt weniger Knoten als ein kleines, komprimiertes JPG.
2. Öffne es im Konverter oben und schalte Pfade und Knoten anzeigen ein, um die Knoten im Ergebnis zu sehen.
3. Stell unter Farben mit Palette nur so viele Farben ein, wie das Motiv wirklich hat. Übrig gebliebene Töne aus der Kompression wandern dann in die nächstgelegene Farbe, statt zu zusätzlichen Formen zu werden.
4. Erhöhe unter Formen Min. Formgröße, um Sprenkel loszuwerden, und schieb Komplexität in Richtung Weniger Formen, wenn kleine Details nicht nötig sind.
5. Schieb unter Pfade Knoten in Richtung Weniger Knoten und Glättung in Richtung Flachere Kurven. Lass Scharfe Ecken bei Logos und Schriftzügen an, damit Spitzen scharf bleiben.
6. Vergleiche in der Ansicht Vergleichen mit dem Original und lade dann als SVG herunter (Download).

Ein vorhandenes SVG in Inkscape oder Illustrator vereinfachen

Hast du nur das SVG und nicht das Originalbild, können beide großen Editoren die Knoten auf ausgewählten Pfaden reduzieren. In Inkscape heißt das Pfad → Vereinfachen. In Illustrator ist es Objekt → Pfad → Vereinfachen, mit einem Regler, wie weit vereinfacht wird.

Vereinfachen arbeitet mit den Kurven, die schon da sind, und kann deshalb eine echte Ecke nicht von einer Pixelstufe unterscheiden. Es rundet gern Ecken ab, lässt dünne Teile schrumpfen und die Sprenkel stehen. Setz es behutsam ein, in kleinen Schritten. Hast du das Ausgangsbild noch, liefert eine neue Vektorisierung mit glatteren Einstellungen meist ein saubereres Ergebnis als das Vereinfachen einer verrauschten Vektorisierung.

Wie viele Knoten sind normal?

Das hängt vom Motiv ab, eine feste Zahl gibt es nicht. Als Anhaltspunkt: In unserem Benchmark mit 30 Logos, Flaggen, Emojis, Icons und Strichzeichnungen kam Shapesoda mit den Standardeinstellungen auf einen Median von 96 Knoten pro Bild (174 im Durchschnitt). Die anderen getesteten Werkzeuge lagen für dieselben Bilder bei Medianen von 156 bis 406 Knoten. Ein einfaches Icon sollte Dutzende Knoten brauchen, nicht Tausende; kommt ein zweifarbiges Logo mit mehreren Tausend zurück, folgt die Vektorisierung den Pixeln.

Weniger Knoten für Schneideplotter und Laser

Bei Cricut, Silhouette oder Laser sieht man die Knotenzahl am fertigen Stück. Ein Messer, das durch Hunderte winzige Segmente gezogen wird, kann dünnes Vinyl an jeder Wendung einreißen, und ein Laser, der ständig bremst und beschleunigt, kann dort dunklere Stellen hinterlassen, wo er langsamer wird. Bevor du eine Datei an die Maschine schickst, öffne sie mit Pfade und Knoten anzeigen und sieh dir die Kurven an, die geschnitten werden. Lange, gleichmäßige Kurven mit locker verteilten Knoten sind das Ziel. Knotenhaufen auf einer sanften Kurve sind ein Zeichen, mit weniger Knoten neu zu vektorisieren. DXF ist ein Sonderfall: Kurven werden als Ketten kurzer gerader Linien gespeichert. Die Option DXF-Kurven legt fest, wie viele: Weniger Linien (klein) für eine leichtere Datei, Viele Linien (glatt), wenn Kurven perfekt rund aussehen müssen.

Weitere Anzeichen einer verrauschten Vektorisierung

• Hunderte winzige Formen in einer Fläche, die eigentlich einfarbig sein sollte: weniger Farben in Palette oder Min. Formgröße erhöhen.
• Schmale Spalten zwischen Farben: Stell die Formen für Druck und Web auf Gestapelt (ohne Nahtstellen).
• Doppelte Linien in der Lasersoftware: siehe LightBurn Trace Image: doppelte Linien.
• Grobe Ergebnisse beim Nachzeichnen in Illustrator oder Inkscape: siehe Bildnachzeichner funktioniert nicht und Inkscape „Bitmap nachzeichnen“: Einstellungen.

Du brauchst nur den Konverter? Nimm Bild in SVG, Raster in Vektor oder Icon in SVG.