Kolejność malowania w SVG: grube obrysy za literami

Ustaw paint-order="stroke fill" na elemencie tekstowym lub kształcie w SVG, aby narysować jego obrys przed wypełnieniem. Nieprzezroczyste wypełnienie zakrywa część obrysu skierowaną do wewnątrz, dzięki czemu gruby obrys nie wchodzi na kolorową powierzchnię liter. Możesz też zapisać paint-order: stroke fill; w CSS.

Ścieżka, rozmiar czcionki i szerokość obrysu pozostają takie same. To ustawienie wyglądu, przydatne wtedy, gdy logotyp z obrysem staje się zbyt ciężki wizualnie lub trudny do odczytania po zwiększeniu szerokości obrysu. Nie tworzy ono obrysu wyrównanego do zewnętrznej krawędzi ani nowego konturu cięcia.

Dlaczego domyślny obrys nachodzi na litery

SVG zwykle maluje najpierw wypełnienie elementu, potem jego obrys, a następnie znaczniki. Wyśrodkowany obrys rozciąga się po obu stronach granicy wypełnionego kształtu. Malowanie tego obrysu na końcu zakrywa część wypełnienia. Na wąskich trzonach liter szeroki obrys może zasłonić większość koloru ich powierzchni.

Odwrócenie kolejności pierwszych dwóch operacji pozwala wypełnieniu zakryć ten nakładający się obszar. Specyfikacja malowania SVG definiuje tę kolejność, a dokumentacja atrybutu SVG w MDN opisuje zarówno atrybut, jak i jego odpowiednik w CSS. Krótsza wartość stroke daje taką samą kolejność jak stroke fill markers: pominięte operacje następują później w swojej zwykłej kolejności względem siebie.

Ten efekt wymaga widocznego wypełnienia. Ścieżka z fill="none" nie ma niczego, co mogłoby zakryć wewnętrzną część obrysu. Przez częściowo przezroczyste wypełnienie obrys może prześwitywać, więc użyj nieprzezroczystego wypełnienia, aby uzyskać pokazany tutaj rezultat.

Porównaj tę samą grafikę w dwóch rozmiarach

Przygotowaliśmy krótki logotyp BOLD z edytowalnym tekstem i małym trójkątnym symbolem zbudowanym ze ścieżki. Poniższe porównanie w przeglądarce zmienia wyłącznie kolejność malowania w każdej parze. Wykorzystuje szerokości obrysu wynoszące 4 i 8 jednostek użytkownika SVG, a następnie wyświetla ten sam viewBox 400 × 110 przy szerokościach 400 i 200 pikseli CSS.

Przy ustawieniu 8 jednostek logotyp ze zwykłą kolejnością malowania traci dużą część swojej żółtej powierzchni. Malowanie wypełnienia na końcu zachowuje widoczność żółtych trzonów liter. Efekt jest nadal widoczny w wersji o szerokości 200 pikseli, ale małe otwory pozostają ciasne. Maleńki wewnętrzny otwór symbolu również staje się trudny do rozróżnienia przy grubszym obrysie.

Ten ostatni szczegół ma znaczenie: kolejność malowania może zachować powierzchnię litery, ale nie sprawi, że każdy otwór lub odstęp będzie czytelny. Obrysy nadal wchodzą w niewypełnione przestrzenie. Jeśli otwór zamyka się przy docelowym rozmiarze wyświetlania, zmniejsz szerokość obrysu lub uprość grafikę. Powiększenie podglądu w przeglądarce nie zastępuje sprawdzenia rozmiaru, który odbiorca rzeczywiście zobaczy.

To oryginalne przykłady rysunkowe, a nie wyniki konwersji w PerfectVector. Logotyp korzysta z zainstalowanej czcionki Arial z zastępczą czcionką sans-serif; inna czcionka zmienia kształty liter i odstępy.

Wypróbuj kompletny SVG

Zapisz ten kod jako wordmark.svg i otwórz go bezpośrednio w przeglądarce. Przykład pozostawia wokół kształtów wystarczająco dużo miejsca na widoczny obrys. Zmień paint-order na normal, aby porównać rezultaty, a następnie wypróbuj stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Grupa przekazuje swoje właściwości malowania ścieżce i tekstowi. Każdy element podrzędny używa wskazanej kolejności przy własnym renderowaniu. fill-rule="evenodd" tworzy wewnętrzny otwór symbolu; działa niezależnie od kolejności malowania.

Aby odtworzyć małe przykłady, zmień width i height na 200 i 55, pozostawiając viewBox bez zmian. Ponieważ ten plik nie ma obrysu wyłączonego ze skalowania, grafika i jej obrys skalują się razem. Przy takim zmniejszeniu rozmiaru o połowę obrys o szerokości 8 jednostek ma szerokość 4 pikseli CSS, zanim uwzględnisz część zakrytą przez wypełnienie.

W wersji opartej na arkuszu stylów przypisz docelowemu elementowi klasę i ustaw:

.outlined-wordmark {
  paint-order: stroke fill;
}

Gdy zarówno atrybut prezentacyjny, jak i deklaracja CSS określają tę właściwość, CSS ma pierwszeństwo. Jeśli zmiana atrybutu pozornie nic nie daje, sprawdź zastosowane reguły. Dokumentacja CSS w MDN wyjaśnia też dziedziczenie i dozwolone kombinacje słów kluczowych.

Czego to ustawienie nie zmienia

Wyrównanie obrysu. Obrys nadal biegnie wzdłuż tej samej ścieżki środkowej. Malowanie wypełnienia na jego części tworzy wokół wypełnionych obszarów obramowanie wyglądające jak zewnętrzne, ale nie przesuwa geometrii obrysu na zewnątrz. Na krawędzi otworu pozostała widoczna część obrysu może wchodzić do jego wnętrza.

Kolejność nakładania oddzielnych obiektów. Ustawienie kolejności malowania na jednym elemencie nie umieszcza go za sąsiednim kształtem. Późniejszy nakładający się obiekt nadal może go zakryć. Jeśli na tym polega problem, zmień kolejność obiektów. Przykład znajdziesz w artykule dlaczego z-index w SVG nie zmienia kolejności ścieżek logo.

Ścieżki cięcia lub odsunięte kontury. Ploter tnący lub narzędzie do pracy z geometrią potrzebuje odpowiednich konturów. Nie można zakładać, że zinterpretuje atrakcyjny obrys w przeglądarce jako jedno połączone obramowanie. Jeśli wymaga tego przygotowanie pliku do przekazania, utwórz i sprawdź potrzebną geometrię oddzielnie.

Przenośność czcionki. Przykład zawiera edytowalny tekst. Zmiana kolejności jego malowania nie dołącza czcionki ani nie utrwala kształtów glifów. Skorzystaj z kontroli zmian czcionek w SVG, jeśli logotyp zmienia się po ponownym otwarciu w innym środowisku.

Podczas edycji rozpatruj te kwestie osobno. Zmianę kolejności malowania łatwo cofnąć; zamiana obrysów na kształty lub tekstu na ścieżki zmienia edytowalną strukturę dokumentu.

Sprawdź kopię do przekazania w docelowym środowisku

Zacznij od rezultatu w przeglądarce, a następnie otwórz zapisany plik w aplikacji lub rendererze, który będzie go używać. Sam podgląd w przeglądarce nie potwierdza, że edytor, konwerter PDF lub proces produkcyjny zachowa wygląd.

1. Porównaj kolor powierzchni liter i zewnętrzne obramowanie w docelowym rozmiarze. Zajrzyj do wnętrza B, O i wszystkich wąskich otworów symbolu.
2. Potwierdź, że wczytano oczekiwaną czcionkę. Sprawdź odstępy oraz kształty liter.
3. Sprawdź krawędzie strony. Szerszy obrys może potrzebować więcej miejsca w obszarze wyświetlania lub w obszarze przycinania.
4. Otwórz ponownie wyeksportowany plik do przekazania. Eksport może zmienić style lub konstrukcję obiektów, nawet jeśli dokument roboczy wyglądał poprawnie.

Jeśli docelowe środowisko zmienia obrys, ogranicz plik do jednego kształtu z wypełnieniem i obrysem, a następnie porównaj jego wygląd z wynikiem renderowania w przeglądarce. Skorzystaj z diagnostyki znikających obrysów SVG, gdy problem dotyczy przycinania, skalowania lub braku wypełnienia bądź obrysu. W przypadku konfliktu reguł kolorów poradnik zmiany kolorów SVG wyjaśnia, gdzie można definiować wypełnienia i obrysy.

Jeśli wyglądu opartego na edytowalnych elementach nie da się zachować przy przekazaniu, zachowaj edytowalny plik źródłowy i przygotuj oddzielną kopię do przekazania, w której wymagany wygląd będzie odtworzony za pomocą kształtów. Sprawdź tę kopię wizualnie i geometrycznie; sama zamiana wyśrodkowanego obrysu na kształt nie odtwarza wszystkich zamierzonych efektów nakładania ani nie tworzy jednego zewnętrznego konturu.

Gdy źródłem jest logo rastrowe

Użyj oryginalnego symbolu wektorowego i edytowalnego napisu, jeśli je masz. Robienie zrzutu ekranu poprawnie wyświetlanego tekstu i jego wektoryzacja tylko po to, by dodać obrys, nie przynoszą żadnej korzyści.

Jeśli PNG lub JPG to jedyna zachowana wersja symbolu, proces wektoryzacji logo w PerfectVector może pomóc Ci wcześniej przygotować wstępną wersję SVG. Przed zastosowaniem tego stylu sprawdź przekonwertowaną sylwetkę i małe otwory. Konwersja nie ustawia kolejności malowania, nie rozpoznaje oryginalnej czcionki ani nie decyduje, które kształty powinny mieć wspólny obrys.

Jeśli napis można odtworzyć przy użyciu właściwej czcionki, podczas projektowania zachowaj go jako oddzielny obiekt tekstowy. Szerszy poradnik wektoryzacji logo wyjaśnia, jak wybrać między odtwarzaniem grafiki z obrazu rastrowego a użyciem istniejącego wektorowego pliku źródłowego.

Najczęściej zadawane pytania

Jaka jest domyślna kolejność malowania w SVG? Domyślna kolejność to wypełnienie, następnie obrys, a potem znaczniki. Wartość normal wskazuje tę kolejność.

Czy paint-order="stroke" różni się od "stroke fill"? Dają tutaj tę samą kolejność: obrys, wypełnienie, a następnie znaczniki. Niewymienione operacje następują po wymienionych operacjach w swojej zwykłej kolejności względem siebie.

Czy paint-order tworzy obrys zewnętrzny? Nie przesuwa ani nie odsuwa obrysu. Nieprzezroczyste wypełnienie ukrywa część wyśrodkowanego obrysu skierowaną do wewnątrz. Pozostała część obrysu nadal może ograniczać otwory i odstępy.

Dlaczego obrys mojego SVG nadal wygląda zbyt ciężko? Obrys może być zbyt szeroki dla rozmiaru wyświetlania, wypełnienie może być przezroczyste lub inna reguła CSS może nadpisywać kolejność malowania. Sprawdź te warunki i obejrzyj małe otwory w docelowym rozmiarze.

Źródła

1. W3C — SVG 2 Painting — Definiuje kolejność malowania i zależność między wypełnieniami a obrysami.
2. MDN — SVG paint-order attribute — Opisuje kolejność słów kluczowych, obsługiwane typy elementów i pierwszeństwo CSS przed atrybutem prezentacyjnym.
3. MDN — CSS paint-order property — Wyjaśnia dziedziczenie i skrócone sekwencje słów kluczowych.

Masz tylko symbol rastrowy? Przygotuj edytowalne logo SVG, sprawdź jego otwory i przetestuj obrys w docelowym rozmiarze, zanim przygotujesz kopię do przekazania.