Зернистая текстура SVG: удержите шум внутри рисунка

Чтобы добавить зернистость в SVG-иллюстрацию, создайте шум с помощью feTurbulence, превратите его в слабое монохромное наложение и скомпонуйте это наложение внутри SourceAlpha. Объедините его поверх SourceGraphic, чтобы исходная заливка осталась видимой. Это добавляет отрисованную текстуру, сохраняя геометрию контуров изображения.

Один шумовой примитив даёт другой результат: он заполняет подобласть примитива фильтра, а не следует очертаниям фигуры. Поэтому лист может превратиться в прямоугольное пятно шума. Это поведение описано в справочнике MDN по feTurbulence.

Для веб-иллюстрации полезные результаты — версия с текстурой для показа и чистый мастер. Зернистость этого фильтра не является набором редактируемых точек или контуров резки.

Отделите форму от обработки поверхности

Начните с простого контура с заливкой, который уже выглядит правильно без зернистости. Исправьте его очертания, зазоры и цвет до добавления эффекта. Фильтр не исправит эту геометрию.

Три состояния ниже объясняют проблему границ:

Граница имеет значение

SourceGraphic предоставляет элемент, к которому применяется фильтр. SourceAlpha предоставляет его альфа-канал. Фильтр работает с изображением графики; он не переписывает команды контуров. Эти входы и граф фильтра определены в спецификации W3C Filter Effects.

Если в исходной графике уже есть прозрачные области, они тоже влияют на ограничение. SourceAlpha следует фактической отрисованной непрозрачности, а не предполагаемому внешнему ограничивающему прямоугольнику.

Скопируйте полный пример зернистости SVG

Сохраните это как файл .svg и откройте в браузере. Он содержит один оригинальный контур листа, детерминированное начальное значение шума, тёмное наложение и явный этап ограничения. Диагональный просвет — часть контура, поэтому в текстурной версии он остаётся прозрачным.

<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>

Фильтр выполняет четыре задачи:

1. feTurbulence создаёт шум и называет его noise.
2. Матрица задаёт красному, зелёному и синему ноль. Последняя строка умножает альфа-канал шума на 0.28, создавая слабое чёрное наложение с именем ink.
3. feComposite с operator="in" оставляет это наложение там, где существует SourceAlpha.
4. feMerge сначала рисует исходную графику, затем ограниченное наложение поверх неё.

В справочнике MDN по feColorMatrix объясняется, как матрица из пяти столбцов преобразует цвет и альфа-канал. Здесь она меняет изображение шума, а не заливку листа. Справочник MDN по feComposite объясняет операцию in, ограничивающую наложение вторым входом.

Значение 0.28 — отправная точка для этого кораллового листа, а не универсальная настройка зернистости. Уменьшите его, если текстура делает графику тусклой; увеличьте, если зернистость исчезает в целевом размере. Чёрное зернистое наложение затемняет заливку. Оно не создаст видимых светлых крапинок на чёрном мотиве.

Операции с цветом и альфа-каналом для перекрашивания существующей графики описаны в отдельном руководстве по feColorMatrix. Для усиления резкости существующего прозрачного края см. альфа-пороги SVG. Ни одна из этих операций не предоставляет используемый здесь источник генерируемого шума.

Проверьте результат в размере, который увидят люди

Мы создали три версии этого оригинального контура: без фильтра, с фильтром только из шумового примитива и с полным графом ограниченной зернистости выше. Мы проверили отрисованные версии в Chrome при 120 × 120 и 360 × 360 CSS-пикселях с одинаковым viewBox 0 0 200 200.

DOM браузера содержал один контур в каждом образце. Все шесть атрибутов d были одинаковы. Это устанавливает границу возможностей примера: отрисованная поверхность изменилась, а контуры крапинок не добавились. Это созданный нами браузерный тестовый пример, а не результат PerfectVector или настольного векторного редактора.

Больший предпросмотр помогает проверить эффект, но меньшая версия определяет, остаётся ли графика читаемой. Проверяйте оба размера. Увеличение размера отображения при том же viewBox меняет и видимый масштаб текстуры; не предполагайте, что один предпросмотр представляет все применения.

Настраивайте зернистость по одному параметру

Для небольшой иллюстрации веб-карточки начните со значений примера. Затем меняйте один параметр, сравнивайте те же два размера отображения и сохраняйте копию понравившейся версии.

baseFrequency принимает одно значение для обеих осей или два значения для горизонтальной и вертикальной частоты. Это различие описано в справочнике MDN по baseFrequency. Для этого листа начните с одного значения; разные значения — осознанный выбор для направленной текстуры.

numOctaves управляет числом октав шума, как описано в справочнике MDN по numOctaves. Дополнительные октавы не являются дополнительными векторными контурами. Используйте их, только если они улучшают видимую поверхность в нужном размере.

Пример явно задаёт color-interpolation-filters="sRGB". Сохраняйте эту настройку при сравнении вариантов, чтобы изменение обработки цвета не мешало сравнению зернистости.

Исправьте прямоугольник, пропавшую заливку или грязный край

Текстура образует прямоугольное пятно. Проверьте конечный результат фильтра. Если он заканчивается на feTurbulence, он возвращает изображение шума. Восстановите матрицу, композицию с SourceAlpha и объединение. Увеличение прямоугольника фильтра лишь даст неограниченному шуму больше места.

Цвет листа исчезает. Проверьте, что первый узел объединения использует SourceGraphic. Один конечный результат inside содержит тёмное наложение, а не исходную коралловую заливку. Также проверьте написание и регистр каждой именованной ссылки result и in.

Шум остаётся в прозрачном просвете. Подтвердите, что второй вход композиции — SourceAlpha, а не прямоугольный шум или непрозрачный фон. Применяйте фильтр к графике, которую хотите текстурировать. Включение непрозрачного фона в фильтруемую группу меняет входной альфа-канал.

Часть вывода обрезана. Проверьте x, y, width и height фильтра. Они задают доступную область фильтра, как описано в справочнике MDN по filter. Пример даёт небольшой запас места. Более широкая область не исправит отсутствующий этап ограничения и не устранит обрезку отдельным контейнером.

Маленькая графика выглядит мутной. Сначала уменьшите альфа-канал наложения, затем сравните частоту и число октав. Если текстура всё ещё ухудшает силуэт, передавайте в этом размере чистую версию.

Сохраните чистый мастер для передачи

Для мастера без фильтра удалите filter="url(#grain)" у контура и ставшее ненужным определение фильтра. Сохраните d контура, его заливку и viewBox. Откройте этот файл отдельно и убедитесь, что лист и просвет совпадают с исходной чистой версией.

Для веб-приложения проверьте текстурную версию в тех браузерах и с тем точным способом встраивания, которые будут выпущены. Если повторяете этот встроенный SVG на одной странице, задайте каждому фильтру уникальный ID и обновите его ссылку url(#...). Самостоятельный пример использует один ID, потому что содержит один экземпляр.

Для назначения, которому нужен точный растровый вид, экспортируйте растровый предпросмотр в требуемом размере и проверьте его там. Для процесса, которому нужна редактируемая или пригодная для резки геометрия, передайте чистые контуры и поясните, что зернистость — эффект отображения. Не называйте шум фильтра векторными крапинками и не обещайте, что последующий редактор, экспортёр PDF или режущее оборудование воспроизведёт его. Проверяйте фактическое назначение.

Если вам намеренно нужны отдельные редактируемые крапинки, это отдельная геометрическая задача. Она также требует решения об очистке; прочитайте, почему в SVG слишком много узлов, прежде чем трассировать текстуру в массу мелких контуров. Сохранение зернистости растровой живописи — другая исходная задача, описанная в преобразовании акварели в вектор.

Когда помогает векторизация

Если чистый мотив сохранился только как PNG или JPG, преобразуйте этот исходник в редактируемую SVG-графику до добавления браузерного фильтра. Сначала проверьте восстановленные силуэт и просвет в чистой версии. PerfectVector выполняет этап преобразования растра в вектор; процедурный граф зернистости в этом руководстве — отдельный эффект SVG, который вы добавляете после.

Уже есть мастер на основе контуров? Используйте его напрямую. Для фильтра повторное преобразование не нужно. Если восстановление исходника необходимо, этот этап объясняет руководство по векторизации изображений.

Частые вопросы

Почему feTurbulence создаёт прямоугольник, а не следует моей фигуре? Шум заполняет подобласть своего примитива фильтра. Скомпонуйте его внутри SourceAlpha и объедините поверх SourceGraphic, чтобы ограничить наложение графикой, сохранив её заливку.

Добавляет ли зернистость SVG узлы в мой контур? Этот фильтр не добавляет контуры крапинок. В исходном браузерном примере все шесть образцов сохраняли один контур с одинаковыми данными d; фильтр менял отрисованную поверхность.

С каких настроек зернистости начать? Для исходного примера листа начните с fractalNoise, baseFrequency 0.65, двух октав, seed 8 и множителя альфа-канала чёрного наложения 0.28. Сравнивайте в реальном размере отображения и меняйте по одной настройке.

Можно ли использовать эффект зернистости как файл для резки? Сгенерированная текстура не является редактируемой геометрией резки. Храните отдельный мастер контуров без фильтра и проверяйте геометрию в фактическом процессе резки.

Источники

1. MDN: feTurbulence — Генерация шума и подобласть примитива.
2. W3C: Дерево примитивов фильтра — SourceGraphic, SourceAlpha и обработка изображения фильтром.
3. MDN: feColorMatrix — Матричные операции с цветом и альфа-каналом.
4. MDN: feComposite — Ограничение с оператором in.
5. MDN: baseFrequency — Значения частоты по одной и двум осям.
6. MDN: numOctaves — Слои деталей шума.
7. MDN: filter — Атрибуты области фильтра.

Если веб-иллюстрации нужен чистый мастер, восстановленный из растра, начните с преобразования изображения в вектор, проверьте контуры и добавьте зернистость в отдельную копию для показа.