> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Освещение SVG: затените эмблему, сохранив отверстие > Создайте диффузное и зеркальное освещение SVG из альфа-канала полой эмблемы, ограничьте результат силуэтом и сохраните отдельный плоский векторный мастер. Source: https://perfectvector.com/ru/blog/svg-lighting-relief Language: ru Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Для SVG-логотипа с видом тиснения смягчите `SourceAlpha`, подайте этот альфа-канал в `feDiffuseLighting` или `feSpecularLighting`, объедините свет с исходным цветом и завершите композицией `in` с оригинальным `SourceAlpha`. Последний шаг удерживает эффект внутри эмблемы и сохраняет отверстие. Сохраните копию контура без фильтра как плоский мастер. Эффект меняет отрисованный вид. Он не создаёт объёмное тело, новый контур или производственный файл. В этом разборе используется одна оригинальная эмблема в виде ромбического кольца, созданная непосредственно в SVG, для сравнения этапов освещения и их альфа-канала. ## Используйте альфа-канал как поверхность освещения `feDiffuseLighting` использует входной альфа-канал как карту рельефа и создаёт непрозрачную карту света. Её вид зависит от источника света и входной поверхности. Это поведение описывает [справочник MDN по диффузному освещению](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting). В этом примере непрозрачные части кольца дают высокую область, а отверстие — низкую. Мы размываем только `SourceAlpha`, оставляя исходный цветной контур доступным как `SourceGraphic`. Смягчённый альфа-канал даёт расчёту освещения постепенный переход у внутренних и внешних краёв. [`feGaussianBlur`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) управляет смягчением через `stdDeviation`; стартовый пример использует `2.5` в явно заданном фильтре пользовательского пространства. Необработанная диффузная карта рисует по всей области фильтра, включая места, где исходный контур был прозрачным. Это полезно для проверки расчёта света, но даёт неправильный конечный силуэт нашей полой эмблемы. Сохраните исходный альфа-канал для последнего этапа ограничения. ## Скопируйте полный стартовый пример затенённой эмблемы Сохраните это как `emblem-lighting.svg` и откройте в браузере. Файл содержит один составной контур и не зависит от внешних изображений. ```svg ``` Фильтр именует каждый промежуточный результат, чтобы можно было проверить его роль: | Этап | Вход и результат | Назначение | | ----------- | ----------------------------- | ---------------------------------------- | | Размытие | SourceAlpha → bump | Смягчить переход высоты | | Диффузный | bump → diffuse | Рассчитать общее освещение | | Умножение | SourceGraphic × diffuse → lit | Затенить исходный цвет | | Зеркальный | bump → shine | Рассчитать отражённую составляющую | | Сложение | lit + shine → paint | Объединить затенение и блик | | Ограничение | paint in SourceAlpha | Восстановить исходные силуэт и отверстие | Арифметическое умножение использует `k1="1"` с нулевыми остальными коэффициентами. Сложение использует `k2="1" k3="1"` с нулевыми остальными. [`feComposite`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) определяет эти пиксельные операции и оператор `in`. Если нужна исходная граница, оставьте вторым входом конечной композиции `SourceAlpha`, а не размытый `bump`. Фильтр явно использует `color-interpolation-filters="linearRGB"` — значение по умолчанию для операций фильтров SVG. Это отдельно от обычной интерполяции окрашивания. Различие описывает [справочник MDN по color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters). Все измеренные варианты освещения здесь используют одну настройку. ## Сравните диффузное затенение с зеркальным блеском Диффузное освещение затемняет и осветляет исходный цвет по карте света. Зеркальный этап добавляет отражённую составляющую. [`feSpecularLighting`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) описывает зависящий от света результат и его параметры. Стартовый пример использует сдержанную константу `.7` и показатель `18`; настройте их после получения пригодного диффузного эффекта. Чтобы проверить только диффузный эффект, сохраните этапы размытия, диффузного освещения и умножения, затем замените первый вход конечной композиции с `paint` на `lit`. Удалите зеркальный этап и сложение. Чтобы проверить только зеркальное освещение поверх плоского цвета, сохраните размытие и зеркальный этап. Замените первый вход сложения с `lit` на `SourceGraphic`, удалите диффузный этап и умножение и сохраните конечную композицию `paint in SourceAlpha`. Оба сравнения сохраняют один исходный контур и направление света. Наш удалённый свет использует `azimuth="225" elevation="45"`. [`feDistantLight`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) — элемент источника света для обоих примитивов освещения. Углы заданы в градусах, а не пиксельными позициями. При сравнении комбинированного эффекта меняйте направление на обоих этапах освещения одновременно. ## Что показали исходные браузерные контрольные образцы Мы открыли шесть созданных SVG-образцов в Chrome при `80 × 80` и `160 × 160` CSS-пикселях. Плоский мастер, диффузный, зеркальный и комбинированный эффекты оставались визуально различимыми. Более высокий диффузный `surfaceScale` усилил контраст края в этом примере. Контроль необработанного диффузного света показал серый прямоугольник с заполненным отверстием вместо прозрачного силуэта. Отдельное считывание пикселей использовало исходный размер холста `200 × 200`. Образец полосы был в `(100, 38)`, образец края — в `(101, 22)`, отверстия — в `(100, 100)`, а внешний — в `(10, 10)`. | Образец | RGB полосы | RGB края | Альфа отверстия / снаружи | | ------------------------------------------------------------------- | ------------- | ------------- | ------------------------- | | Плоский мастер | 220, 121, 95 | 220, 121, 95 | 0 / 0 | | Необработанная диффузная карта света, масштаб 4 | 219, 219, 219 | 214, 214, 214 | 255 / 255 | | Диффузный цвет, масштаб 4, ограниченный | 189, 102, 81 | 185, 101, 79 | 0 / 0 | | Диффузный цвет, масштаб 12, ограниченный | 189, 102, 81 | 155, 83, 64 | 0 / 0 | | Зеркальное освещение поверх плоского цвета, масштаб 4, ограниченное | 242, 162, 145 | 221, 122, 96 | 0 / 0 | | Комбинированный эффект, масштаб 4, ограниченный | 214, 149, 137 | 185, 102, 81 | 0 / 0 | Каждый файл сохранил одинаковое значение `d`, один контур и ноль элементов image. Экранный эффект не создал дополнительной исходной геометрии. Это наблюдения для данного браузера и исходника, а не гарантии для другого средства отрисовки или импорта редактором. **Освещение и плоский мастер** ![Концептуальная иллюстрация одинаковых полых ромбических эмблем с плоским цветом, общим затенением и сосредоточенным бликом.](https://perfectvector.com/blog/svg-lighting-relief/lighting-and-master.webp) *Иллюстрация: диффузная тень и зеркальный блеск могут обрабатывать один контур, сохраняя отверстие чистым. Это не браузерный образец, не результат трассировки и не физический рельеф.* ## Настройте поле высот перед изменением контура [`surfaceScale`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) задаёт масштаб высоты поверхности для расчёта освещения. Он не расширяет контур. Наши диффузные контроли `4` и `12` меняли только это значение: проверенная плоская полоса оставалась того же цвета, а образец края при `12` становился темнее. Используйте контролируемую последовательность: 1. Подтвердите исходный прозрачный силуэт и отверстие без фильтра. 2. Выберите смягчение альфа-канала и направление света. 3. Сравните небольшой и больший `surfaceScale`, сохранив всё остальное. 4. Добавьте зеркальный блеск, затем последней операцией ограничьте окрашивание исходным альфа-каналом. 5. Проверьте передаваемую графику в реальном размере отображения на контрастном фоне. Текущая [спецификация Filter Effects](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) задаёт альфа-канал диффузного выхода равным единице везде, а зеркального выхода — по его цветовым компонентам. Не следует считать, что любой из выходов сохраняет исходное отверстие. Она также определяет расчёт нормали по соседним образцам альфа-канала. В стартовом примере `kernelUnitLength` не задан; проверка двух размеров не устанавливает независимость образцов освещения от размера. Если промежуточный буфер этапа освещения появляется как конечный результат, проверьте именованные входы и последний примитив. Для этого кольца прямой возврат диффузной карты света позволил воспроизвести непрозрачный серый прямоугольник. Конечный этап `in SourceAlpha` намеренный, даже если более раннее умножение уже выглядит сохраняющим прозрачность. Если размытие или эффект обрезан неожиданным прямоугольником, проверьте область фильтра с помощью [руководства по обрезке SVG](https://perfectvector.com/ru/blog/svg-shadow-clipped). Отделяйте эту область от конечного ограничения исходным альфа-каналом: одна ограничивает рабочую область эффекта, другое восстанавливает нужный силуэт. ## Передавайте экранный эффект вместе с плоским мастером Удалите атрибут фильтра у контура, чтобы проверить плоский мастер. Он сохраняет тот же внешний контур, внутреннее отверстие и сплошную коралловую заливку. Держите эту копию рядом с затенённой веб-версией, чтобы последующие правки могли начинаться с исходной геометрии. Для физической отделки используйте отдельный процесс подготовки, например [векторную графику для тиснения](https://perfectvector.com/ru/blog/vector-artwork-for-embossing). Экранная настройка освещения даёт внешний вид, а не геометрию штампа или измеренную глубину рельефа. [Руководство по морфологическому очертанию SVG](https://perfectvector.com/ru/blog/svg-femorphology-outline) объясняет другую обработку границ фильтром, не выдавая её за восстановленные контуры. Если логотип существует только в PNG или JPG, [векторизуйте логотип с PerfectVector](https://perfectvector.com/ru/vectorize-logo), проверьте восстановленные внешний контур и отверстие и сохраните чистый плоский мастер перед добавлением освещения в SVG-процессе. Сервис восстанавливает векторную геометрию; этот диффузный/зеркальный конвейер — отдельно созданный эффект отображения. Если векторный мастер уже есть, применяйте и проверяйте фильтр напрямую. ## Частые вопросы **Могут ли фильтры освещения SVG придать логотипу вид тиснения?** Они могут имитировать затенение и блики по полю высот на основе альфа-канала. Отрисованный эффект не создаёт физический рельеф, дополнительные контуры или файл производственного штампа. **Почему эффект освещения SVG заполняет прозрачное отверстие?** Необработанная диффузная карта света непрозрачна во всей области фильтра. Объедините свет с исходным цветом и завершите композицией in с оригинальным SourceAlpha, чтобы ограничить эффект исходным силуэтом. **Чем различаются диффузное и зеркальное освещение SVG?** Диффузное освещение даёт общий свет для затенения исходного цвета. Зеркальное освещение даёт отражённую составляющую, добавляемую как блеск. Оба используют входной альфа-канал как карту рельефа и зависят от выбранных настроек света и поверхности. **Меняет ли surfaceScale контур логотипа?** Нет. Он меняет масштаб высоты в расчёте освещения. В двух наших диффузных контролях данные контура оставались одинаковыми, а отрисованный контраст края менялся. ## Источники 1. [MDN feDiffuseLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) — Входная карта рельефа из альфа-канала и непрозрачный выход диффузного света. 2. [MDN feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) — Смягчённый вход и особенности области фильтра. 3. [MDN feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Арифметическое умножение/сложение и ограничение исходным альфа-каналом. 4. [MDN color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — Стандартное linearRGB для операций фильтра. 5. [MDN feSpecularLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) — Отражённая составляющая и её настройки. 6. [MDN feDistantLight](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) — Источник света для обоих примитивов освещения. 7. [MDN surfaceScale](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) — Масштаб высоты поверхности для расчёта. 8. [Спецификация освещения Filter Effects](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) — Альфа-канал освещения, единицы углов и расчёты соседних образцов. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/svg-lighting-relief) - [Карты смещения SVG: исказите предпросмотр логотипа](https://perfectvector.com/ru/blog/svg-fedisplacementmap-artwork.md) - [Выравнивание обводки SVG: внутри или снаружи](https://perfectvector.com/ru/blog/svg-stroke-alignment.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)