Białe szczeliny między kształtami SVG: jak je rozpoznać i usunąć

Cienkie białe linie między kształtami SVG to często szwy powstające podczas renderowania, a nie dziury w pliku. Model renderowania SVG pozwala implementacjom stosować antyaliasing podczas rasteryzacji grafiki wektorowej; sąsiadujące krawędzie próbkowane osobno mogą więc przy określonej skali odsłonić cienką linię w kolorze tła. Linia może zniknąć przy innym powiększeniu lub w innym silniku renderującym.

Czasem szczelina jest rzeczywista. Zanim nałożysz kształty na siebie, dodasz obrysy lub scalisz ścieżki, wykonaj cztery testy: zmień powiększenie, zmień tło, wyeksportuj grafikę do obrazu rastrowego i sprawdź ścieżki w widoku konturów. Wyniki pokażą, czy trzeba poprawić próbkowanie podczas wyświetlania, czy geometrię.

Szew renderowania czy rzeczywista szczelina?

• Zmienia się lub znika wraz z powiększeniem: prawdopodobnie jest to szew powstający podczas wyświetlania.
• Zmienia kolor wraz z tłem: między krawędziami próbkowane jest tło.
• Nie występuje w widoku konturów: granice kształtów wektorowych mogą już się stykać.
• Jest widoczna w eksporcie rastrowym o wysokiej rozdzielczości: przyjrzyj się dokładniej precyzji eksportu i geometrii.
• Pozostaje w siatce, podglądzie cięcia lub pomiarach ścieżek: potraktuj ją jako rzeczywisty problem z geometrią.

Dlaczego stykające się ścieżki mogą tworzyć widoczny szew

Ekrany renderują kształty wektorowe na siatce pikseli. Gdy krawędź przechodzi przez piksel, antyaliasing miesza w nim kolor kształtu z kolorem tła, aby krawędź wyglądała gładko. Dwa kształty renderowane osobno mogą niezależnie mieszać kolory swoich pikseli brzegowych, nawet jeśli ich współrzędne wektorowe dokładnie się pokrywają.

Skala wprowadza kolejną zmienną. Wspólna współrzędna, która przy jednym rozmiarze wypada dokładnie na granicy piksela, przy innym może wypaść między pikselami. Zaokrąglanie podczas eksportu może też nieznacznie przesunąć jedną z granic. Dlatego linia może pojawiać się tylko przy powiększeniu 67%, znikać przy 100% i wracać w małej miniaturze na stronie.

Pod względem matematycznym SVG nadal może być poprawny. Edytowanie geometrii przed wykonaniem testów może spowodować nakładanie się kształtów, które stanie się widoczne przy użyciu przezroczystości, w druku, podczas cięcia lub w animacji.

Najważniejsze jest ustalenie, czy właściwe kontury mają wspólną krawędź. Szew renderowania może pojawić się na styku poprawnej geometrii; rzeczywista szczelina pozostaje widoczna między samymi konturami.

Wykonaj cztery testy przed edycją

1. Zmień powiększenie

Obejrzyj SVG przy kilku poziomach powiększenia, w tym przy 100% i przy dużym zbliżeniu. Rzeczywista szczelina pozostaje między ścieżkami, gdy ją powiększasz. Szew wynikający z próbkowania często pojawia się i znika, zmienia grubość lub całkowicie znika.

Nie polegaj wyłącznie na powiększeniu. Niektóre szczeliny w geometrii są mniejsze od piksela i również mogą zmieniać wygląd.

2. Zmień tło

Umieść SVG na białym, czarnym i jaskrawym tle. Jeśli cienka linia przyjmuje kolor tła, silnik renderujący pokazuje tło między osobno próbkowanymi krawędziami. Może to oznaczać zarówno szew wynikający z próbkowania, jak i rzeczywistą przezroczystą szczelinę, więc przejdź do sprawdzenia konturów.

3. Wyeksportuj PNG w wysokiej rozdzielczości

Wyeksportuj grafikę w wymiarach dwa lub cztery razy większych od docelowych, a następnie sprawdź pomniejszony wynik. Jeśli szew znika w eksporcie o wysokiej rozdzielczości, problem prawdopodobnie wynikał z rasteryzacji zależnej od skali. Jeśli pozostaje i można go zmierzyć, sprawdź współrzędne oraz precyzję eksportu.

4. Użyj widoku konturów lub widoku szkieletowego

Wyłącz wypełnienia i sprawdź rzeczywiste granice. Zaznacz sąsiadujące węzły i porównaj ich współrzędne. Jeśli ścieżki stykają się dokładnie, widoczna linia wynika z działania silnika renderującego. Jeśli punkty końcowe lub krawędzie się nie pokrywają, popraw geometrię.

Więcej sposobów edycji ścieżek znajdziesz w poradniku jak edytować SVG. Zachowaj kopię, ponieważ najlepszy sposób naprawy zależy od tego, jak plik będzie używany.

Usuń szew powstający podczas wyświetlania

W grafice z jednolitymi wypełnieniami, między którymi nie powinno być przezroczystości, niewielkie, kontrolowane nałożenie kształtów jest zwykle najbardziej niezawodnym rozwiązaniem. Nieznacznie powiększ kształt leżący pod spodem lub ciemniejszy tak, aby zachodził pod sąsiedni kształt. Nałożenie powinno być niewidoczne w normalnym rozmiarze i nie powinno zmieniać zewnętrznej sylwetki.

Inne możliwości to:

• Dodaj bardzo cienki obrys w kolorze kształtu, ustawiony tak, aby zakrywał szew.
• Umieść dopasowany kształt bazowy za wszystkimi sąsiadującymi elementami.
• Zwiększ precyzję współrzędnych przy eksporcie SVG, jeśli zaokrąglanie rozdzieliło wspólne krawędzie.
• Wyrenderuj większy obraz rastrowy i zmniejsz jego rozdzielczość, jeśli końcowym plikiem ma być PNG.

Właściwość SVG shape-rendering pozwala zasugerować większą precyzję geometrii lub ostrzejsze krawędzie, ale MDN zaznacza, że jest to wskazówka dotycząca renderowania, a nie gwarancja zniknięcia wszystkich szwów w każdym środowisku. Zanim zastosujesz tę wskazówkę do całego pliku, sprawdź, kiedy crispEdges pomaga, a kiedy nie.

Wybierz jedną poprawkę, a następnie przetestuj ją w docelowym środowisku. Łączenie kilku poprawek może tworzyć ciemne zgrubienia lub wybrzuszenia w miejscach nakładania się kształtów.

Napraw rzeczywistą szczelinę w geometrii

Jeśli widok konturów lub wynik dalszego przetwarzania potwierdza obecność dziury:

1. Przyciągnij odpowiednie węzły do tej samej współrzędnej.
2. Przedłuż sąsiednie krawędzie, aż rzeczywiście się zetkną.
3. Łącz punkty końcowe tylko wtedy, gdy projekt wymaga jednej ciągłej ścieżki.
4. Usuń zduplikowane lub przypadkowe segmenty.
5. Ponownie wyeksportuj plik z wystarczającą precyzją współrzędnych.
6. Otwórz plik ponownie i powtórz cztery testy.

Unikaj zakrywania szczeliny białym kształtem. Ukrywa on objaw tylko na białym tle i pozostaje dodatkowym obiektem w pliku.

Jeśli szczeliny powstały podczas wektoryzacji zaszumionego obrazu rastrowego, w projekcie może być wiele wąskich skrawków i krawędzi, które niemal się stykają. Naprawianie każdego z nich może zająć więcej czasu niż ponowna wektoryzacja czystszego materiału źródłowego.

Docelowe zastosowanie wpływa na wybór poprawki

Pęknięcie, które pozostaje w powierzchni CAD lub siatce powstałej w dalszym przetwarzaniu, istotnie różni się od jednopikselowego szwu w przeglądarce. Jeśli geometria po dalszym przetwarzaniu jest rozdzielona, popraw ścieżki źródłowe lub tolerancję konwersji. Jeśli linia pojawia się tylko w miniaturze w przeglądarce, geometria używana w produkcji może już być poprawna.

Lista kontrolna SVG przed cięciem obejmuje sprawdzanie pliku pod kątem konkretnej maszyny. Jeśli problemem jest rozmycie na ekranie lub niewidoczne piksele, a nie szwy, skorzystaj z diagnostyki pikselizacji SVG.

Kiedy przydaje się PerfectVector

Gdy szczeliny są rozproszone po grafice powstałej z wektoryzacji PNG lub JPG, wróć do źródłowego obrazu rastrowego, zanim zaczniesz poprawiać dziesiątki ścieżek. Usuń wyraźne artefakty blokowe kompresji i niechciane tło oraz zachowaj najbardziej wyraziste oryginalne krawędzie. Następnie skorzystaj z procesu konwersji obrazu na grafikę wektorową, aby odtworzyć widoczne obszary jako edytowalne ścieżki i sprawdzić podgląd.

PerfectVector nie może wiedzieć, czy dwa obszary w tym samym kolorze muszą pozostać oddzielne na potrzeby animacji, cięcia lub montażu. Sprawdź sylwetki i przestrzeń negatywową w podglądzie, a następnie przetestuj pobrany SVG w jego docelowym zastosowaniu. Ponowna wektoryzacja jest przydatna, gdy szczeliny wynikają z fragmentacji materiału źródłowego, a nie wtedy, gdy jedna przeglądarka po prostu stosuje antyaliasing do poprawnej geometrii sąsiadujących kształtów.

Najczęściej zadawane pytania

Dlaczego między ścieżkami SVG pojawiają się białe linie? Przeglądarka lub aplikacja może osobno wygładzać sąsiadujące krawędzie, przez co przy niektórych skalach prześwituje tło. Ścieżki nadal mogą stykać się dokładnie. Zanim zaczniesz edycję, zmień powiększenie, tło i silnik renderujący oraz sprawdź widok konturów.

Jak usunąć szwy antyaliasingu w SVG? Przy sąsiadujących jednolitych wypełnieniach dodaj niewielkie, kontrolowane nałożenie kształtów, bardzo cienki obrys w tym samym kolorze lub kształt podkładowy. Sprawdź wynik przy docelowych rozmiarach wyświetlania. Nie stosuj tych poprawek bez sprawdzenia w grafice do cięcia, CAD, grafice z przezroczystością ani w animacjach.

Czy połączenie wszystkich ścieżek usunie szczeliny? Może je usunąć, ale usuwa też strukturę pozwalającą osobno nadawać kolory i edytować elementy. Scalaj ścieżki tylko wtedy, gdy powinny tworzyć jeden kształt. Grafika wielokolorowa zwykle wymaga osobnych obiektów, więc dopasowanie krawędzi lub kontrolowane nałożenie kształtów jest bezpieczniejsze.

Dlaczego szczeliny pojawiają się tylko wtedy, gdy SVG jest mały? Skalowanie przesuwa granice kształtów wektorowych względem siatki pikseli. Przy niektórych rozmiarach obie sąsiadujące krawędzie mieszają się z tłem w tym samym rzędzie lub kolumnie pikseli. Renderowanie w większym rozmiarze lub niewielkie nałożenie kształtów może zapobiec prześwitywaniu tła.

Czy małe szczeliny w SVG mają znaczenie przy druku 3D lub cięciu? Mają znaczenie, jeśli pozostają w powierzchni, siatce lub ścieżce narzędzia. Szew widoczny tylko na ekranie nie dowodzi, że geometria jest uszkodzona. Sprawdź podgląd po dalszym przetwarzaniu i napraw każde pęknięcie lub otwarty kontur, który zmienia wytwarzany obiekt.

Źródła

1. W3C — SVG 2 Rendering Model — Opisuje kolejność rysowania w SVG, przycinanie, składanie warstw obrazu i antyaliasing.
2. MDN — shape-rendering — Dokumentuje wskazówki renderowania dostępne dla kształtów SVG.
3. W3C — SVG 2 Coordinate Systems — Definiuje model współrzędnych, obszaru wyświetlania i transformacji, który odpowiada za renderowanie zależne od skali.

---

Jeśli rozdrobniony wynik wektoryzacji obrazu rastrowego zawiera rzeczywiste szczeliny, odtwórz go jako edytowalne ścieżki wektorowe i sprawdź podgląd. Jeśli ścieżki już się stykają, zachowaj plik i zastosuj tylko najmniejszą poprawkę wyświetlania odpowiednią do docelowego zastosowania.