Ostre występy w SVG: popraw narożniki bez przycinania

Czubek przypominający igłę na obrysie SVG zwykle powstaje przez ostre połączenie obrysu w narożniku o kącie ostrym. Jeśli nie chcesz takiego czubka, zmniejsz stroke-miterlimit lub wybierz połączenie ścięte albo zaokrąglone. Jeśli czubek jest częścią projektu, ale jego koniec znika, zapewnij renderowanemu obrysowi więcej miejsca w viewBox. To różne sposoby naprawy: jeden zmienia kształt narożnika, a drugi zmienia to, co plik może wyświetlić.

Podczas testów zachowaj kopię oryginalnego SVG. Logo z celowo ostrym czubkiem może wymagać zachowania ostrego połączenia, natomiast przypadkowy występ na zaimportowanym obrysie może wymagać bardziej płaskiego połączenia. Najpierw zdecyduj, który narożnik ma zostać zachowany.

Dlaczego w wąskim narożniku powstaje występ

Obrys ścieżki ma szerokość po obu stronach jej linii środkowej. Przy stroke-linejoin="miter" zewnętrzne krawędzie obrysu są przedłużane aż do punktu przecięcia. Im ostrzejszy zakręt, tym dalej może znajdować się ten punkt. SVG używa miter jako początkowego stylu połączenia, a początkowa wartość stroke-miterlimit wynosi 4, zgodnie z definicją renderowania w SVG 2.

Limit jest stosunkiem, a nie odległością w pikselach czy jednostkach SVG. Jeśli długość ostrego połączenia podzielona przez stroke-width przekracza limit, zwykłe połączenie miter zmienia się w ścięte. Wyższy limit pozwala na dłuższy czubek; niższy sprawia, że więcej narożników o kątach ostrych staje się płaskich. Dokumentacja limitu ostrych połączeń w MDN przedstawia zależność od kąta narożnika i wskazuje, że właściwość CSS może nadpisać atrybut prezentacyjny SVG.

Jedna ścieżka, cztery widoczne rezultaty

Na potrzeby tego testu narysowaliśmy jeden otwarty, kanciasty fragment emblematu z d="M130 520 L180 200 L230 520" i obrysem o szerokości 26 jednostek. Pierwsze dwa panele używają limitu ostrych połączeń wynoszącego 10. W drugim zastosowano ciasną granicę widoczności przy y=170, która ucina czubek. Trzeci używa limitu 4, więc ten narożnik staje się ścięty. Czwarty używa round. To kontrolowana ilustracja działania tej ścieżki i tego mechanizmu renderowania, a nie obietnica, że każdy zaimportowany SVG będzie miał taki sam kształt narożnika.

Czerwona przerywana ścieżka środkowa pozostaje niezmieniona we wszystkich czterech panelach. To istotne: zmiana połączenia obrysu może naprawić renderowany obrys bez odtwarzania bazowej ścieżki wektorowej.

Czy to występ, ścięcie, czy przycięty czubek?

Przycięty czubek może na pierwszy rzut oka przypominać celowe ścięcie. Powiększ widok i sprawdź, czy jego koniec pokrywa się z granicą pliku. Diagnoza znikających obrysów SVG omawia inne przyczyny związane z renderowaniem i przycinaniem; ten test pozwala wyodrębnić problem ostrego połączenia w narożniku.

Popraw narożnik bez zmieniania niewłaściwego elementu

1. Znajdź ścieżkę i jej faktycznie używane połączenie

Zaznacz narożnik w edytorze grafiki wektorowej lub sprawdź w tekście SVG wartości stroke, stroke-width, stroke-linejoin i stroke-miterlimit. Sprawdź grupy nadrzędne i reguły CSS, a także atrybuty samej ścieżki. Właściwość stroke-miterlimit w stylu wpisanym bezpośrednio w elemencie lub w arkuszu stylów może mieć pierwszeństwo przed tym samym atrybutem prezentacyjnym elementu, jak opisuje dokumentacja MDN.

Jeśli zaznaczony obiekt jest wypełnionym konturem zamiast edytowalnego obrysu, przestań zmieniać ustawienia ostrych połączeń. Musisz zmienić ścieżkę tego wypełnienia lub wrócić do oryginału z obrysem niezamienionym na kontur. Jeśli cały zaimportowany obiekt ma niewłaściwy rozmiar, przeprowadź test importu SVG o znanym rozmiarze, zanim spróbujesz skompensować problem zmianą szerokości obrysu.

2. Zmień jedno ustawienie połączenia na duplikacie

Najpierw wypróbuj połączenie ścięte, jeśli dopuszczalny jest techniczny, płaski narożnik. Wypróbuj zaokrąglenie, jeśli projekt pozwala na łagodniejszą krawędź. Zachowaj ostre połączenie, gdy precyzyjny czubek jest częścią znaku, i wybierz limit, który zachowa tylko zamierzone czubki. Dokumentacja SVG stroke-linejoin definiuje różnice między typowymi kształtami połączeń.

Oto mała kopia testowa ścieżki użytej powyżej:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Zmień stroke-miterlimit na 4, aby zobaczyć zastąpienie ostrego połączenia ściętym przy tym konkretnym kącie. Następnie przywróć 10 i zmień stroke-linejoin na round lub bevel. Wartość stroke-miterlimit nie ma znaczenia dla tych dwóch ostatnich stylów połączeń. Nie obniżaj jej w całym logo tylko dlatego, że jeden narożnik zachowuje się niewłaściwie; inne czubki mogą być celowe.

3. Zapewnij pożądanemu czubkowi wystarczająco dużo miejsca

Jeśli ostre połączenie jest prawidłowe, ale znika przy krawędzi, powiększ lub przesuń viewBox tak, aby obejmował cały wyrenderowany rezultat, a nie tylko obszar wyznaczony przez współrzędne ścieżki. Definicja układu współrzędnych w SVG 2 wyjaśnia widoczny prostokąt; obrys może wykraczać poza współrzędne swojej ścieżki środkowej. Sprawdź też zagnieżdżone obszary widoczne SVG i ścieżki przycinania. Przycięcie w elemencie nadrzędnym może nadal ucinać czubek nawet po powiększeniu głównego viewBox.

Nie traktuj większego obszaru roboczego jako sposobu na usunięcie niezamierzonego, igłowatego występu. Ujawni on tylko większą część tego występu. Z kolei zmiana połączenia na ścięte wyłącznie po to, aby zmieścić narożnik w zbyt małym obszarze roboczym, może usunąć zaprojektowany narożnik. Porównaj dostarczany plik z oryginalnym znakiem w jego rzeczywistym rozmiarze wyświetlania lub druku. Jeśli wykonawca mierzy fizyczny rozmiar SVG, zachowaj zamierzoną szerokość i wysokość, świadomie zmieniając odwzorowanie viewBox.

4. Otwórz ponownie plik przeznaczony do przekazania

Sprawdź rezultat w przeglądarce oraz w docelowym edytorze lub aplikacji produkcyjnej. Sprawdź czubek przy powiększeniu 100% i w zamierzonym rozmiarze końcowym. Jeśli przekazywany plik ma zawierać wypełnione kontury zamiast edytowalnych obrysów, zachowaj swój oryginał, w edytorze zamień obrys na kontur w kopii przeznaczonej do przekazania i sprawdź nową granicę wypełnienia. Zamiana obrysu na kontur zmienia geometrię; nie jest odwracalnym ustawieniem ostrego połączenia. Szersze omówienie sprawdzania wypełnień i obrysów znajdziesz w poradniku kolejności renderowania SVG.

Kiedy rastrowe logo najpierw potrzebuje nowej ścieżki

Ustawienia ostrych połączeń działają tylko na edytowalnym obrysie wektorowym. Jeśli jedyna zachowana wersja Twojego logo to PNG lub JPG, proces wektoryzacji logo w PerfectVector może utworzyć wstępną wersję SVG, zanim zaczniesz edytować jej narożniki. Porównaj odtworzoną sylwetkę, małe przerwy i strukturę ścieżek ze źródłem. Wektoryzacja może przedstawić grubą linię rastrową jako wypełniony kontur, a nie oryginalną edytowalną linię środkową, więc nie oczekuj, że stroke-miterlimit automatycznie naprawi taki rezultat. Narysuj ponownie kluczowy geometryczny czubek, jeśli musi dokładnie odpowiadać wzorcowi marki.

Jeśli istnieje oryginalny SVG, napraw ten plik zamiast wektoryzować zrzut ekranu. Poradnik wektoryzacji logo pomaga, gdy naprawdę musisz odtworzyć grafikę z pikseli; ten artykuł zaczyna się na etapie, gdy odpowiedni edytowalny obrys już istnieje.

Końcowa kontrola narożnika

1. Zapisz nietknięty oryginał wektorowy.
2. Potwierdź, czy narożnik jest edytowalnym obrysem, czy wypełnionym konturem.
3. Porównaj miter, bevel i round na jednej ścieżce, której dotyczy problem.
4. Jeśli zachowujesz ostre połączenie, przetestuj jego limit i pozostaw wystarczająco dużo widocznego miejsca na cały wyrenderowany czubek.
5. Otwórz ponownie SVG w jego rzeczywistym środowisku docelowym i sprawdź go w końcowym rozmiarze.

FAQ

Dlaczego mój SVG ma występy w ostrych narożnikach? Ostre połączenie przedłuża zewnętrzne krawędzie obrysu aż do punktu przecięcia. Przy kącie ostrym ten punkt może znajdować się daleko od ścieżki środkowej. Obniż limit ostrych połączeń lub użyj połączenia ściętego albo zaokrąglonego, jeśli czubek jest niezamierzony.

Dlaczego obniżenie stroke-miterlimit spłaszcza narożnik? Gdy stosunek długości ostrego połączenia do szerokości obrysu przekracza limit, zwykłe ostre połączenie zostaje zastąpione ściętym. Niższe wartości powodują takie zastąpienie w większej liczbie narożników. Zachowaj wyższy limit, jeśli ostry czubek jest celowy, a następnie sprawdź jego granice.

Dlaczego czubek w moim SVG nadal jest ucięty po zwiększeniu limitu ostrych połączeń? Wyższy limit może wydłużyć czubek, podczas gdy viewBox lub przycięcie nadal go ucina. Powiększ widoczny obszar wokół renderowanego obrysu lub przesuń znak, a następnie otwórz ponownie przekazywany SVG w środowisku docelowym.

Źródła

1. W3C — SVG 2 Painting — Definiuje połączenia obrysu, wartości początkowe i sposób zastępowania ostrych połączeń.
2. MDN — stroke-miterlimit — Wyjaśnia stosunek określający limit i jego związek z kątami ostrych narożników.
3. MDN — stroke-linejoin — Definiuje typowe kształty narożników dla ścieżek z obrysem.
4. MDN — CSS stroke-miterlimit — Dokumentuje pierwszeństwo właściwości CSS przed atrybutem prezentacyjnym SVG.
5. W3C — SVG 2 Coordinate Systems — Definiuje relację między viewBox a obszarem widocznym, wykorzystywaną przy sprawdzaniu granic.

Jeśli znak dostępny wyłącznie w postaci rastrowej potrzebuje użytecznych ścieżek przed tą naprawą, utwórz wstępną wersję SVG z logo, sprawdź jej geometrię, a następnie popraw lub narysuj ponownie istotne narożniki.