Ziarnista tekstura SVG: zatrzymaj szum wewnątrz grafiki

Aby dodać ziarno do ilustracji SVG, wygeneruj szum przez feTurbulence, zamień go w delikatną monochromatyczną nakładkę i skomponuj ją wewnątrz SourceAlpha. Nałóż ją na SourceGraphic, aby oryginalne wypełnienie pozostało widoczne. Dodaje to renderowaną teksturę, zachowując geometrię ścieżek grafiki.

Sam prymityw szumu daje inny wynik: wypełnia własny podobszar prymitywu filtra, zamiast podążać za konturem kształtu. Dlatego liść może stać się prostokątną plamą szumu. Opis feTurbulence MDN dokumentuje to zachowanie.

W przypadku ilustracji internetowej przydatne rezultaty to teksturowana wersja do wyświetlania i czysta wersja wzorcowa. Ziarno generowane tym filtrem nie jest zbiorem edytowalnych kropek ani konturów cięcia.

Oddziel kształt od efektu powierzchni

Zacznij od prostej wypełnionej ścieżki, która już bez ziarna wygląda właściwie. Popraw jej kontur, szczeliny i kolor przed dodaniem efektu. Filtr nie naprawi tej geometrii.

Trzy stany poniżej wyjaśniają problem granicy:

Granica ma znaczenie

SourceGraphic dostarcza filtrowany element. SourceAlpha dostarcza jego kanał alfa. Filtr działa na obrazie grafiki; nie przepisuje poleceń ścieżki. Te wejścia i graf filtra definiuje specyfikacja Filter Effects W3C.

Jeśli początkowa grafika ma już przezroczyste obszary, one także wpływają na ograniczanie. SourceAlpha podąża za faktyczną renderowaną nieprzezroczystością, a nie odgadniętym prostokątem obwiedni.

Skopiuj kompletny przykład ziarna SVG

Zapisz go jako plik .svg i otwórz w przeglądarce. Zawiera jedną oryginalną ścieżkę liścia, deterministyczne ziarno szumu, ciemną nakładkę i jawny etap ograniczania. Ukośny otwór jest częścią ścieżki, więc pozostaje przezroczysty w wersji teksturowanej.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

Filtr ma cztery zadania:

1. feTurbulence tworzy szum i nadaje mu nazwę noise.
2. Macierz ustawia czerwony, zielony i niebieski na zero. Ostatni wiersz mnoży kanał alfa szumu przez 0.28, tworząc delikatną czarną nakładkę o nazwie ink.
3. feComposite z operator="in" zachowuje tę nakładkę tam, gdzie istnieje SourceAlpha.
4. feMerge rysuje najpierw oryginalną grafikę, a nad nią ograniczoną nakładkę.

Opis feColorMatrix MDN wyjaśnia, jak pięciokolumnowa macierz przekształca kolor i kanał alfa. Tutaj zmienia obraz szumu, a nie wypełnienie liścia. Opis feComposite MDN wyjaśnia operację in, która ogranicza nakładkę do drugiego wejścia.

Wartość 0.28 jest punktem wyjścia dla tego koralowego liścia, a nie uniwersalnym ustawieniem ziarna. Zmniejsz ją, jeśli tekstura przygasza grafikę; zwiększ, jeśli ziarno znika w docelowym rozmiarze wyświetlania. Ziarno z czarnej nakładki przyciemnia wypełnienie. Nie stworzy widocznych jasnych plamek na czarnym motywie.

Operacje koloru i alfa służące do zmiany kolorów istniejącej grafiki opisuje osobny poradnik feColorMatrix. Wyostrzanie istniejącej przezroczystej krawędzi opisują progi alfa SVG. Żadna z tych operacji nie dostarcza używanego tu źródła generowanego szumu.

Sprawdź wynik w rozmiarze, w jakim zobaczą go odbiorcy

Przygotowaliśmy trzy wersje tej oryginalnej ścieżki: bez filtra, z filtrem zawierającym tylko prymityw szumu oraz z pełnym grafem ograniczonego ziarna powyżej. Sprawdziliśmy renderowane wersje w Chrome przy 120 × 120 i 360 × 360 pikselach CSS, z tym samym viewBox 0 0 200 200.

DOM przeglądarki zawierał jedną ścieżkę w każdym przykładzie. Wszystkie sześć atrybutów d było identycznych. To ustala granicę tego przykładu: zmieniła się renderowana powierzchnia i nie dodano ścieżek plamek. To przygotowany test przeglądarkowy, a nie wynik PerfectVector lub natywnego edytora wektorowego.

Większy podgląd ułatwia ocenę efektu, lecz mniejsza wersja decyduje, czy grafika nadal jest czytelna. Uwzględnij oba rozmiary w przeglądzie. Zwiększenie rozmiaru wyświetlania przy tym samym viewBox zmienia też pozorną skalę tekstury; nie zakładaj, że jeden podgląd reprezentuje wszystkie zastosowania.

Dostosowuj ziarno po jednym parametrze

Dla małej ilustracji na karcie internetowej zacznij od wartości z przykładu. Następnie zmień jeden parametr, porównaj te same dwa rozmiary i zachowaj kopię preferowanej wersji.

baseFrequency przyjmuje jedną wartość dla obu osi albo dwie wartości dla częstotliwości poziomej i pionowej. Opis baseFrequency MDN dokumentuje tę różnicę. Dla tego liścia zacznij od jednej wartości; nierówne wartości są świadomym wyborem tekstury kierunkowej.

numOctaves steruje liczbą oktaw szumu, jak opisuje dokumentacja numOctaves MDN. Dodatkowe oktawy nie są dodatkowymi ścieżkami wektorowymi. Używaj ich tylko wtedy, gdy poprawiają widoczną powierzchnię w potrzebnym rozmiarze.

Przykład jawnie ustawia color-interpolation-filters="sRGB". Zachowaj to ustawienie podczas porównywania kandydatów, aby zmiana przetwarzania kolorów nie zakłóciła oceny ziarna.

Napraw prostokąt, brak wypełnienia lub brudną krawędź

Tekstura tworzy prostokątną plamę. Sprawdź końcowe wyjście filtra. Jeśli kończy się na feTurbulence, zwraca obraz szumu. Przywróć macierz, kompozycję z SourceAlpha i scalenie. Powiększenie prostokąta filtra jedynie da nieograniczonemu szumowi więcej miejsca.

Kolor liścia znika. Sprawdź, czy pierwszy węzeł scalania używa SourceGraphic. Sam końcowy wynik inside zawiera ciemną nakładkę, a nie oryginalne koralowe wypełnienie. Sprawdź też pisownię i wielkość liter każdego nazwanego odwołania result i in.

Szum pozostaje w przezroczystym otworze. Potwierdź, że drugim wejściem kompozycji jest SourceAlpha, a nie prostokątny szum lub nieprzezroczyste tło. Zastosuj filtr do grafiki, którą chcesz teksturować. Dodanie nieprzezroczystego tła do filtrowanej grupy zmienia wejście alfa.

Część wyniku jest przycięta. Sprawdź x, y, width i height w filtrze. Wyznaczają dostępny obszar filtra, jak opisuje dokumentacja filter MDN. Przykład daje niewielki zapas. Szerszy obszar nie naprawi brakującego etapu ograniczania ani przycinania narzuconego przez osobny kontener.

Mała grafika wygląda na zabrudzoną. Najpierw zmniejsz alfa nakładki, a potem porównaj częstotliwość i liczbę oktaw. Jeśli tekstura nadal szkodzi sylwetce, przekaż czystą wersję w tym rozmiarze.

Zachowaj czysty wzorzec do przekazania

Dla niefiltrowanego wzorca usuń filter="url(#grain)" ze ścieżki i nieużywaną już definicję filtra. Zachowaj d ścieżki, jej wypełnienie i viewBox. Otwórz plik oddzielnie i potwierdź, że liść oraz otwór odpowiadają oryginalnej czystej wersji.

Dla aplikacji internetowej sprawdź teksturowaną wersję w przeglądarkach i przy dokładnym sposobie osadzenia, który trafi do użytkowników. Jeśli powtarzasz ten SVG inline na jednej stronie, nadaj każdemu filtrowi unikalny identyfikator i zaktualizuj jego odwołanie url(#...). Samodzielny przykład używa jednego identyfikatora, ponieważ zawiera jedną instancję.

Jeśli miejsce docelowe wymaga dokładnego wyglądu rastrowego, wyeksportuj rastrowy podgląd w wymaganym rozmiarze i sprawdź go tam. Jeśli proces wymaga edytowalnej geometrii lub geometrii do cięcia, przekaż czyste ścieżki i wyjaśnij, że ziarno jest efektem wyświetlania. Nie opisuj szumu filtra jako wektorowych plamek i nie obiecuj, że kolejny edytor, eksporter PDF lub urządzenie tnące go odtworzy. Przetestuj faktyczne miejsce docelowe.

Jeśli świadomie potrzebujesz osobno edytowalnych plamek, to oddzielne zadanie geometryczne. Wymaga też decyzji o czyszczeniu; zobacz dlaczego SVG ma za dużo węzłów, zanim obrysujesz teksturę jako masę małych konturów. Zachowanie ziarna z rastrowego obrazu malarskiego to inny problem wejściowy, opisany w zamianie akwareli na wektor.

Kiedy pomaga wektoryzacja

Jeśli czysty motyw przetrwał tylko jako PNG lub JPG, przekonwertuj to źródło na edytowalną grafikę SVG przed dodaniem filtra przeglądarkowego. Najpierw sprawdź odzyskaną sylwetkę i otwór w czystej wersji. PerfectVector dostarcza etap zamiany rastra na wektor; graf proceduralnego ziarna w tym poradniku jest osobnym efektem SVG dodawanym później.

Masz już wzorzec oparty na ścieżkach? Użyj go bezpośrednio. Druga konwersja nie jest potrzebna do zadania z filtrem. Poradnik wektoryzacji obrazu wyjaśnia etap odzyskiwania źródła, jeśli go potrzebujesz.

Najczęstsze pytania

Dlaczego feTurbulence tworzy prostokąt zamiast podążać za moim kształtem? Szum wypełnia podobszar prymitywu filtra. Skomponuj go wewnątrz SourceAlpha i nałóż na SourceGraphic, aby ograniczyć nakładkę do grafiki i zachować jej wypełnienie.

Czy ziarno SVG dodaje węzły do ścieżki? Ten filtr nie dodaje ścieżek plamek. W oryginalnym teście przeglądarkowym wszystkie sześć przykładów zachowało jedną ścieżkę o identycznych danych d; filtr zmienił renderowaną powierzchnię.

Od jakich ustawień ziarna zacząć? Dla oryginalnego przykładu liścia zacznij od fractalNoise, baseFrequency 0.65, dwóch oktaw, seed 8 i mnożnika alfa czarnej nakładki 0.28. Porównuj w rzeczywistym rozmiarze wyświetlania i zmieniaj po jednym ustawieniu.

Czy mogę użyć efektu ziarna jako pliku do cięcia? Wygenerowana tekstura nie jest edytowalną geometrią cięcia. Zachowaj oddzielny niefiltrowany wzorzec ścieżek i sprawdź geometrię w faktycznym procesie cięcia.

Źródła

1. MDN: feTurbulence — Generowanie szumu i podobszar prymitywu.
2. W3C: Drzewo prymitywów filtra — SourceGraphic, SourceAlpha i przetwarzanie obrazów w filtrze.
3. MDN: feColorMatrix — Operacje macierzy koloru i alfa.
4. MDN: feComposite — Ograniczanie operatorem in.
5. MDN: baseFrequency — Wartości częstotliwości dla jednej i dwóch osi.
6. MDN: numOctaves — Warstwy szczegółów szumu.
7. MDN: filter — Atrybuty obszaru filtra.

Jeśli ilustracja internetowa wymaga odzyskania czystego wzorca z rastra, zacznij od konwersji obrazu na wektor, sprawdź ścieżki i dodaj ziarno do osobnej kopii do wyświetlania.