> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Зернистая текстура SVG: удержите шум внутри рисунка > Добавьте зернистость SVG с feTurbulence, ограничьте монохромный шум SourceAlpha, настройте его в двух размерах и сохраните чистый мастер контуров для других назначений. Source: https://perfectvector.com/ru/blog/svg-feturbulence-grain Language: ru Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Чтобы добавить зернистость в SVG-иллюстрацию, создайте шум с помощью `feTurbulence`, превратите его в слабое монохромное наложение и скомпонуйте это наложение внутри `SourceAlpha`. Объедините его поверх `SourceGraphic`, чтобы исходная заливка осталась видимой. Это добавляет отрисованную текстуру, сохраняя геометрию контуров изображения. Один шумовой примитив даёт другой результат: он заполняет подобласть примитива фильтра, а не следует очертаниям фигуры. Поэтому лист может превратиться в прямоугольное пятно шума. Это поведение описано в [справочнике MDN по feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence). Для веб-иллюстрации полезные результаты — версия с текстурой для показа и чистый мастер. Зернистость этого фильтра не является набором редактируемых точек или контуров резки. ## Отделите форму от обработки поверхности Начните с простого контура с заливкой, который уже выглядит правильно без зернистости. Исправьте его очертания, зазоры и цвет до добавления эффекта. Фильтр не исправит эту геометрию. Три состояния ниже объясняют проблему границ: | Версия | Что выводит фильтр | Когда использовать | | ------------------------ | -------------------------------------------------------------------- | ------------------------------------------------- | | Простая фигура | Исходный контур с заливкой | Для редактирования и чистого мастера | | Только шум | Прямоугольное сгенерированное изображение в области фильтра | Для проверки источника шума, а не передачи мотива | | Ограниченная зернистость | Исходная графика плюс монохромный шум, ограниченный её альфа-каналом | Для текстурной версии, показываемой в браузере | **Граница имеет значение** ![Иллюстрация чистого кораллового листа, зернистости за пределами листа и зернистости, ограниченной чётким силуэтом листа](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Иллюстрация: форма остаётся чистой, а шум ограничен её силуэтом. Эта концептуальная схема не является снимком средства отрисовки SVG или результатом векторизации.* `SourceGraphic` предоставляет элемент, к которому применяется фильтр. `SourceAlpha` предоставляет его альфа-канал. Фильтр работает с изображением графики; он не переписывает команды контуров. Эти входы и граф фильтра определены в [спецификации W3C Filter Effects](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree). Если в исходной графике уже есть прозрачные области, они тоже влияют на ограничение. SourceAlpha следует фактической отрисованной непрозрачности, а не предполагаемому внешнему ограничивающему прямоугольнику. ## Скопируйте полный пример зернистости SVG Сохраните это как файл `.svg` и откройте в браузере. Он содержит один оригинальный контур листа, детерминированное начальное значение шума, тёмное наложение и явный этап ограничения. Диагональный просвет — часть контура, поэтому в текстурной версии он остаётся прозрачным. ```xml ``` Фильтр выполняет четыре задачи: 1. `feTurbulence` создаёт шум и называет его `noise`. 2. Матрица задаёт красному, зелёному и синему ноль. Последняя строка умножает альфа-канал шума на `0.28`, создавая слабое чёрное наложение с именем `ink`. 3. `feComposite` с `operator="in"` оставляет это наложение там, где существует `SourceAlpha`. 4. `feMerge` сначала рисует исходную графику, затем ограниченное наложение поверх неё. В [справочнике MDN по feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) объясняется, как матрица из пяти столбцов преобразует цвет и альфа-канал. Здесь она меняет изображение шума, а не заливку листа. [Справочник MDN по feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) объясняет операцию `in`, ограничивающую наложение вторым входом. Значение `0.28` — отправная точка для этого кораллового листа, а не универсальная настройка зернистости. Уменьшите его, если текстура делает графику тусклой; увеличьте, если зернистость исчезает в целевом размере. Чёрное зернистое наложение затемняет заливку. Оно не создаст видимых светлых крапинок на чёрном мотиве. Операции с цветом и альфа-каналом для перекрашивания существующей графики описаны в отдельном [руководстве по feColorMatrix](https://perfectvector.com/ru/blog/svg-fecolormatrix). Для усиления резкости существующего прозрачного края см. [альфа-пороги SVG](https://perfectvector.com/ru/blog/svg-alpha-threshold). Ни одна из этих операций не предоставляет используемый здесь источник генерируемого шума. ## Проверьте результат в размере, который увидят люди Мы создали три версии этого оригинального контура: без фильтра, с фильтром только из шумового примитива и с полным графом ограниченной зернистости выше. Мы проверили отрисованные версии в Chrome при **120 × 120** и **360 × 360 CSS-пикселях** с одинаковым viewBox `0 0 200 200`. | Проверка | Версия 120 пикселей | Версия 360 пикселей | | ------------------------ | ------------------------------------------- | ------------------------------------------------------------ | | Простой мастер | Гладкий коралловый лист, прозрачный просвет | Те же очертания и просвет | | Только шум | Прямоугольный шум заменяет видимый мотив | Прямоугольный шум остаётся видимым за силуэтом листа | | Ограниченная зернистость | Слабая текстура внутри листа | Более заметная текстура, при этом просвет и окружение чистые | DOM браузера содержал один контур в каждом образце. Все шесть атрибутов `d` были одинаковы. Это устанавливает границу возможностей примера: отрисованная поверхность изменилась, а контуры крапинок не добавились. Это созданный нами браузерный тестовый пример, а не результат PerfectVector или настольного векторного редактора. Больший предпросмотр помогает проверить эффект, но меньшая версия определяет, остаётся ли графика читаемой. Проверяйте оба размера. Увеличение размера отображения при том же viewBox меняет и видимый масштаб текстуры; не предполагайте, что один предпросмотр представляет все применения. ## Настраивайте зернистость по одному параметру Для небольшой иллюстрации веб-карточки начните со значений примера. Затем меняйте один параметр, сравнивайте те же два размера отображения и сохраняйте копию понравившейся версии. | Параметр | Что решить | Практическая проверка | | ------------------------------ | --------------------------------------------------- | ---------------------------------------------------------------------------------------- | | `baseFrequency` | Более крупные или мелкие вариации в координатах SVG | Сравните `0.25` и `0.65`; проверяйте в реальном размере отображения | | `numOctaves` | Сколько слоёв деталей шума объединять | Сравните `1` и `2`, прежде чем добавлять детали | | `seed` | Какую реализацию шума использовать | Держите постоянным при сравнении других настроек | | Множитель альфа-канала матрицы | Насколько сильно чёрное наложение затемняет заливку | Сравните `0.15` и `0.28` на одной графике | | Область фильтра | Прямоугольник, доступный графу фильтра | Восстанавливайте пропавший вывод, не заменяя ограничение по альфа-каналу прямоугольником | `baseFrequency` принимает одно значение для обеих осей или два значения для горизонтальной и вертикальной частоты. Это различие описано в [справочнике MDN по baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency). Для этого листа начните с одного значения; разные значения — осознанный выбор для направленной текстуры. `numOctaves` управляет числом октав шума, как описано в [справочнике MDN по numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves). Дополнительные октавы не являются дополнительными векторными контурами. Используйте их, только если они улучшают видимую поверхность в нужном размере. Пример явно задаёт `color-interpolation-filters="sRGB"`. Сохраняйте эту настройку при сравнении вариантов, чтобы изменение обработки цвета не мешало сравнению зернистости. ## Исправьте прямоугольник, пропавшую заливку или грязный край **Текстура образует прямоугольное пятно.** Проверьте конечный результат фильтра. Если он заканчивается на `feTurbulence`, он возвращает изображение шума. Восстановите матрицу, композицию с `SourceAlpha` и объединение. Увеличение прямоугольника фильтра лишь даст неограниченному шуму больше места. **Цвет листа исчезает.** Проверьте, что первый узел объединения использует `SourceGraphic`. Один конечный результат `inside` содержит тёмное наложение, а не исходную коралловую заливку. Также проверьте написание и регистр каждой именованной ссылки `result` и `in`. **Шум остаётся в прозрачном просвете.** Подтвердите, что второй вход композиции — `SourceAlpha`, а не прямоугольный шум или непрозрачный фон. Применяйте фильтр к графике, которую хотите текстурировать. Включение непрозрачного фона в фильтруемую группу меняет входной альфа-канал. **Часть вывода обрезана.** Проверьте `x`, `y`, `width` и `height` фильтра. Они задают доступную область фильтра, как описано в [справочнике MDN по filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter). Пример даёт небольшой запас места. Более широкая область не исправит отсутствующий этап ограничения и не устранит обрезку отдельным контейнером. **Маленькая графика выглядит мутной.** Сначала уменьшите альфа-канал наложения, затем сравните частоту и число октав. Если текстура всё ещё ухудшает силуэт, передавайте в этом размере чистую версию. ## Сохраните чистый мастер для передачи Для мастера без фильтра удалите `filter="url(#grain)"` у контура и ставшее ненужным определение фильтра. Сохраните `d` контура, его заливку и viewBox. Откройте этот файл отдельно и убедитесь, что лист и просвет совпадают с исходной чистой версией. Для веб-приложения проверьте текстурную версию в тех браузерах и с тем точным способом встраивания, которые будут выпущены. Если повторяете этот встроенный SVG на одной странице, задайте каждому фильтру уникальный ID и обновите его ссылку `url(#...)`. Самостоятельный пример использует один ID, потому что содержит один экземпляр. Для назначения, которому нужен точный растровый вид, экспортируйте растровый предпросмотр в требуемом размере и проверьте его там. Для процесса, которому нужна редактируемая или пригодная для резки геометрия, передайте чистые контуры и поясните, что зернистость — эффект отображения. Не называйте шум фильтра векторными крапинками и не обещайте, что последующий редактор, экспортёр PDF или режущее оборудование воспроизведёт его. Проверяйте фактическое назначение. Если вам намеренно нужны отдельные редактируемые крапинки, это отдельная геометрическая задача. Она также требует решения об очистке; прочитайте, [почему в SVG слишком много узлов](https://perfectvector.com/ru/blog/svg-too-many-nodes), прежде чем трассировать текстуру в массу мелких контуров. Сохранение зернистости растровой живописи — другая исходная задача, описанная в [преобразовании акварели в вектор](https://perfectvector.com/ru/blog/watercolor-to-vector). ## Когда помогает векторизация Если чистый мотив сохранился только как PNG или JPG, [преобразуйте этот исходник в редактируемую SVG-графику](https://perfectvector.com/ru/image-to-vector) до добавления браузерного фильтра. Сначала проверьте восстановленные силуэт и просвет в чистой версии. PerfectVector выполняет этап преобразования растра в вектор; процедурный граф зернистости в этом руководстве — отдельный эффект SVG, который вы добавляете после. Уже есть мастер на основе контуров? Используйте его напрямую. Для фильтра повторное преобразование не нужно. Если восстановление исходника необходимо, этот этап объясняет [руководство по векторизации изображений](https://perfectvector.com/ru/blog/what-is-image-vectorization). ## Частые вопросы **Почему feTurbulence создаёт прямоугольник, а не следует моей фигуре?** Шум заполняет подобласть своего примитива фильтра. Скомпонуйте его внутри SourceAlpha и объедините поверх SourceGraphic, чтобы ограничить наложение графикой, сохранив её заливку. **Добавляет ли зернистость SVG узлы в мой контур?** Этот фильтр не добавляет контуры крапинок. В исходном браузерном примере все шесть образцов сохраняли один контур с одинаковыми данными d; фильтр менял отрисованную поверхность. **С каких настроек зернистости начать?** Для исходного примера листа начните с fractalNoise, baseFrequency 0.65, двух октав, seed 8 и множителя альфа-канала чёрного наложения 0.28. Сравнивайте в реальном размере отображения и меняйте по одной настройке. **Можно ли использовать эффект зернистости как файл для резки?** Сгенерированная текстура не является редактируемой геометрией резки. Храните отдельный мастер контуров без фильтра и проверяйте геометрию в фактическом процессе резки. ## Источники 1. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Генерация шума и подобласть примитива. 2. [W3C: Дерево примитивов фильтра](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha и обработка изображения фильтром. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Матричные операции с цветом и альфа-каналом. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Ограничение с оператором in. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Значения частоты по одной и двум осям. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Слои деталей шума. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Атрибуты области фильтра. Если веб-иллюстрации нужен чистый мастер, восстановленный из растра, [начните с преобразования изображения в вектор](https://perfectvector.com/ru/image-to-vector), проверьте контуры и добавьте зернистость в отдельную копию для показа. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/svg-feturbulence-grain) - [Импорт SVG в FontForge: рисунки в контуры глифов](https://perfectvector.com/ru/blog/fontforge-import-svg.md) - [Как оценить качество векторной трассировки: шкала баллов](https://perfectvector.com/ru/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)