SVG shape-rendering crispEdges: kiedy pomaga?

Używaj shape-rendering="crispEdges", gdy SVG ma celowo ostre, przeważnie proste krawędzie, a test w docelowym rozmiarze wyświetlania daje z tą wartością lepszy efekt. Pozostaw domyślne auto, jeśli różnica jest znikoma. W grafice z krzywymi ta wskazówka może sprawić, że krawędź będzie wyglądać bardziej nierówno. Zmienia sposób, w jaki mechanizm renderujący rysuje istniejące kształty, a nie same kształty. Specyfikacja SVG 2 określa ją jako wskazówkę i pozwala mechanizmowi renderującemu ograniczyć wygładzanie krawędzi lub wyrównać niektóre krawędzie do pikseli urządzenia.

To rozróżnienie ma znaczenie, jeśli mała ikona wygląda na rozmytą lub logo po eksporcie wydaje się postrzępione. crispEdges nie zamieni osadzonego PNG w ścieżki, nie naprawi uszkodzonego konturu ani nie zagwarantuje identycznych pikseli w każdej przeglądarce. Zanim zmienisz cały plik, porównaj jeden reprezentatywny kształt z wartościami auto, crispEdges i geometricPrecision w rozmiarach, w których odbiorcy będą go rzeczywiście oglądać.

O co crispEdges prosi mechanizm renderujący

SVG ma cztery wartości shape-rendering. Są to priorytety, a nie cztery formaty eksportu. Domyślne auto pozwala mechanizmowi renderującemu znaleźć równowagę między szybkością, kontrastem krawędzi i dokładnością geometrii. crispEdges preferuje silny kontrast krawędzi i może ograniczać ich wygładzanie; geometricPrecision preferuje wierne odwzorowanie geometrii. Dokumentacja atrybutu SVG w MDN wyjaśnia, że mechanizm renderujący może inaczej traktować wszystkie krawędzie lub tylko te zbliżone do poziomych i pionowych. Nie ma obowiązkowego filtra wyostrzającego.

Atrybut nadrzędnego elementu SVG może być dziedziczony przez jego kształty potomne, więc zastosowanie go w elemencie głównym może wpłynąć na koło, które powinno pozostać gładkie. Zamiast tego możesz wskazać pojedynczy prostokąt lub ścieżkę. Jeśli jednocześnie obowiązują atrybut prezentacyjny SVG i deklaracja CSS shape-rendering, właściwość CSS ma pierwszeństwo.

Porównaliśmy te same kształty w dwóch rozmiarach

Stworzyliśmy jeden prostokątny znak oparty na siatce i jeden zakrzywiony kontur jako oryginalne kształty SVG. Kod, wypełnienia i viewBox były identyczne we wszystkich trzech kolumnach; zmieniała się tylko wartość shape-rendering. Każdy kształt wyrenderowano w rozmiarach 63 i 111 pikseli CSS w Chromium przy powiększeniu przeglądarki 100%. Ilustracja jest zrzutem z przeglądarki z tego lokalnego testu, a nie przedstawieniem wyobrażonego wyniku.

Ta sama geometria SVG, trzy wskazówki, dwa rozmiary

Żaden z trybów nie zmienia ścieżek. Na tym zrzucie różnice są zbyt małe, by uznać jedno ustawienie za najlepsze we wszystkich przypadkach. Nazwa brzmi jak nazwa narzędzia do naprawy, ale efekt może być niewielki dla konkretnego kształtu, rozmiaru i mechanizmu renderującego. Sprawdź grafikę w rzeczywistym miejscu docelowym, zanim zdecydujesz się pozostawić dodatkowy atrybut.

Było to jedno renderowanie w Chromium, a nie badanie zgodności przeglądarek. Czytnik PDF, edytor graficzny lub przeglądarka internetowa przy innym współczynniku skalowania urządzenia mogą inaczej rasteryzować te same ścieżki. Definicja w SVG 2 celowo pozostawia swobodę wyboru sposobu implementacji.

Przetestuj na jednym kształcie, zanim zastosujesz wszędzie

Zapisz kopię SVG, a następnie dodaj wskazówkę do reprezentatywnego kształtu. Na przykład zastosuj ją do prostokątnej części ikony, pozostawiając zakrzywiony detal z wartością auto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Otwórz plik w docelowej przeglądarce lub aplikacji w małym rozmiarze ikony i w większym rozmiarze. Porównaj go z zapisanym oryginałem, uwzględniając przekątne i krzywe. Jeśli stylizujesz SVG osadzone bezpośrednio w kodzie strony za pomocą CSS, sprawdź, czy jakaś reguła nie nadpisuje atrybutu. Usuń wskazówkę, jeśli nie daje istotnej poprawy; zbędna właściwość utrudnia późniejszą diagnozę różnic w wyświetlaniu.

Dopasuj rozwiązanie do rzeczywistego objawu

W przypadku sprite’a PNG, którego wygląd opiera się na dokładnej siatce pikseli, zachowanie obrazu rastrowego może być najlepszym rozwiązaniem. CSS image-rendering: pixelated steruje sposobem próbkowania skalowanego obrazu; to inna właściwość niż SVG shape-rendering. Poradnik konwersji pixel artu omawia, kiedy zachować siatkę, zbudować kafelki wektorowe lub celowo wygładzić kontur.

Kiedy przydaje się PerfectVector

Jeśli Twoim jedynym źródłem jest mały, spłaszczony PNG i potrzebujesz edytowalnych ścieżek, wskazówka renderowania ich nie zapewni. PerfectVector przydaje się na tym wcześniejszym etapie: przekonwertuj PNG na roboczą wersję SVG, a następnie sprawdź kształty w potrzebnym rozmiarze. Sprawdź obrys, wewnętrzne otwory i drobne detale, zanim wypróbujesz wskazówkę renderowania na wybranych ścieżkach. Wektoryzacja może przekształcić piksele w geometrię; nie potrafi zdecydować, czy schodkowy fragment pixel artu powinien stać się gładką krzywą.

Zachowaj PNG, jeśli oryginalna siatka stanowi finalną grafikę. Jeśli masz już poprawny SVG i tylko jego wygląd w przeglądarce jest dziwny, popraw bezpośrednio sposób wyświetlania lub geometrię. Gdy spłaszczony PNG rzeczywiście wymaga edytowalnych konturów, utwórz roboczą wersję SVG za pomocą PerfectVector, sprawdź jej ścieżki i porównaj renderowanie w przeglądarce w docelowym rozmiarze, zanim dodasz crispEdges.

Najczęściej zadawane pytania

Czy crispEdges usuwa wygładzanie krawędzi ze wszystkich kształtów SVG? Nie. Prosi mechanizm renderujący o nadanie priorytetu kontrastowi krawędzi. Specyfikacja dopuszcza różne implementacje, w tym takie, które zmieniają tylko niektóre krawędzie zbliżone do pionowych lub poziomych. Przetestuj wynik w przeglądarce lub aplikacji, której będziesz używać.

Czy należy dodać shape-rendering="crispEdges" do całego SVG? Tylko jeśli każdy kształt potomny na tym zyskuje. Wskazówka w elemencie głównym może wpłynąć również na zakrzywione kształty potomne. Zastosowanie atrybutu do jednego prostokątnego kształtu jest łatwiejsze do oceny i zmniejsza ryzyko pogorszenia gładkości krzywej.

Czy crispEdges naprawi białe szczeliny lub rozmyty PNG wewnątrz SVG? Nie zamknie rzeczywistej szczeliny ani nie zastąpi pikseli obrazu rastrowego ścieżkami wektorowymi. Najpierw sprawdź geometrię szczeliny. W przypadku skalowanego PNG użyj odpowiedniej metody skalowania obrazu rastrowego lub utwórz edytowalne ścieżki wektorowe, jeśli właśnie tego potrzebujesz.

Źródła

1. W3C — SVG 2 shape-rendering property — Definiuje cztery wartości jako wskazówki dla mechanizmu renderującego i wyjaśnia dopuszczalne kompromisy.
2. MDN — SVG shape-rendering attribute — Dokumentuje kształty SVG, do których można zastosować atrybut, dziedziczenie i pierwszeństwo CSS.
3. MDN — CSS shape-rendering property — Opisuje działanie właściwości i przyczyny różnic w renderowaniu krzywych.
4. MDN — CSS image-rendering property — Rozróżnia skalowanie pikseli obrazu rastrowego i renderowanie krawędzi kształtów wektorowych.