Освещение SVG: затените эмблему, сохранив отверстие

Для SVG-логотипа с видом тиснения смягчите SourceAlpha, подайте этот альфа-канал в feDiffuseLighting или feSpecularLighting, объедините свет с исходным цветом и завершите композицией in с оригинальным SourceAlpha. Последний шаг удерживает эффект внутри эмблемы и сохраняет отверстие. Сохраните копию контура без фильтра как плоский мастер.

Эффект меняет отрисованный вид. Он не создаёт объёмное тело, новый контур или производственный файл. В этом разборе используется одна оригинальная эмблема в виде ромбического кольца, созданная непосредственно в SVG, для сравнения этапов освещения и их альфа-канала.

Используйте альфа-канал как поверхность освещения

feDiffuseLighting использует входной альфа-канал как карту рельефа и создаёт непрозрачную карту света. Её вид зависит от источника света и входной поверхности. Это поведение описывает справочник MDN по диффузному освещению. В этом примере непрозрачные части кольца дают высокую область, а отверстие — низкую.

Мы размываем только SourceAlpha, оставляя исходный цветной контур доступным как SourceGraphic. Смягчённый альфа-канал даёт расчёту освещения постепенный переход у внутренних и внешних краёв. feGaussianBlur управляет смягчением через stdDeviation; стартовый пример использует 2.5 в явно заданном фильтре пользовательского пространства.

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

Скопируйте полный стартовый пример затенённой эмблемы

Сохраните это как emblem-lighting.svg и откройте в браузере. Файл содержит один составной контур и не зависит от внешних изображений.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Фильтр именует каждый промежуточный результат, чтобы можно было проверить его роль:

Арифметическое умножение использует k1="1" с нулевыми остальными коэффициентами. Сложение использует k2="1" k3="1" с нулевыми остальными. feComposite определяет эти пиксельные операции и оператор in. Если нужна исходная граница, оставьте вторым входом конечной композиции SourceAlpha, а не размытый bump.

Фильтр явно использует color-interpolation-filters="linearRGB" — значение по умолчанию для операций фильтров SVG. Это отдельно от обычной интерполяции окрашивания. Различие описывает справочник MDN по color-interpolation-filters. Все измеренные варианты освещения здесь используют одну настройку.

Сравните диффузное затенение с зеркальным блеском

Диффузное освещение затемняет и осветляет исходный цвет по карте света. Зеркальный этап добавляет отражённую составляющую. feSpecularLighting описывает зависящий от света результат и его параметры. Стартовый пример использует сдержанную константу .7 и показатель 18; настройте их после получения пригодного диффузного эффекта.

Чтобы проверить только диффузный эффект, сохраните этапы размытия, диффузного освещения и умножения, затем замените первый вход конечной композиции с paint на lit. Удалите зеркальный этап и сложение.

Чтобы проверить только зеркальное освещение поверх плоского цвета, сохраните размытие и зеркальный этап. Замените первый вход сложения с lit на SourceGraphic, удалите диффузный этап и умножение и сохраните конечную композицию paint in SourceAlpha. Оба сравнения сохраняют один исходный контур и направление света.

Наш удалённый свет использует azimuth="225" elevation="45". feDistantLight — элемент источника света для обоих примитивов освещения. Углы заданы в градусах, а не пиксельными позициями. При сравнении комбинированного эффекта меняйте направление на обоих этапах освещения одновременно.

Что показали исходные браузерные контрольные образцы

Мы открыли шесть созданных SVG-образцов в Chrome при 80 × 80 и 160 × 160 CSS-пикселях. Плоский мастер, диффузный, зеркальный и комбинированный эффекты оставались визуально различимыми. Более высокий диффузный surfaceScale усилил контраст края в этом примере. Контроль необработанного диффузного света показал серый прямоугольник с заполненным отверстием вместо прозрачного силуэта.

Отдельное считывание пикселей использовало исходный размер холста 200 × 200. Образец полосы был в (100, 38), образец края — в (101, 22), отверстия — в (100, 100), а внешний — в (10, 10).

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

Освещение и плоский мастер

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

surfaceScale задаёт масштаб высоты поверхности для расчёта освещения. Он не расширяет контур. Наши диффузные контроли 4 и 12 меняли только это значение: проверенная плоская полоса оставалась того же цвета, а образец края при 12 становился темнее.

Используйте контролируемую последовательность:

1. Подтвердите исходный прозрачный силуэт и отверстие без фильтра.
2. Выберите смягчение альфа-канала и направление света.
3. Сравните небольшой и больший surfaceScale, сохранив всё остальное.
4. Добавьте зеркальный блеск, затем последней операцией ограничьте окрашивание исходным альфа-каналом.
5. Проверьте передаваемую графику в реальном размере отображения на контрастном фоне.

Текущая спецификация Filter Effects задаёт альфа-канал диффузного выхода равным единице везде, а зеркального выхода — по его цветовым компонентам. Не следует считать, что любой из выходов сохраняет исходное отверстие. Она также определяет расчёт нормали по соседним образцам альфа-канала. В стартовом примере kernelUnitLength не задан; проверка двух размеров не устанавливает независимость образцов освещения от размера.

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

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

Передавайте экранный эффект вместе с плоским мастером

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

Для физической отделки используйте отдельный процесс подготовки, например векторную графику для тиснения. Экранная настройка освещения даёт внешний вид, а не геометрию штампа или измеренную глубину рельефа. Руководство по морфологическому очертанию SVG объясняет другую обработку границ фильтром, не выдавая её за восстановленные контуры.

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

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

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

Почему эффект освещения SVG заполняет прозрачное отверстие? Необработанная диффузная карта света непрозрачна во всей области фильтра. Объедините свет с исходным цветом и завершите композицией in с оригинальным SourceAlpha, чтобы ограничить эффект исходным силуэтом.

Чем различаются диффузное и зеркальное освещение SVG? Диффузное освещение даёт общий свет для затенения исходного цвета. Зеркальное освещение даёт отражённую составляющую, добавляемую как блеск. Оба используют входной альфа-канал как карту рельефа и зависят от выбранных настроек света и поверхности.

Меняет ли surfaceScale контур логотипа? Нет. Он меняет масштаб высоты в расчёте освещения. В двух наших диффузных контролях данные контура оставались одинаковыми, а отрисованный контраст края менялся.

Источники

1. MDN feDiffuseLighting — Входная карта рельефа из альфа-канала и непрозрачный выход диффузного света.
2. MDN feGaussianBlur — Смягчённый вход и особенности области фильтра.
3. MDN feComposite — Арифметическое умножение/сложение и ограничение исходным альфа-каналом.
4. MDN color-interpolation-filters — Стандартное linearRGB для операций фильтра.
5. MDN feSpecularLighting — Отражённая составляющая и её настройки.
6. MDN feDistantLight — Источник света для обоих примитивов освещения.
7. MDN surfaceScale — Масштаб высоты поверхности для расчёта.
8. Спецификация освещения Filter Effects — Альфа-канал освещения, единицы углов и расчёты соседних образцов.