CSS-маски SVG: сохраните силуэт, задайте цвет

CSS-маска SVG управляет тем, какие части элемента остаются видимыми. Для одноцветного значка используйте силуэт SVG как маску и окрасьте элемент через background-color: currentColor. Тогда видимый цвет значка берется из CSS вместо отображения исходной палитры SVG.

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

Справка MDN по mask-image описывает, как исходное изображение и режим маскирования определяют видимость. Практическая задача — подготовить полезный силуэт, выбрать его интерпретацию и проверить в размере вашего интерфейса.

Используйте маску, если нужен один окрашенный силуэт

Рассмотрим значок закладки с ромбовидным отверстием и небольшой коралловой полосой. Как обычное изображение SVG он имеет два цвета. Как альфа-маска над синим элементом непрозрачная графика показывает синий; коралловая полоса больше не отображается отдельным цветом.

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

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

Подготовьте небольшой исходник с настоящим отверстием

Сохраните этот исходный пример как bookmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

Первый контур содержит внешнюю закладку и ее ромбовидное отверстие. Полноразмерного фонового прямоугольника нет. Маленький второй прямоугольник — коралловая полоса.

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

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

Окрасьте элемент значка через CSS

Поместите icon.css рядом с SVG и используйте эти правила:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

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

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Здесь значок сопровождает «Save article», поэтому скрыт из дерева доступности, чтобы не повторять эту подпись. Пример показывает только представление; отдельно подключите кнопку к действию сохранения вашего приложения.

Элементу нужен прямоугольник для окрашивания, поэтому CSS задает ширину, высоту и display. currentColor использует его цвет текста. Изменение color кнопки меняет окрашивание значка без переписывания bookmark.svg.

Справка по mask-size определяет contain как вписывание всего изображения маски с сохранением пропорций. В сочетании с центрированием и отсутствием повторения оно помещает исходник в один предсказуемый прямоугольник значка. Руководство web.dev по маскированию рассматривает эти настройки размеров и повторения.

Отдавайте пример через HTTP, включая локальную проверку. Описание mask-image MDN предупреждает, что локальные источники изображений file:// для этого не принимаются. Отсутствующая или не загруженная маска может оставить маскируемый элемент невидимым.

Различайте SVG-изображение и элемент маски SVG

Файл SVG, используемый как изображение, и ссылка на элемент SVG <mask> — разные входные данные. Не выбирайте режим только потому, что имя файла заканчивается на .svg.

Справка по mask-mode определяет это зависимое от источника значение по умолчанию. При интерпретации альфа-канала непрозрачные черный и белый оба показывают элемент. При интерпретации яркости непрозрачный белый показывает его, а черный скрывает; промежуточные значения могут давать частичную видимость.

mask-type применяется к элементу SVG <mask> и по умолчанию равен luminance, согласно справке по mask-type. Добавление его обычному span значка не изменит интерпретацию маски-изображения. Используйте mask-mode на маскируемом элементе, если нужно задать это поведение.

Пример закладки использует обычное внешнее SVG-изображение и явно выбирает alpha. Проверяйте примененные свойства в поддерживаемых браузерах; поддержка общей функции маскирования не устанавливает поддержку каждого сочетания режима и источника.

Диагностируйте квадрат, отсутствующий значок или заполненное отверстие

Полезная отрицательная проверка — добавить в копию bookmark.svg полноразмерный непрозрачный белый прямоугольник позади графики. При интерпретации альфа-канала эта копия показывает всю область маски. Изменение прямоугольника с белого на черный не восстанавливает силуэт, поскольку оба цвета остаются непрозрачными.

Удалите ненужный фон из исходника вместо изменения цвета элемента. Сохраните исходный файл для сравнения исправленной копии.

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

Оценивайте результат в размере компонента

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

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

Для семейства значков сравните соседние символы в одном размере CSS. Их viewBox могут содержать разное количество пустого пространства, из-за чего одинаковые прямоугольники выглядят неравномерно. Руководство по подготовке значков UI kit рассматривает эту работу по согласованию.

Восстанавливайте растровый силуэт только при необходимости

Прозрачный PNG уже может быть CSS-маской; преобразование в SVG не является требованием маскирования. Сохраните существующий чистый векторный исходник, если он есть.

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

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

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

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

Сохраняет ли маска SVG исходные цвета? Маска управляет видимостью. В примере с равномерным фоном элемент дает один цвет, поэтому отдельные цвета исходника не сохраняются.

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

Всегда ли маски SVG являются масками яркости? Нет. Обычное изображение SVG обычно использует альфа-канал при match-source. Элемент маски SVG использует яркость по умолчанию, если интерпретация не изменена.

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

Источники

1. MDN — mask-image — Источники изображений, ошибки загрузки, требования локального сервера и видимость.
2. MDN — mask-mode — Альфа-канал, яркость и значения по умолчанию, зависящие от источника.
3. MDN — mask-type — Интерпретация элемента маски SVG.
4. MDN — mask-size — Размер contain и пропорции изображения.
5. web.dev — Apply effects to images with CSS mask-image — Маски-изображения, размеры и повторение.

Начните с одного значка и проверьте силуэт, отверстие и окончательный размер интерфейса. Если растровый исходник нужно восстановить, подготовьте пробный SVG, проверьте прозрачность и испытайте его с окрашиванием CSS вашего интерфейса.