Один SVG, девять тем: стилизация векторной графики через спецификацию CSS Linked Parameters

Использование векторной графики SVG в веб-интерфейсах всегда сопровождалось компромиссом. Если подключать файл через тег <img src="icon.svg"> или свойство background-image, браузер изолирует документ SVG. Стили страницы не проникают внутрь файла, из-за чего сменить цвет иконки при переключении тем оформления невозможно без создания дубликатов файлов.

Второй популярный подход — встраивание разметки SVG прямо в HTML-код страницы. Это дает контроль над свойствами через CSS-классы, но раздувает дерево DOM, увеличивает размер HTML-документа и лишает браузер сетевого кеширования графики.

Рабочая группа W3C предложила решение этой проблемы — проект спецификации CSS Linked Parameters Module Level 1. Она формирует стандартный декларативный мост между стилями страницы и содержимым внешнего векторного файла.

Архитектура стандарта: функция env() и директива param()

Механизм связывания работает по прозрачной двусторонней схеме:

1. Внутри векторного файла: вместо фиксированных цветов в атрибутах заливки fill или обводки stroke вызывается функция окружения env(). Первый аргумент задает имя входящего параметра (например, --back), а второй служит безопасным фолбеком по умолчанию.
2. В стилях родительской страницы: на тег <img> накладывается CSS-свойство link-parameters. В нем с помощью функции param() передаются конкретные цвета, размеры или числовые коэффициенты.

Принцип обеспечивает обратную совместимость: если старый браузер не поддерживает CSS Linked Parameters, он просто отображает фолбек из функции env(), сохраняя целостность верстки.

Описание параметров внутри векторного файла

Ниже представлен пример разметки иллюстрации poster.svg с настраиваемыми зонами фона, волос, контура лица и теней:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <!-- Фон с цветом по умолчанию #f25a80 -->
  <rect width="160" height="160" fill="env(--back, #f25a80)" />

  <!-- Волосы персонажа: фолбек #e6e780 -->
  <path fill="env(--hair, #e6e780)" d="M80 20 C50 20 30 50 30 80 Z" />

  <!-- Контуры лица: фолбек #ebb4ad -->
  <path fill="env(--face, #ebb4ad)" d="M50 50 C50 30 110 30 110 50 Z" />

  <!-- Контрастные тени: фолбек #37312d -->
  <path fill="env(--dark, #37312d)" d="M60 70 L100 70 Z" />
</svg>

Стилизация нескольких тем на родительской странице

В HTML-документе один и тот же файл poster.svg подключается через стандартные теги <img>. Файл загружается по сети ровно один раз и сохраняется в кеше. Стили страницы переопределяют параметры под разные темы:

<div class="gallery">
  <img src="poster.svg" class="poster theme-pop" alt="Яркий поп-арт постер">
  <img src="poster.svg" class="poster theme-dark" alt="Контрастный темный постер">
</div>

<style>
.poster {
  width: 160px;
  height: 160px;
}

/* Яркая тема */
.poster.theme-pop {
  link-parameters:
    param(--back, #ff4081),
    param(--hair, #ffd600),
    param(--face, #00e5ff),
    param(--dark, #2979ff);
}

/* Темная монохромная тема */
.poster.theme-dark {
  link-parameters:
    param(--back, #212121),
    param(--hair, #9e9e9e),
    param(--face, #e0e0e0),
    param(--dark, #000000);
}
</style>

Статус браузерной поддержки и практическая польза

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

Спецификация находится в статусе Working Draft, но ключевые движки уже начали ее тестирование:

• Firefox Nightly 153+ поддерживает стандарт под системным флагом layout.css.link-parameters.enabled.
• Safari Technology Preview 253 добавил экспериментальный переключатель в настройки Feature Flags.
• В проекте Chromium ведутся обсуждения реализации в движке Blink.

Для дизайн-систем это долгожданное улучшение: разработчики смогут держать один файл иконки в CDN-кеше и перекрашивать его под любые состояния интерфейса.