Несколько дней назад Вы могли прочитать статью о использовании ключевого слова currentColor для создания расширяемых компонентов - “CSS: currentColor”. Однако, currentColor можно применять и для svg-изображений.

fill для SVG

Допустим, есть монохромное svg-изображение, и Вы хотите, чтобы оно было одинакового цвета с основным текстом.

Возьмем картинку с деревом ():

Если атрибуты fill и stroke не определены, дерево будет черным (#000000) - это цвет по умолчанию.

Например, цвет текста на сайте “темно-угольный” (#272727), если Вы хотите, чтобы svg-изображение было такого же цвета, нужно задать соответствующее значение цвета для атрибута fill тега path:

Динамический цвет для SVG

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

Это мой зеленый текст

В данном случае цвет текста #009900. Вам придется еще раз изменить значение параметра fill для изображения:

Теперь картинка и текст одного цвета. А что делать, если это будет ссылка: при наведении цвета опять не будут совпадать.

Именно в таких случаях ключевое слово currentColor будет Вашим спасением. Его можно использовать в качестве значения атрибута fill: цвет svg-картинки будет соответствовать цвету текста:

 
 Это моя ссылка

Это очень хороший и, что важно, очень востребованный трюк.

Когда не нужно использовать currentColor

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

Спасибо за внимание.