SVG feMorphology: dodaj obrys bez nowych ścieżek

Aby dodać obrys wokół całej sylwetki wielokolorowej grafiki SVG, zastosuj dylatację do jej SourceAlpha, odejmij oryginalny kanał alfa od powiększonego wyniku, nadaj kolor pozostałemu pierścieniowi i nałóż oryginalną grafikę na wierzch. Filtr zmienia wygląd renderowanego obrazu, ale dane oryginalnych ścieżek pozostają nienaruszone.

Użyj operator="erode", jeśli zamiast tego chcesz zmniejszyć sylwetkę wyznaczoną przez kanał alfa. Żadna z tych operacji nie tworzy edytowalnej ścieżki odsuniętej od oryginału. Otwory, wąskie szczeliny i ostre narożniki wymagają oceny wizualnej, ponieważ operacje morfologiczne wykorzystują prostokątne sąsiedztwo, a nie odsunięcie obrysu oparte na okręgu.

Zacznij od sylwetki, a nie od kanałów koloru

Specyfikacja W3C Filter Effects definiuje dylatację jako maksimum obliczane osobno dla każdej składowej w prostokątnym sąsiedztwie, a erozję jako minimum. W przypadku SourceAlpha wejściem jest kanał alfa grafiki. Dzięki temu możemy wyznaczyć sylwetkę bez osobnego rozszerzania kanałów koloru ciemnoturkusowej i koralowej części.

Ten przykład nakłada filtr na całą grafikę złożoną z dwóch ścieżek. Jej przezroczysty kwadratowy otwór jest częścią sylwetki wyznaczonej przez kanał alfa. Koralowy element już znajduje się wewnątrz nieprzezroczystego ciemnoturkusowego obszaru, więc nie tworzy osobnej granicy zewnętrznej.

Utworzyliśmy SVG ręcznie i otworzyliśmy pięć samodzielnych wariantów w przeglądarce. Każdy plik zachowuje te same dwie definicje oryginalnych ścieżek. Poniższe porównanie pokazuje rzeczywisty rendering tych plików — bez grafiki uzyskanej przez wektoryzację i bez wygenerowanego podglądu efektu.

Przy promieniu 10 obrys rozszerza się poza widoczną sylwetkę i do wnętrza otworu. Przy 22 złoty kolor wypełnia kwadratowy otwór tej grafiki testowej. Wariant 18 4 rozszerza się bardziej w poziomie niż w pionie. Erozja zmniejsza nieprzezroczysty obszar zewnętrzny i powiększa przezroczysty otwór; zmienia się również dolny szpic.

Te obserwacje dotyczą tej grafiki i tych ustawień. Nie stanowią ogólnej reguły bezpiecznego promienia dla innych logo czy ikon.

Utwórz zewnętrzny pierścień z kanału alfa

Zapisz ten kompletny przykład jako outline.svg i otwórz go w przeglądarce. To dokładnie ten plik SVG z promieniem 10, którego użyliśmy do wykonania zrzutu:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

Filtr działa w czterech krokach:

1. feMorphology stosuje dylatację do SourceAlpha, tworząc grown.
2. feComposite zachowuje część grown poza oryginalnym kanałem alfa, tworząc ring.
3. feFlood dostarcza złoty kolor; kolejna operacja kompozycji ogranicza ten kolor do pierścienia.
4. feMerge umieszcza oryginalny SourceGraphic nad kolorowym pierścieniem.

Kolejność wejść ma znaczenie przy odejmowaniu. Sekcja specyfikacji dotycząca kompozycji określa in jako obraz źródłowy, a in2 jako obraz docelowy. Tutaj in="grown", in2="SourceAlpha" i operator="out" usuwają oryginalny nieprzezroczysty obszar z powiększonego kanału alfa. Zamiana tych wejść nie daje takiego zewnętrznego pierścienia.

Słowo poza oznacza poza nieprzezroczystym obszarem kanału alfa, także w przestrzeni wewnątrz przezroczystego otworu. Jeśli obrys ma omijać wewnętrzne otwory, ten filtr nie rozróżnia ich automatycznie. Potrzebujesz osobnej sylwetki lub innej konstrukcji, która określa zamierzony obszar zewnętrzny.

Kolory źródłowe pozostają widoczne, ponieważ niezmodyfikowany SourceGraphic nakładamy na końcu. To inne rozwiązanie niż zwykły obrys ścieżki. Obrysy wyśrodkowane, przycięte do wnętrza lub ograniczone maską do zewnętrza opisuje artykuł o wyrównaniu obrysu SVG; kolejność malowania wyjaśnia prostszy przypadek nakładania obrysu i wypełnienia.

Zastosuj erozję do kanału alfa i zachowaj kolory w pozostałym obszarze

Zastąp filtr obrysu poniższą definicją i w końcowym elemencie use ustaw filter="url(#erode)":

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Ta operacja kompozycji zachowuje oryginalną grafikę tylko tam, gdzie pozostaje kanał alfa po erozji. Nie nakłada ponownie całego oryginału na wierzch, ponieważ ukryłoby to zamierzone zwężenie. W tej grafice testowej zewnętrzny ciemnoturkusowy obszar staje się mniejszy, a koralowy obszar pozostaje w jego wnętrzu.

W przykładach przeznaczonych do użycia podawaj operator jawnie. Dokumentacja atrybutu operator odróżnia erode i dilate w feMorphology od in i out w feComposite. Atrybut o tej samej nazwie pełni różne funkcje w tych dwóch elementach. Domyślnym operatorem morfologicznym jest erode, więc jego pominięcie łatwo prowadzi do efektu przeciwnego do zamierzonej dylatacji.

Rozróżnij jednostki promienia i obszar filtra

Dokumentacja atrybutu radius dopuszcza jedną lub dwie liczby. Jedna dotyczy obu osi; przy dwóch pierwsza jest promieniem w osi x, a druga w osi y. Aby uzyskać dwa dodatkowe warianty obrysu, w kompletnym przykładzie zmień tylko radius="10" na radius="22" lub radius="18 4".

Są to promienie w układzie współrzędnych wybranym przez primitiveUnits, a nie gwarancja obramowania o stałej grubości w pikselach CSS przy każdym rozmiarze wyświetlania. Jawnie stosujemy primitiveUnits="userSpaceOnUse" z viewBox o wartości 0 0 300 220. Zmiana rozmiaru wyświetlanego SVG skaluje wygląd efektu razem z grafiką.

Dwa atrybuty o podobnych nazwach sterują różnymi rzeczami:

Dokumentacja MDN dotycząca primitiveUnits opisuje układ współrzędnych operacji składowych filtra. Dokumentacja filterUnits osobno opisuje obszar zewnętrzny. Domyślną wartością filterUnits jest objectBoundingBox, a primitiveUnits — userSpaceOnUse. Jawne ustawienie obu ułatwia analizę przykładu.

Grafika źródłowa zajmuje zakres od x=50 do 250 oraz od y=60 do 195. Największy przetestowany promień jednakowy dla obu osi wynosi 22, a obszar filtra i obszar wyświetlania o wymiarach 300 na 220 pozostawiają miejsce na taki wynik. Po zmianie grafiki lub promienia sprawdź ponownie obie granice. Specyfikacja opisuje obszar filtra jako bezwzględną granicę przycięcia: większy promień nie pozwala malować poza tym obszarem. Poradnik o przycinaniu filtrów SVG i obszaru wyświetlania pokazuje te dwa osobne ograniczenia.

Jeśli filtr wydaje się nieaktywny, sprawdź również radius. Jego domyślna wartość to 0, a dokumentacja podaje, że wartość ujemna lub zerowa wyłącza efekt operacji składowej filtra. Powyższe przykłady używają jawnie podanych dodatnich wartości dla obu osi.

Sprawdź otwory i narożniki przed przekazaniem pliku

Prostokątne sąsiedztwo operacji morfologicznych sprawia, że efekt wygląda inaczej niż tradycyjny zaokrąglony obrys. Równe promienie x i y nie zmieniają tego sąsiedztwa w koło. Schodkowy dolny szpic w porównaniu jest dobrym miejscem do sprawdzenia tej różnicy.

Sprawdziliśmy, że każdy z pięciu plików nadal zawiera dwie ścieżki źródłowe z identycznymi atrybutami d. Ich definicje filtrów się różnią; geometria źródłowa pozostaje taka sama. Sprawdź rzeczywiste obiekty SVG, jeśli narzędzie docelowe potrzebuje ścieżek, które możesz edytować, odsuwać lub przekazać do produkcji. Do tego użyj operacji na geometrii w edytorze, a następnie sprawdź powstałe kontury. Sama zmiana lub usunięcie tego filtra ich nie tworzy.

Zachowaj plik wzorcowy bez filtra i osobną kopię do przekazania. Otwórz przekazywany plik w rzeczywistym narzędziu docelowym i porównaj narożniki, wewnętrzne otwory, kolory oraz granice obrazu. Ten przykład z przeglądarki nie potwierdza obsługi w konkretnej aplikacji projektowej, narzędziu eksportującym czy ploterze tnącym.

Przygotuj grafikę źródłową przed dodaniem efektu

PerfectVector może pomóc, gdy grafika wyjściowa istnieje tylko jako PNG lub JPG. Przygotuj wstępną wersję SVG, a następnie sprawdź odtworzoną sylwetkę źródłową, małe otwory i granice kolorów, zanim zastosujesz filtr. Obrys uzyskany przez operację morfologiczną uwydatni problemy tej sylwetki, zamiast naprawić za Ciebie zamierzoną geometrię.

Jeśli masz wektorowy plik wzorcowy, użyj go bezpośrednio. W przypadku prostego symbolu ręczne przerysowanie może być łatwiejsze do kontrolowania. Wektoryzacja spłaszczonego obrazu z trwale zapisanym obrysem nie odtwarza oryginalnych ustawień filtra ani nie pozwala ustalić, która część była kształtem bez filtra. Wprowadzenie do wektoryzacji obrazów wyjaśnia to ograniczenie rekonstrukcji.

Najczęściej zadawane pytania

Czy feMorphology tworzy edytowalną ścieżkę obrysu? Nie. Zmienia renderowany wynik działania filtra. Ten przykład zachowuje te same dwie ścieżki źródłowe, więc jeśli narzędzie docelowe potrzebuje osobnego konturu, musisz wykonać operację na geometrii i sprawdzić import.

Dlaczego złoty obrys wypełnia otwór w moim SVG? Pierścień rozszerza się poza nieprzezroczysty obszar kanału alfa, także do przezroczystych otworów. W tej grafice testowej promień 22 wypełnia kwadratowy otwór. W przypadku innej grafiki trzeba osobno sprawdzić szczeliny i promień.

Dlaczego używać SourceAlpha zamiast SourceGraphic? SourceAlpha pozwala filtrowi działać na sylwetce bez dylatacji każdego oryginalnego kanału koloru. W przykładzie nadajemy kolor temu pierścieniowi alfa osobno i na końcu nakładamy SourceGraphic, aby pokazać oryginalne kolory.

Źródła

1. W3C — Filter Effects Level 1 — Definiuje prostokątne sąsiedztwo operacji morfologicznych, wejścia kompozycji i przycinanie do obszaru filtra.
2. MDN — radius — Definiuje składnię promienia z jedną lub dwiema wartościami, jednostki i wartości wyłączające efekt.
3. MDN — operator — Rozróżnia operacje morfologiczne i operacje kompozycji.
4. MDN — primitiveUnits — Określa układ współrzędnych dla promienia operacji morfologicznej.
5. MDN — filterUnits — Określa układ współrzędnych zewnętrznego obszaru filtra.

Jeśli Twoim źródłem jest wyłącznie obraz rastrowy, przygotuj grafikę wektorową w PerfectVector, sprawdź sylwetkę i otwory bez filtra, a następnie dodaj obrys i porównaj końcowy plik w programie, w którym będzie wyświetlany.