Один SVG, девять постеров: свойство link-parameters
CSS Linked Parameters позволяет передавать параметры в один SVG-файл из HTML и CSS без дублирования.
Вадим Макеев разобрал свежую спецификацию CSS Linked Parameters, которая уже доступна в Firefox Nightly и за флагом в Safari TP.
Главная фишка — возможность передавать параметры внутрь SVG-файла прямо из HTML/CSS страницы, где он подгружается.
Как это работает:
- В самом SVG вместо жестко заданных значений используется переменная:
env(--color, fallback). - На внешнем сайте при подключении SVG (например, через
<img>) передаётся нужный параметр:link-parameters: param(--color, coral).
В качестве демонстрации Вадим берёт SVG-постер в стиле Энди Уорхола и вставляет его 9 раз через обычный <img>. В итоге один закешированный файл раскрашивается в разные цвета без дублирования кода и без встраивания inline SVG.
Отличное решение проблемы, когда ради кастомизации цвета приходится либо тащить SVG в DOM, либо плодить копии файлов.