Карты смещения SVG: исказите предпросмотр логотипа

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

Для предсказуемого первого примера задайте in="SourceGraphic", выберите именованную карту для in2, укажите горизонтальный и вертикальный каналы и установите color-interpolation-filters="sRGB". В справочнике MDN по смещению объясняются два входа и формула выборки. Фигура, которая выглядит изогнутой на экране, не становится автоматически новым редактируемым контуром.

Решите, какой файл вам нужен

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

Предпросмотр и исходник раздельны

Если в предпросмотре нужно изменить только цвет, используйте перекрашивание feColorMatrix. Смещение решает пространственную задачу: откуда берётся выборка для отрисовываемого изображения.

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence создаёт процедурные вариации. В справочнике MDN по шуму описаны частота, октавы, начальное значение и тип. Здесь мы фиксируем эти значения, чтобы изменение scale сравнивало силу эффекта на одной карте.

Матрица сохраняет красный канал шума, задаёт зелёному 0.5, синему ноль, а альфа-каналу единицу. Её результат — управляющая карта, а не новая цветовая палитра кораллового значка. Справочник MDN по матрице объясняет преобразование каналов. Красный затем управляет горизонтальной выборкой, а зелёный даёт нейтральное вертикальное смещение.

Чтобы сравнить силу эффекта, измените только scale="36" на scale="12", а затем на scale="0". Не меняйте контур, начальное значение, матрицу карты, цветовое пространство и viewBox. Так вы изолируете принимаемое решение.

Понимайте scale как смещение выборки

Для выбранных каналов карты позиции выборки исходника таковы:

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

Спецификация смещения W3C определяет это обратное отображение: каждая позиция результата задаёт, откуда брать образец исходника. Положительное смещение выборки не является указанием переместить узел контура в эту сторону.

При масштабе 36 горизонтальный канал даёт следующие смещения выборки:

В примере используется primitiveUnits="userSpaceOnUse", поэтому эти значения относятся к пользовательской системе координат SVG. Они не гарантируют расстояние в CSS-пикселях после масштабирования viewBox. Спецификация также определяет масштаб 0 как отсутствие эффекта смещения.

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

Явно указывайте цветовое пространство нейтрального серого

Нейтральность означает значение выбранного канала 0,5 в рабочем пространстве карты. Это не означает, что каждый визуально среднесерый образец нейтрален при любых настройках фильтра.

Рабочее пространство фильтра по умолчанию — linearRGB, а в этом примере явно задано sRGB. Цвет, записанный как rgb(50%,50%,50%), после преобразования в линейный RGB численно не равен 0,5. Справочник MDN по color-interpolation-filters описывает значение по умолчанию и явные варианты.

Для диагностической постоянной карты замените шумовой примитив и матрицу следующим:

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

Сохраните примитив смещения, селекторы и явное sRGB у фильтра. Справочник MDN по feFlood описывает используемое здесь изображение постоянного цвета. Такой контроль помогает отличить вариации карты от сдвига из-за цветового пространства.

В нашем тестовом примере Chrome значок с постоянной картой sRGB выглядел совмещённым со значком без фильтра. Удаление явной настройки цветового пространства заставило тот же значок с серой картой заметно сместиться. Это наблюдение в браузере, а не утверждение о попиксельном совпадении отрисовки разных движков. При переносе этого рецепта на собственную графику сохраняйте настройку цветового пространства; проверьте правила CSS, которые её переопределяют.

Проверьте один значок в двух размерах

Мы отрисовали исходный значок в Chrome в размерах 120 × 120 и 300 × 300 CSS-пикселей. В каждом размере показывалась одна и та же фиксированная карта с масштабами 0, 12 и 36 и одинаковым viewBox 0 0 200 200.

Эффект был виден в обоих размерах; больший предпросмотр облегчал проверку отверстия и краёв. DOM браузера по-прежнему содержал один контур в каждом из шести образцов с одинаковыми значениями d. Три дополнительных контрольных образца размером 200 пикселей сравнивали значок без фильтра с постоянными серыми картами при явном sRGB и стандартном linearRGB.

Это независимо созданные образцы SVG. Они показывают поведение этого примера в проверенном браузере и неизменность его исходной геометрии. Это не тесты редакторов, не результат PerfectVector и не обзор совместимости.

Для своего логотипа сначала проверьте наименьший реальный размер отображения. Искажённое отверстие или угол могут изменить восприятие знака, даже если чистый мастер остался целым.

Диагностируйте сдвиг, слабый эффект и обрезанный край

Весь значок смещается вместо изгиба. Проверьте контрольную постоянную карту с явным sRGB. Проверьте выбранные каналы и действительно ли карта меняется в них. Постоянное ненейтральное значение выбранного канала создаёт равномерное смещение выборки.

Эффект остаётся слабым. Убедитесь, что in2="map" совпадает с именованным result матрицы. Постепенно увеличивайте масштаб при тех же начальном значении и частоте. Затем при необходимости попробуйте другую карту. Новое начальное значение меняет пространственный рисунок, поэтому это отдельное сравнение.

Вертикальный край ведёт себя неожиданно. Этот пример предназначен для горизонтального смещения: xChannelSelector="R" и yChannelSelector="G", при фиксированном G, равном 0,5. Перед добавлением вариаций по двум осям проверьте строку матрицы и написание каналов.

Искажённый контур обрезается. Прежде чем редактировать исходный контур, проверьте область фильтра. Пример даёт дополнительное место с помощью x="-25%", y="-25%" и ширины и высоты 150%. В справочнике MDN по filter описаны эти атрибуты области. Более сильным эффектам может понадобиться другая область, а окружающая область просмотра может задавать отдельную границу. Если увеличение области не возвращает пропавшую часть результата, выполните проверки обрезки фильтра и области просмотра SVG.

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

Передавайте чистый мастер отдельно

Для версии без фильтра удалите filter="url(#warp)" у контура и неиспользуемое определение фильтра. Сохраните исходные d, fill-rule="evenodd", заливку и viewBox. Откройте полученный файл и убедитесь, что квадратное отверстие и прямые края совпадают с чистым базовым вариантом.

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

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

PNG, помещённый внутрь SVG, — ещё одна отдельная ситуация. Прочитайте о файлах SVG, содержащих растровые изображения, прежде чем считать имя файла гарантией редактируемых контуров логотипа.

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

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

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

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

Изменяет ли feDisplacementMap мои контуры SVG? Этот фильтр меняет отрисованное изображение посредством выборки по карте. В исходном браузерном примере шесть образцов силы эффекта сохраняли один контур с одинаковыми значениями d.

Почему серая карта смещения всё равно двигает графику? Нейтральность — это значение канала 0,5 в рабочем цветовом пространстве карты. Серый sRGB 50% численно не равен 0,5 после преобразования в стандартное пространство linearRGB. Используйте явную настройку цветового пространства и контролируемый тест постоянной карты.

Что означает scale 36 в этом примере? При единицах примитивов userSpaceOnUse выбранные значения канала от 0 до 1 дают смещения выборки от -18 до +18 пользовательских единиц SVG. Отображаемое расстояние зависит от масштабирования viewBox SVG.

Можно ли сразу передать искажённый SVG на резку? Отображаемое искажение не является новой редактируемой геометрией резки. Сохраняйте мастер контуров без фильтра и проверяйте фактическое место назначения; если заданию нужны постоянные искривлённые контуры, подготовьте их отдельно.

Источники

1. MDN: feDisplacementMap — Входы исходника и карты, каналы и поведение выборки.
2. W3C: Фильтр смещения — Обратное отображение, масштаб и координаты примитивов.
3. MDN: feTurbulence — Фиксированные параметры процедурной карты.
4. MDN: feColorMatrix — Явные значения каналов управляющей карты.
5. MDN: color-interpolation-filters — Стандартное linearRGB и явное sRGB.
6. MDN: feFlood — Контрольная карта постоянного цвета.
7. MDN: filter — Атрибуты области фильтра.

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