Небольшой трюк с SVG

Рассмотрим ситуацию, когда на странице есть одинаковые графические элементы с точки зрения формы, но разного размера и цвета. Конечно же хочется использовать одно изображение. Поскольку графика векторная, то разный размер не является проблемой. А вот что с цветом? Первым делом на ум приходит инлайновая вставка и использование fill="currentColor" или аналогичной записи через CSS.

Но что, если хочется использовать тег <img> для контенного изображения, дабы оно и кешировалось, и индексировалось? Или наоборот, не хочется почём зря инлайнить совсем уж декоративное изображение, засоряя разметку, ведь для этого есть background-image. Нам помогут <symbol> и <use>.

Возьмём пример из практики: одна маленькая белая иконка находится слева от некой ссылки, а такая же, но большая и цветная — декорация для другого элемента. Базовый файл с SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99">
  <path d="..."/>
</svg>

Превратим этот файл в спрайт с одним изображением:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99">
  <symbol id="some">
    <path d="..."/>
  </symbol>
</svg>

Теперь при помощи <use> вполне уместно заинлайнить иконку в ссылку:

<a>
  <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 99 99">
    <use xlink:href="file.svg#some" fill="#fff"/>
  </svg>
  Text
</a>

А теперь такой же <use> добавим в сам файл, задав необходимый цвет:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 99 99">
  <symbol id="some">
    <path d="..."/>
  </symbol>
  <use xlink:href="#some" fill="#f0615c"/>
</svg>

{
  background-image: url(file.svg)
}

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