Próg alfa w SVG: zamień przezroczystość w ostre odcięcie

Aby ustawić próg odcięcia alfa na 0.5, użyj feComponentTransfer z <feFuncA type="discrete" tableValues="0 1"/>. Piksele o wejściowej wartości alfa poniżej 0.5 stają się przezroczyste; piksele o wartości alfa równej 0.5 lub większej stają się nieprzezroczyste. Pomiń funkcje RGB, jeśli chcesz, aby ich mapowania transferu pozostały tożsamościowe.

Ten filtr zmienia renderowany kanał alfa, a nie strukturę samej grafiki. Nie może usunąć nieprzezroczystego białego tła, ponieważ białe piksele z wartością alfa 1 przechodzą przez ten sam próg co nieprzezroczyste kolorowe piksele. PNG osadzony w SVG również pozostaje obrazem rastrowym.

Porównaj znane piksele źródłowe, zanim wybierzesz próg

Przygotowaliśmy mały, 8-bitowy PNG RGBA ze stopniową zmianą wartości alfa, przezroczystym kwadratowym otworem, nieprzezroczystym białym polem i sześcioma próbkami o kontrolowanych wartościach. Każdy SVG w tym teście osadza te same bajty PNG w jednym elemencie image. Wariant bez filtra, wariant discrete i wariant z interpolowaną tabelą różnią się tylko konfiguracją filtra.

Poniższa szachownica należy do otaczającej strony, poza SVG. Ujawnia przezroczystość, zamiast udawać część kanału alfa obrazu.

Nasza strona wczytała rzeczywiste warianty SVG, narysowała je na płótnie canvas w przeglądarce i pobrała próbki z wnętrza sześciu pól. Wyjściowe bajty alfa miały następujące wartości:

Znormalizowane wartości alfa to te bajty podzielone przez 255. Zatem 127/255 jest nieco mniejsze niż 0.5, a 128/255 — nieco większe. Te próbki leżą po obu stronach matematycznego progu odcięcia; 8-bitowy bajt PNG nie reprezentuje dokładnie 0.5.

Dla otworu w obrazie źródłowym zmierzono wartość alfa 0 w każdej wersji. Dla białego pola zmierzono 255 w każdej wersji. To obserwacje z tego kontrolowanego materiału testowego, a nie stwierdzenie, że dowolna grafika zachowa po progowaniu każdy pożądany szczegół.

Zastosuj transfer do kanału alfa

Podstawowy filtr jest krótki:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Zastosuj go do obrazu za pomocą filter="url(#alpha)". Obszar filtra w tym przykładzie obejmuje cały obraz źródłowy i obszar wyświetlania o wymiarach 320 na 240. Użyj granic odpowiednich dla swojej grafiki, zamiast kopiować te wymiary do niepowiązanego pliku.

Dokumentacja feFuncA w MDN wskazuje, że jest to funkcja transferu kanału alfa wewnątrz feComponentTransfer. Dokumentacja component-transfer opisuje mapowanie poszczególnych kanałów oraz obliczenia na wartościach kolorów bez wstępnego przemnożenia przez alfa.

Obecna specyfikacja Filter Effects przypisuje nieokreślonym funkcjom kanałów mapowanie tożsamościowe. Nasz kod pomija feFuncR, feFuncG i feFuncB; zmienia tylko funkcję transferu kanału alfa. Nie oznacza to, że kolory widoczne na tle wyglądają identycznie: zmiana alfa zmienia ich wygląd po złożeniu z tłem.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

Kompletny materiał testowy zachowuje bajty PNG. Filtr nie zmienia kolorów zapisanego pliku źródłowego ani nie zastępuje go ścieżkami. Diagnostyka osadzonego obrazu rastrowego wyjaśnia, dlaczego sama nazwa pliku z rozszerzeniem .svg nie świadczy o obecności geometrii wektorowej.

Odróżnij skok od interpolowanej tabeli

Oba typy transferu korzystają z tableValues, ale inaczej interpretują wpisy. Dokumentacja type wymienia dostępne funkcje transferu; dokumentacja tableValues opisuje listę wartości do odczytu.

W przypadku discrete każdy wpis zajmuje przedział wejściowy o jednakowej szerokości. Przy dwóch wpisach 0 1 pierwszy przedział to 0 ≤ A < 0.5, a drugi to 0.5 ≤ A ≤ 1. Wyjście przeskakuje między tymi dwiema wartościami.

W przypadku table wpisy są punktami końcowymi przedziałów interpolacji liniowej. Przy 0 1 interpolacja odwzorowuje każdą wejściową wartość alfa na nią samą. To transfer tożsamościowy, dlatego nasza kolumna z próbkami dla table zgadza się z kolumną bez filtra.

Wzory przedziałów w specyfikacji wyjaśniają również te udokumentowane warianty:

Nasz zrzut ekranu przedstawia test przypadków discrete i table z dwoma wpisami. Wiersze z czterema wpisami opisują mapowania ze specyfikacji; nie są dodatkowymi zmierzonymi wariantami grafiki. Wybieraj type świadomie, zamiast zakładać, że lista zawierająca wyłącznie zera i jedynki musi dawać próg binarny.

Oddziel wejściową wartość alfa od późniejszego krycia

Podaj filtrowi rzeczywiste źródłowe wartości alfa. W naszym materiale testowym są one zapisane w pikselach PNG. W teście grafiki wektorowej użyj wartości alfa wypełnienia lub fill-opacity przed zastosowaniem filtra.

Model składania obrazu w Filter Effects stosuje filtry przed kryciem. Ogólne krycie elementu lub otaczającej go grupy może więc zmniejszyć krycie renderowanego wyniku po działaniu filtra. Jeśli zastosujesz progowanie do źródła, a następnie złożysz wynik z niższym kryciem, może on znów wyglądać na półprzezroczysty. Nie uwzględniaj tego późniejszego krycia w kontrolowanym teście progu.

Ostre odcięcie usuwa również półprzezroczyste przejście w obrazie źródłowym. Słabo widoczne piksele znikają, a zachowane półprzezroczyste piksele stają się całkowicie nieprzezroczyste. Może to usunąć delikatną poświatę lub cienką krawędź, którą chcesz zachować. Obejrzyj wynik w docelowym rozmiarze i na więcej niż jednym tle. Binarne wartości wyjściowe alfa nie gwarantują, że na ostatecznie wyświetlanej krawędzi nie będzie efektów próbkowania lub składania obrazu.

Jeśli półprzezroczystość jest częścią projektu, zachowaj ją lub użyj stopniowego transferu zamiast wymuszać odcięcie. W przypadku celowo monochromatycznej maski widoczności poradnik masek SVG w CSS opisuje inny sposób prezentacji.

Nieprzezroczysta biel wymaga innej diagnozy

Białe pole pozostaje, ponieważ jego wartość alfa oznacza pełną nieprzezroczystość. Ta operacja wybiera piksele według alfa, a nie według tego, czy wyglądają na białe. Całkowicie nieprzezroczyste piksele tła nie stają się przezroczyste przy tym mapowaniu discrete 0 1.

Jeśli plik zawiera niechciane białe tło, najpierw ustal, czy jest ono osobnym kształtem SVG, czy częścią obrazu rastrowego. Usuń lub zmodyfikuj niechciany wektorowy kształt tła bezpośrednio. W przypadku PNG z bielą zapisaną w pikselach oczyść źródłowy obraz rastrowy przed odtworzeniem grafiki wektorowej lub zastosuj odpowiednią metodę usuwania tła. Poradnik SVG z przezroczystym tłem wyjaśnia te przypadki.

Zanim usuniesz tło według koloru, pamiętaj o rzeczywiście białych częściach obiektu. Ten filtr alfa nie potrafi rozpoznać, który biały obszar jest tłem, a który należy do grafiki, ani przywrócić informacji o kolorze utraconych podczas spłaszczania źródła.

Przygotuj przezroczysty obraz rastrowy przed odtworzeniem grafiki wektorowej

PerfectVector może pomóc, gdy gotowy projekt jest dostępny wyłącznie jako obraz rastrowy, a potrzebujesz geometrii SVG. Najpierw przygotuj PNG z rzeczywistą przezroczystością, a następnie przekonwertuj PNG na SVG. Porównaj podgląd na kontrastowym tle, obejrzyj sylwetkę i otwory oraz sprawdź pobrany plik pod kątem niechcianej geometrii tła.

Nasz przykład z filtrem to eksperyment dotyczący wyświetlania. Nie przesyła przefiltrowanego SVG do wektoryzacji i nie przedstawia nowego wyniku wektoryzacji. Jeśli chcesz zachować wygląd obrazu rastrowego po progowaniu, przygotuj i sprawdź w edytorze rzeczywistą rastrową kopię przeznaczoną do użycia, zanim rozważysz odtworzenie grafiki wektorowej. Sprawdź kanał alfa tej kopii, zamiast polegać na podglądzie w przeglądarce.

Jeśli masz dostępny oryginał wektorowy, użyj go bezpośrednio. Zachowaj półprzezroczystość, gdy niesie przydatne informacje o projekcie, i przerysuj prosty symbol, gdy ułatwi to jego późniejszą edycję. Omówienie wektoryzacji obrazów rozróżnia odtwarzanie grafiki z obrazu rastrowego i zmianę sposobu prezentacji istniejącego SVG.

FAQ

Jaki próg odcięcia alfa stosuje discrete z tableValues 0 1? Wejściowa wartość alfa poniżej 0.5 jest mapowana na 0; wartość alfa równa lub większa niż 0.5 jest mapowana na 1. W testowanych 8-bitowych próbkach PNG bajt 127 staje się przezroczysty, a bajt 128 — nieprzezroczysty.

Dlaczego tableValues 0 1 pozostawia moją przezroczystość bez zmian? Przy type table te wpisy definiują interpolację liniową od 0 do 1, która jest tożsamościowa. Użyj type discrete, aby uzyskać pokazane tutaj mapowanie dwustopniowe.

Czy to usunie biel lub zamieni PNG w ścieżki wektorowe? Nie. Całkowicie nieprzezroczysta biel przechodzi przez ten próg odcięcia alfa. Nasze warianty SVG nadal zawierają ten sam PNG w jednym elemencie image i nie mają żadnych ścieżek; oczyszczanie tła i odtwarzanie grafiki wektorowej to osobne zadania.

Źródła

1. W3C — Filter Effects Level 1 — Definiuje domyślne mapowania tożsamościowe, transfer kanałów bez wstępnego przemnożenia przez alfa oraz wzory przedziałów table/discrete.
2. MDN — feComponentTransfer — Wyjaśnia mapowanie kanałów wykonywane przez ten element filtra.
3. MDN — feFuncA — Wskazuje funkcję transferu kanału alfa.
4. MDN — type — Wymienia typy funkcji transferu składowych i kontekst ich atrybutu.
5. MDN — tableValues — Opisuje wpisy tabeli wartości używane przez transfer table i discrete.

Potrzebujesz geometrii wektorowej z projektu rastrowego? Przygotuj i przekonwertuj przezroczysty PNG, a następnie obejrzyj sylwetkę i otwory w podglądzie oraz sprawdź pobrany SVG na kolorowym tle.