Wykrywanie krawędzi SVG: podgląd feConvolveMatrix

Wykrywanie krawędzi SVG przez feConvolveMatrix zmienia renderowane piksele wokół granic kolorów. Może tworzyć podgląd krawędzi z PNG wewnątrz SVG, ale nie tworzy edytowalnych konturów ścieżek. Zachowaj to rozróżnienie, gdy kolejnym zadaniem jest edycja logo, przygotowanie grafiki liniowej lub tworzenie grafiki internetowej.

Przydatnym pierwszym testem jest mały obraz w skali szarości o znanym kształcie. Zastosuj symetryczne jądro krawędzi, zachowaj alfa i porównaj z niezmienionym źródłem. Następnie sprawdź elementy SVG. Ostrzej wyglądająca granica nie potwierdza, że obraz stał się geometrią wektorową.

Zacznij od kontrolowanego podglądu krawędzi

Opis feConvolveMatrix przedstawia splot jako obliczenie obejmujące piksel wejściowy i jego sąsiadów. To jądro 3 × 3 odejmuje ośmiu sąsiadów od ośmiokrotności środka:

-1 -1 -1
-1  8 -1
-1 -1 -1

Suma współczynników wynosi zero. W jednolitym obszarze odpowiedź jest zerowa; przy zmianie jasności może być dodatnia lub ujemna. Przy bias="0" wyniki ujemne są obcinane do dolnej granicy koloru. Podgląd nie pokazuje więc obu stron każdej granicy jednakowo.

Przykład jawnie używa divisor="1". Opis divisor dokumentuje normalizację przez tę wartość i domyślne 1 dla jądra o sumie zero. Ustawia też color-interpolation-filters="sRGB", aby korzystać z wartości kanałów sRGB zamiast domyślnego przetwarzania linearRGB prymitywu.

Zapisz ten kompletny, samowystarczalny plik jako edge-preview.svg i otwórz w przeglądarce. Osadzony PNG to nasz oryginalny romb w skali szarości 48 × 48 na nieprzezroczystym białym papierze. Środek jest biały, a nie przezroczysty.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

Definicja filtra działa tylko dlatego, że obraz odwołuje się do niej przez filter="url(#effect)". Opis filtra SVG wyjaśnia, że sama definicja nie jest rysowana. Jawny obszar obejmuje to źródło 48 × 48; inna grafika wymaga własnej kontroli obszaru.

Co zmieniło się w teście przeglądarkowym

Sprawdziliśmy sześć oryginalnych przykładów w Chrome przy 48 i 192 pikselach CSS. Pięć plików zawiera jeden osadzony obraz PNG i żadnych ścieżek. Szósty jest niezależnie, ręcznie utworzonym odpowiednikiem wektorowym. To kontrola geometrii, a nie wynik zastosowania filtra lub obrysowania PNG.

Próbki RGBA pochodziły z odczytu Canvas 48 × 48 każdego wyrenderowanego SVG. Wyświetlane przykłady sprawdzano osobno w obu rozmiarach. To obserwacje dla tego źródła i przeglądarki, a nie gwarancja zgodności lub czytelności. Powiększenie rastrowego podglądu nie odzyskało czystszego konturu.

Odpowiedź pikseli i edytowalna geometria

Napraw znikający wynik bez usuwania papieru

Domyślna wartość preserveAlpha to false. Przy tym ustawieniu jądro przetwarza również alfa. Nasze nieprzezroczyste wejście ma wszędzie alfa 1, więc jądro krawędzi o sumie zero kasuje jednolite alfa wraz z jednolitym kolorem. Wynik zniknął w badanym przykładzie.

Ustawienie preserveAlpha="true" zachowuje alfa źródła podczas przetwarzania koloru. Opis preserveAlpha dokumentuje różnicę. W tym teście przywraca nieprzezroczysty podgląd krawędzi. Zachowuje też nieprzezroczystość papieru i białego środka, mimo że ich przefiltrowany kolor staje się czarny. Zachowanie alfa nie usuwa tła ani nie znajduje otworów w logo.

Jeśli podgląd jest głównie czarny, najpierw porównaj znany jednolity obszar ze znaną granicą. Czerń może być poprawną odpowiedzią zerową. Aby sprawdzić zmiany jasności ze znakiem wokół tonu pośredniego, wypróbuj bias="0.5"; opis bias wyjaśnia przesunięcie dodawane po dzieleniu. Zmienia to zakres wyświetlania, a nie geometrię SVG.

Sprawdzaj brzegi oddzielnie od grafiki

Zachowaj edgeMode="duplicate" w początkowym porównaniu. Rozszerza wartości pikseli brzegowych, gdy sąsiednie próbki wypadają poza wejściem. none używa próbek RGBA o wartości zero; wrap pobiera próbki z przeciwległego brzegu. To odrębne reguły w opisie edgeMode.

W naszej nieprzezroczystej białej karcie zmiana tylko duplicate na none utworzyła jasną ramkę na zewnątrz karty. Ta granica należy do prostokąta obrazu, a nie rombu. Porównaj plik bez filtra, zanim potraktujesz ramkę jako kontur grafiki.

Specyfikacja Filter Effects definiuje cel jądra i zachowanie próbkowania. Tutaj targetX="1" i targetY="1" centrują jądro 3 × 3. Ten przykład nie ustawia kernelUnitLength. Nie zakładaj, że sąsiednia próbka zawsze obejmuje jedną jednostkę użytkownika SVG przy każdym rozmiarze wyświetlania; sprawdź przekazany rendering.

Użyj wyostrzania jako kontroli, nie odzyskiwania rozmycia

Aby zachować wypełnioną grafikę i podkreślić lokalne zmiany, zastąp tylko kernelMatrix taką macierzą:

0 -1  0
-1 5 -1
0 -1  0

Suma wynosi 1. Jednolita wartość kanału c zwraca 5c - 4c = c przy divisor 1 i bias 0. W naszym przykładzie jednolita szara próbka pozostała na 64, a piksele granicy zmieniły się. Zachowaj preserveAlpha="true" i edgeMode="duplicate" w tym porównaniu.

Wyostrzanie może podkreślać szum i obwódki razem z przydatnymi granicami. Nie odzyskuje szczegółów źródła utraconych, zanim obraz trafił do filtra. Jeśli powiększony podgląd wygląda źle, wróć do oryginalnego obrazu, zamiast traktować silniejsze jądro jako zamiennik rozdzielczości źródła.

Sprawdź plik, zanim nazwiesz go obrysem wektorowym

Opublikowany przykład zawiera <image>, którego href zaczyna się od data:image/png. Opis elementu image przedstawia zasoby rastrowe i SVG, które element może wyświetlać. Tutaj typ mediów identyfikuje osadzony raster; filtr krawędzi pozostawia ten element na miejscu.

Dla porównania niezależnie utworzony wzorzec używa tej ścieżki złożonej na białym prostokącie:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

Współrzędne napisano osobno. Nie odzyskano ich z filtrowanego obrazu, a rysunek pikselowy i kontrola geometryczna nie muszą zgadzać się przy każdej próbce granicy. Poradnik sprawdzania osadzonego rastra wyjaśnia kontrolę mieszanego SVG bez polegania wyłącznie na powiększaniu.

Dla grafiki internetowej zachowaj niefiltrowany wzorzec SVG i użyj filtrowanej kopii do wyświetlania, jeśli efekt służy projektowi. Do edycji lub ścieżek produkcyjnych sprawdź faktyczne kontury źródła i wewnętrzny otwór. Poradnik zamiany grafiki liniowej na SVG opisuje to zadanie geometryczne.

PerfectVector pasuje, gdy początkowa grafika jest płaskim PNG lub JPG, a potrzebujesz edytowalnych kształtów źródłowych. Przekonwertuj oryginalny obraz na SVG, sprawdź kontur i otwór wewnętrzny oraz zachowaj czysty wynik jako wzorzec. Udany podgląd krawędzi nie zastępuje tej kontroli. Poradnik wektoryzacji wyjaśnia różnicę między odtwarzaniem ścieżek a stosowaniem efektu obrazu.

Najczęstsze pytania

Czy wykrywanie krawędzi SVG feConvolveMatrix tworzy ścieżki wektorowe? Nie. Oblicza renderowany efekt pikselowy. Osadzony PNG w tym przykładzie pozostaje elementem obrazu; edytowalne kontury wymagają osobno narysowanej lub obrysowanej geometrii.

Dlaczego mój filtr krawędzi powoduje zniknięcie grafiki? Sprawdź preserveAlpha. Domyślne false filtruje także alfa. W tym nieprzezroczystym przykładzie jądro o sumie zero uczyniło badany wynik przezroczystym. Zachowanie alfa przywróciło nieprzezroczysty podgląd.

Czy preserveAlpha usuwa białe tło? Nie. Zachowuje alfa źródła. Nieprzezroczyste białe tło pozostaje nieprzezroczyste, nawet gdy filtrowany kolor staje się czarny. Usuwanie tła i odtwarzanie ścieżek to osobne zadania.

Dlaczego filtr krawędzi rysuje ramkę wokół obrazu? Sprawdź edgeMode i prostokąt wejściowy. Próbki o wartości zero poza naszą nieprzezroczystą białą kartą utworzyły jasny brzeg zewnętrzny. Powielanie wartości brzegu pozwoliło uniknąć ramki w tym przykładzie.

Źródła

1. MDN: feConvolveMatrix — splot otoczenia pikseli i domyślne przetwarzanie kolorów.
2. MDN: divisor — normalizacja i domyślna wartość dla sumy zero.
3. MDN: filter — definiowanie i stosowanie efektu filtra.
4. MDN: preserveAlpha — przetwarzanie samego koloru lub także alfa.
5. MDN: bias — przesunięcie odpowiedzi po dzieleniu.
6. MDN: edgeMode — obsługa brzegu przez powielanie, zawijanie i zero.
7. W3C: Filter Effects, feConvolveMatrix — reguły celu i próbkowania.
8. MDN: image — referencyjna zawartość obrazów rastrowych i SVG.