Dlaczego twój SVG ma za dużo węzłów i jak to naprawić

SVG ma za dużo węzłów, gdy program do wektoryzacji podąża za każdym pikselowym schodkiem na krawędzi, zamiast narysować jedną gładką krzywą. Koło, które potrzebuje czterech lub ośmiu węzłów, kończy z sześćdziesięcioma. Plik robi się ciężki, edycja staje się udręką, a plotery i lasery zwalniają i szarpią na drobnych odcinkach.

Rozwiązanie to zwektoryzować obraz ponownie z ustawieniami, które sprzyjają gładkim krzywym: mniej węzłów, gładsze krzywe, mniej kolorów i żadnych plamek. Upraszczanie gotowego SVG też działa, ale zwykle zaokrągla narożniki i przesuwa krawędzie. Upuść obraz poniżej i włącz Pokaż ścieżki i węzły, żeby zobaczyć, ile węzłów ma wektoryzacja.

Wypróbuj na swoim obrazie

Przeciągnij, wklej lub wybierz obraz

⌘V wklej · ⌘O otwórz · wsadowo

Nie masz obrazu? Wypróbuj jeden z tych:

Gładki SVG z małą liczbą węzłów

Czym jest węzeł i dlaczego ich liczba ma znaczenie

Ścieżka w SVG to łańcuch odcinków: prostych i krzywych. Każdy punkt, w którym jeden odcinek się kończy, a następny zaczyna, to węzeł (niektóre programy nazywają go punktem kontrolnym albo punktem zakotwiczenia). Dobra wektoryzacja stawia węzły tylko tam, gdzie kształt zmienia kierunek, a resztę zostawia krzywym.

• Edycja: każdy węzeł to coś, co być może trzeba będzie przeciągnąć. Logo z kilkuset węzłami łatwo poprawić; takie z tysiącami już nie.
• Cięcie i grawerowanie: maszyny jadą od węzła do węzła. Setki drobnych odcinków sprawiają, że nóż albo głowica lasera szarpie, zostawia nierówną krawędź i pracuje dłużej.
• Rozmiar pliku: więcej węzłów, większy plik. To ma znaczenie przy ikonach na stronę i w sklepach internetowych z limitami wgrywania.
• Wygląd: krzywa rozbita na wiele krótkich kawałków często ma drobne falowania, widoczne po powiększeniu projektu.

Dlaczego automatycznie zwektoryzowane SVG mają tyle węzłów

• Małe źródło lub niska rozdzielczość: w małym rozmiarze zakrzywiona krawędź to schodki z pikseli, a program podąża za schodkami.
• Kompresja JPG i szum: brudne krawędzie i plamiste obszary zamieniają się w dziesiątki drobnych kształtów, każdy z własnymi węzłami.
• Za dużo kolorów: gradienty i wygładzone krawędzie dzielą się na cienkie pasy, a każdy pas to kolejny kontur.
• Ustawienia nastawione na dokładność: wektoryzacja, która trzyma się każdego piksela, zachowuje każdy pikselowy schodek jako węzeł.

Krok po kroku: gładka wektoryzacja z mniejszą liczbą węzłów

1. Zacznij od największego i najczystszego obrazu, jaki masz. Ostry PNG wektoryzuje się z mniejszą liczbą węzłów niż mały, skompresowany JPG.
2. Otwórz go w konwerterze powyżej i włącz Pokaż ścieżki i węzły, żeby zobaczyć węzły na wyniku.
3. W sekcji Kolory ustaw w Paleta tylko tyle kolorów, ile naprawdę ma projekt. Odcienie pozostałe po kompresji wpadną wtedy do najbliższego koloru, zamiast tworzyć dodatkowe kształty.
4. W sekcji Kształty zwiększ Min. rozmiar kształtu, żeby pozbyć się plamek, i przesuń Złożoność w stronę Mniej kształtów, jeśli drobne szczegóły nie są potrzebne.
5. W sekcji Ścieżki przesuń Węzły w stronę Mniej węzłów, a Gładkość w stronę Gładsze krzywe. Przy logo i napisach zostaw włączone Ostre narożniki, żeby szpice zostały ostre.
6. Porównaj z oryginałem w widoku Porównaj, a potem kliknij Pobierz i wybierz SVG.

Upraszczanie gotowego SVG w Inkscape lub Illustratorze

Jeśli masz tylko SVG, a nie oryginalny obraz, oba główne edytory potrafią zmniejszyć liczbę węzłów na zaznaczonych ścieżkach. W Inkscape to Path → Simplify (Ścieżka → Uprość). W Illustratorze to Object → Path → Simplify (Obiekt → Ścieżka → Uprość), z suwakiem ustalającym, jak mocno upraszczać.

Upraszczanie działa na krzywych, które już masz, więc nie odróżni prawdziwego narożnika od pikselowego schodka. Zwykle zaokrągla narożniki, zwęża cienkie elementy i zostawia plamki na miejscu. Używaj go ostrożnie, po trochu. Jeśli masz jeszcze obraz źródłowy, ponowna wektoryzacja z gładszymi ustawieniami zwykle daje czystszy wynik niż upraszczanie zaszumionej wektoryzacji.

Ile węzłów to normalnie?

To zależy od projektu, więc nie ma jednej liczby. Dla porównania: w naszym teście na 30 logo, flagach, emoji, ikonach i grafikach liniowych Shapesoda z domyślnymi ustawieniami dała medianę 96 węzłów na obraz (średnio 174). Pozostałe sprawdzone narzędzia miały mediany od 156 do 406 węzłów dla tych samych obrazów. Prosta ikona powinna potrzebować dziesiątek węzłów, a nie tysięcy; jeśli dwukolorowe logo wraca z kilkoma tysiącami, wektoryzacja podąża za pikselami.

Mniej węzłów dla ploterów tnących i laserów

Przy Cricut, Silhouette czy laserze liczbę węzłów widać na gotowym elemencie. Nóż przeciągany przez setki drobnych odcinków potrafi rozerwać cienką folię na każdym zakręcie, a laser, który ciągle zwalnia i przyspiesza, może zostawiać ciemniejsze miejsca tam, gdzie zwalnia. Zanim wyślesz plik do maszyny, otwórz go z włączonym Pokaż ścieżki i węzły i obejrzyj krzywe, które będą cięte. Chcesz długich, równych krzywych z rzadko rozstawionymi węzłami. Skupiska węzłów na łagodnej krzywej to znak, żeby zwektoryzować ponownie z mniejszą liczbą węzłów. DXF to szczególny przypadek: krzywe są tam zapisane jako łańcuchy krótkich prostych odcinków. Opcja Krzywe DXF ustala, ile ich będzie: Mniej linii (lżej) dla lżejszego pliku, Dużo linii (gładko), gdy krzywe muszą wyglądać idealnie okrągło.

Inne oznaki zaszumionej wektoryzacji

• Setki drobnych kształtów tam, gdzie powinien być jeden płaski obszar: użyj mniej kolorów w Paleta albo zwiększ Min. rozmiar kształtu.
• Cienkie szczeliny między kolorami: przełącz kształty na Nakładane (bez szczelin) do druku i na stronę.
• Podwójne linie w programie do lasera: zobacz problemy z Trace Image w LightBurn.
• Słabe wyniki wektoryzacji w Illustratorze lub Inkscape: zobacz Obrys obrazu w Illustratorze nie działa i ustawienia Trace Bitmap w Inkscape.

Potrzebujesz tylko konwertera? Użyj stron Obraz na SVG, Raster na wektor albo Ikona na SVG.