> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Карты смещения SVG: исказите предпросмотр логотипа > Используйте feDisplacementMap в SVG для искажения предпросмотра логотипа, задайте каналы и нейтральный серый в sRGB, проверьте два размера и сохраните исходный мастер контуров для передачи. Source: https://perfectvector.com/ru/blog/svg-fedisplacementmap-artwork Language: ru Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Фильтр SVG `feDisplacementMap` искажает изображение, выводимое средством отрисовки, используя другое изображение как карту выборки. Исходные данные контуров остаются неизменными. Используйте его для обратимого предпросмотра логотипа или веб-иллюстрации и сохраняйте мастер без фильтра для редактирования и передачи. Для предсказуемого первого примера задайте `in="SourceGraphic"`, выберите именованную карту для `in2`, укажите горизонтальный и вертикальный каналы и установите `color-interpolation-filters="sRGB"`. В [справочнике MDN по смещению](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) объясняются два входа и формула выборки. Фигура, которая выглядит изогнутой на экране, не становится автоматически новым редактируемым контуром. ## Решите, какой файл вам нужен | Цель | Подходящий способ | Что сохранить | | --------------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------------- | | Статичная искажённая графика на веб-странице | Копия для показа с фильтром | Исходный мастер контуров SVG | | Редактируемый логотип с постоянно искривлёнными контурами | Намеренно отредактировать или перестроить геометрию | Проверенную новую геометрию контуров | | Растровый предпросмотр с фиксированным видом | Отрисовать копию для показа в нужном размере | Чистый мастер и проверенный растровый экспорт | | Производственная геометрия для печати или резки | Начать с мастера без фильтра | Размеры, отверстия и контуры, проверенные в целевом приложении | В примере ниже используется оригинальный квадратный значок с открытой серединой. Его прямые края упрощают сравнение искажения. Это демонстрационный мотив, а не логотип клиента или результат работы векторизатора. **Предпросмотр и исходник раздельны** ![Иллюстрация трёх коралловых значков с усиливающимся искажением контура над одинаковыми прямыми очертаниями исходных контуров](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp) *Иллюстрация: видимый значок может искажаться, пока исходное очертание остаётся прежним. Эта концептуальная схема не является снимком браузера, экспортом из редактора или результатом преобразования.* Если в предпросмотре нужно изменить только цвет, используйте [перекрашивание feColorMatrix](https://perfectvector.com/ru/blog/svg-fecolormatrix). Смещение решает пространственную задачу: откуда берётся выборка для отрисовываемого изображения. ## Скопируйте контролируемый статичный пример SVG Сохраните этот код как SVG и откройте в браузере. Он содержит один контур, один фиксированный источник шума, матрицу, сохраняющую переменность горизонтального канала при нейтральном вертикальном канале, и масштаб смещения `36`. ```xml ``` `feTurbulence` создаёт процедурные вариации. В [справочнике MDN по шуму](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) описаны частота, октавы, начальное значение и тип. Здесь мы фиксируем эти значения, чтобы изменение `scale` сравнивало силу эффекта на одной карте. Матрица сохраняет красный канал шума, задаёт зелёному `0.5`, синему ноль, а альфа-каналу единицу. Её результат — управляющая карта, а не новая цветовая палитра кораллового значка. [Справочник MDN по матрице](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) объясняет преобразование каналов. Красный затем управляет горизонтальной выборкой, а зелёный даёт нейтральное вертикальное смещение. Чтобы сравнить силу эффекта, измените только `scale="36"` на `scale="12"`, а затем на `scale="0"`. Не меняйте контур, начальное значение, матрицу карты, цветовое пространство и viewBox. Так вы изолируете принимаемое решение. ## Понимайте scale как смещение выборки Для выбранных каналов карты позиции выборки исходника таковы: ```text sampleX = x + scale × (horizontalChannel - 0.5) sampleY = y + scale × (verticalChannel - 0.5) ``` [Спецификация смещения W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) определяет это обратное отображение: каждая позиция результата задаёт, откуда брать образец исходника. Положительное смещение выборки не является указанием переместить узел контура в эту сторону. При масштабе `36` горизонтальный канал даёт следующие смещения выборки: | Значение канала в рабочем цветовом пространстве фильтра | Горизонтальное смещение выборки | | ------------------------------------------------------- | ------------------------------- | | `0` | `-18` | | `0.5` | `0` | | `1` | `+18` | В примере используется `primitiveUnits="userSpaceOnUse"`, поэтому эти значения относятся к пользовательской системе координат SVG. Они не гарантируют расстояние в CSS-пикселях после масштабирования viewBox. Спецификация также определяет масштаб `0` как отсутствие эффекта смещения. Фиксированное значение зелёного сохраняет вертикальную выборку нейтральной в этом примере. Чтобы позже исследовать искажение по двум осям, намеренно добавьте вариации и в зелёный. Не меняйте каналы и карту одновременно при диагностике неожиданного результата. ## Явно указывайте цветовое пространство нейтрального серого Нейтральность означает значение выбранного канала **0,5 в рабочем пространстве карты**. Это не означает, что каждый визуально среднесерый образец нейтрален при любых настройках фильтра. Рабочее пространство фильтра по умолчанию — `linearRGB`, а в этом примере явно задано `sRGB`. Цвет, записанный как `rgb(50%,50%,50%)`, после преобразования в линейный RGB численно не равен 0,5. [Справочник MDN по color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) описывает значение по умолчанию и явные варианты. Для диагностической постоянной карты замените шумовой примитив и матрицу следующим: ```xml ``` Сохраните примитив смещения, селекторы и явное `sRGB` у фильтра. [Справочник MDN по feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) описывает используемое здесь изображение постоянного цвета. Такой контроль помогает отличить вариации карты от сдвига из-за цветового пространства. В нашем тестовом примере Chrome значок с постоянной картой sRGB выглядел совмещённым со значком без фильтра. Удаление явной настройки цветового пространства заставило тот же значок с серой картой заметно сместиться. Это наблюдение в браузере, а не утверждение о попиксельном совпадении отрисовки разных движков. При переносе этого рецепта на собственную графику сохраняйте настройку цветового пространства; проверьте правила CSS, которые её переопределяют. ## Проверьте один значок в двух размерах Мы отрисовали исходный значок в Chrome в размерах **120 × 120** и **300 × 300 CSS-пикселей**. В каждом размере показывалась одна и та же фиксированная карта с масштабами `0`, `12` и `36` и одинаковым viewBox `0 0 200 200`. | Сила эффекта | Наблюдение в исходном примере | Какое решение поддерживает | | ------------ | ------------------------------------------------------------------- | -------------------------------------- | | `0` | Прямые внешние края и квадратное отверстие | База для сравнения | | `12` | Лёгкое горизонтальное изменение контура; отверстие осталось видимым | Сдержанный эффект отображения | | `36` | Более сильное искажение внешних краёв и отверстия | Проверить узнаваемость перед передачей | Эффект был виден в обоих размерах; больший предпросмотр облегчал проверку отверстия и краёв. 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) описаны эти атрибуты области. Более сильным эффектам может понадобиться другая область, а окружающая область просмотра может задавать отдельную границу. Если увеличение области не возвращает пропавшую часть результата, выполните [проверки обрезки фильтра и области просмотра SVG](https://perfectvector.com/ru/blog/svg-shadow-clipped). **В другом месте назначения SVG теряет эффект.** Откройте именно переданный файл в этом приложении. Предпросмотр браузера не устанавливает поведение редактора, экспортёра PDF или режущего оборудования. Держите чистый мастер доступным, не обещая, что фильтр перенесётся без изменений. ## Передавайте чистый мастер отдельно Для версии без фильтра удалите `filter="url(#warp)"` у контура и неиспользуемое определение фильтра. Сохраните исходные `d`, `fill-rule="evenodd"`, заливку и viewBox. Откройте полученный файл и убедитесь, что квадратное отверстие и прямые края совпадают с чистым базовым вариантом. Используйте отдельные имена файлов для чистого мастера и версии с эффектом. Если повторяете SVG с фильтром встроенным в одну страницу, задайте каждому фильтру уникальный ID и обновите его ссылку `url(#...)`. Проверьте итоговый способ встраивания и браузеры, которые собираетесь поддерживать. Если сам итоговый искажённый контур должен быть редактируемым, подготовьте эту геометрию как отдельную графическую задачу. Этот фильтр не превращает предпросмотр в новые команды контуров. Трассировка растрированного предпросмотра тоже является новым преобразованием со своими проверками точности и очистки; она не восстанавливает исходный математически неизменный мастер. PNG, помещённый внутрь SVG, — ещё одна отдельная ситуация. Прочитайте о [файлах SVG, содержащих растровые изображения](https://perfectvector.com/ru/blog/svg-contains-raster-image), прежде чем считать имя файла гарантией редактируемых контуров логотипа. ## Когда помогает векторизация логотипа Если исходный чистый логотип сохранился только в PNG или JPG, [векторизуйте этот исходный логотип](https://perfectvector.com/ru/vectorize-logo), затем проверьте его силуэт, отверстия и редактируемые цветовые области перед добавлением фильтра отображения. PerfectVector выполняет преобразование растра в вектор; схема смещения в этом руководстве — отдельный эффект SVG. Она не превращает искажённый предпросмотр в гарантированный производственный контур. Если чистый мастер контуров уже есть, используйте этот файл напрямую. Для подготовки исходника и очистки логотипа [руководство по векторизации логотипа](https://perfectvector.com/ru/blog/how-to-vectorize-a-logo) описывает этап восстановления, а не искажение в браузере. ## Частые вопросы **Изменяет ли feDisplacementMap мои контуры SVG?** Этот фильтр меняет отрисованное изображение посредством выборки по карте. В исходном браузерном примере шесть образцов силы эффекта сохраняли один контур с одинаковыми значениями d. **Почему серая карта смещения всё равно двигает графику?** Нейтральность — это значение канала 0,5 в рабочем цветовом пространстве карты. Серый sRGB 50% численно не равен 0,5 после преобразования в стандартное пространство linearRGB. Используйте явную настройку цветового пространства и контролируемый тест постоянной карты. **Что означает scale 36 в этом примере?** При единицах примитивов userSpaceOnUse выбранные значения канала от 0 до 1 дают смещения выборки от -18 до +18 пользовательских единиц SVG. Отображаемое расстояние зависит от масштабирования viewBox SVG. **Можно ли сразу передать искажённый SVG на резку?** Отображаемое искажение не является новой редактируемой геометрией резки. Сохраняйте мастер контуров без фильтра и проверяйте фактическое место назначения; если заданию нужны постоянные искривлённые контуры, подготовьте их отдельно. ## Источники 1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Входы исходника и карты, каналы и поведение выборки. 2. [W3C: Фильтр смещения](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Обратное отображение, масштаб и координаты примитивов. 3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Фиксированные параметры процедурной карты. 4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Явные значения каналов управляющей карты. 5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — Стандартное linearRGB и явное sRGB. 6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Контрольная карта постоянного цвета. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Атрибуты области фильтра. Если чистый оригинал существует только в растре, [преобразуйте свой логотип в SVG](https://perfectvector.com/ru/vectorize-logo), проверьте силуэт и отверстия и сохраните этот мастер, прежде чем делать отдельную искажённую копию для показа. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/svg-fedisplacementmap-artwork) - [Image Trace в Illustrator неактивен: проверьте объект](https://perfectvector.com/ru/blog/illustrator-image-trace-greyed-out.md) - [SVG в fpdf2: сохраните контуры в PDF на Python](https://perfectvector.com/ru/blog/fpdf2-svg-image.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)