> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Ziarnista tekstura SVG: zatrzymaj szum wewnątrz grafiki > Dodaj ziarno SVG przez feTurbulence, ogranicz monochromatyczny szum do SourceAlpha, dostosuj go w dwóch rozmiarach i zachowaj czyste ścieżki do innych zastosowań. Source: https://perfectvector.com/pl/blog/svg-feturbulence-grain Language: pl Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) 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: | Wersja | Co zwraca filtr | Kiedy jej użyć | | ------------------ | ----------------------------------------------------------------------- | --------------------------------------------------- | | Zwykły kształt | Oryginalna wypełniona ścieżka | Edycja i czysty wzorzec | | Sam szum | Prostokątny wygenerowany obraz w obszarze filtra | Sprawdzenie źródła szumu zamiast przekazania motywu | | Ograniczone ziarno | Oryginalna grafika i monochromatyczny szum ograniczony jej kanałem alfa | Teksturowana wersja do wyświetlania w przeglądarce | **Granica ma znaczenie** ![Ilustracja czystego koralowego liścia, ziarna wychodzącego poza liść oraz ziarna ograniczonego do wyraźnej sylwetki liścia](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Ilustracja: kształt pozostaje czysty, a szum jest ograniczony do jego sylwetki. Schemat koncepcyjny nie jest zrzutem renderera SVG ani wynikiem wektoryzacji.* `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](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree). 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. ```xml ``` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) 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](https://perfectvector.com/pl/blog/svg-fecolormatrix). Wyostrzanie istniejącej przezroczystej krawędzi opisują [progi alfa SVG](https://perfectvector.com/pl/blog/svg-alpha-threshold). Ż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`. | Kontrola | Wersja 120-pikselowa | Wersja 360-pikselowa | | ------------------ | ----------------------------------------- | ---------------------------------------------------------- | | Zwykły wzorzec | Gładki koralowy liść, przezroczysty otwór | Ten sam kontur i otwór | | Sam szum | Prostokątny szum zastępuje widoczny motyw | Prostokątny szum pozostaje widoczny poza sylwetką liścia | | Ograniczone ziarno | Delikatna tekstura wewnątrz liścia | Bardziej widoczna tekstura, z czystym otworem i otoczeniem | 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. | Ustawienie | Co ustalić | Praktyczna kontrola | | --------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------ | | `baseFrequency` | Grubsza lub drobniejsza zmienność we współrzędnych SVG | Wypróbuj `0.25` obok `0.65`; sprawdź w rzeczywistym rozmiarze wyświetlania | | `numOctaves` | Ile warstw szczegółów szumu połączyć | Porównaj `1` i `2` przed dodaniem szczegółów | | `seed` | Której realizacji szumu użyć | Zachowaj stałą wartość przy porównywaniu innych ustawień | | Mnożnik alfa macierzy | Jak silnie czarna nakładka przyciemnia wypełnienie | Porównaj `0.15` i `0.28` na tej samej grafice | | Obszar filtra | Prostokąt dostępny dla grafu filtra | Napraw brakujący wynik bez używania prostokąta zamiast ograniczania przez kanał alfa | `baseFrequency` przyjmuje jedną wartość dla obu osi albo dwie wartości dla częstotliwości poziomej i pionowej. [Opis baseFrequency MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves). 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter). 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](https://perfectvector.com/pl/blog/svg-too-many-nodes), 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](https://perfectvector.com/pl/blog/watercolor-to-vector). ## Kiedy pomaga wektoryzacja Jeśli czysty motyw przetrwał tylko jako PNG lub JPG, [przekonwertuj to źródło na edytowalną grafikę SVG](https://perfectvector.com/pl/image-to-vector) 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](https://perfectvector.com/pl/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Generowanie szumu i podobszar prymitywu. 2. [W3C: Drzewo prymitywów filtra](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha i przetwarzanie obrazów w filtrze. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Operacje macierzy koloru i alfa. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Ograniczanie operatorem in. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Wartości częstotliwości dla jednej i dwóch osi. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Warstwy szczegółów szumu. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atrybuty obszaru filtra. Jeśli ilustracja internetowa wymaga odzyskania czystego wzorca z rastra, [zacznij od konwersji obrazu na wektor](https://perfectvector.com/pl/image-to-vector), sprawdź ścieżki i dodaj ziarno do osobnej kopii do wyświetlania. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/svg-feturbulence-grain) - [Import SVG w FontForge: zamień narysowane kształty w kontury glifów](https://perfectvector.com/pl/blog/fontforge-import-svg.md) - [Jak ocenić jakość wektoryzacji: karta oceny](https://perfectvector.com/pl/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)