CSS Linked Parameters

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

<a href="...">
  <svg 
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path d="..."/>
  </svg>
  Назад
</a>
<style>
  a {
    color: var(--color-link);
    transition: color .3s linear;
    
    svg path {
      fill: currentColor;
      transition: fill .3s linear;
    }
  }
  
  a:hover {
    color: var(--color-link-hover);
  }
</style>

Однако при использовании внешних SVG-иконок доступ в CSS теряется. Отчасти это можно обойти через SVG-спрайты, но у них есть свои нюансы. CSSWG выпустила черновик CSS Linked Parameters, который предлагает решение проблемы.

Суть предложения в том, чтобы передавать через URL специальные параметры и затем получать к ним доступ через переменные окружения в атрибутах и CSS. Так можно будет передать цвет во внешний SVG-файл, подключаемый через <img> или url().

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

<!--
#param() задаёт параметр
--color со значением grern
-->
<img src="icon.svg#param(--color,green)">

<img src="icon.svg">
<style>
  img {
    /*
    Параметры можно задать в CSS
    с помощью link-parameters.
    Это добавит к src и
    ссылкам на все ресурсы
    #param(--color,green)
    */
    link-parameters: 
      param(--color, green)
    ;
  }

  .icon {
    /*
    Параметры можно задать
    в функции url() в CSS
    */
    background-image:
      url(
        "icon.svg",
        param(--color, green)
      )
    ;
  }
</style>

<!-- icon.svg -->
<svg>
  <!--
  env() считывает переданный
  в URL параметр --color, и
  устанавливает в атрибут fill,
  значение по умолчанию black
  -->
  <path
    fill="env(--color, black)" 
    d="..."
  />
</svg>

<!-- icon.svg -->
<svg>
  <!-- можно задать в CSS -->
  <style>
    path {
      fill: env(--color, black);
    }
  </style>
  <path d="..."/>
</svg>

Можно передавать несколько параметров, перечислив их в URL через &, указав несколько param() через пробел в url() или через запятую в link-parameters. В качестве значения могут быть пользовательские свойства CSS.

<!-- параметры в URL через & -->
<img src="icon.svg#param(--color,green)&param(--stroke,1)">

<img src="icon.svg">
<style>
  img {
    /*
    несколько param() в link-parameters,
    доступны пользовательские свойства
    */
    link-parameters: 
      param(--color, var(--color-primary)),
      param(--stroke, 1)
    ;
  }

  .icon {
    /*
    несколько param() в url(),
    доступны пользовательские свойства
    */
    background-image:
      url(
        "icon.svg",
        param(--color, var(--color-primary))
        param(--stroke, 1)
      )
    ;
  }
</style>

Таким образом появляется возможность передавать данные во внешние файлы. Основное назначение — <svg>, но также упоминается возможность передачи для <iframe>. Синтаксис фрагментов используется для обратной совместимости.

#html #svg #css