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

fill для SVG

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
	<path d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
</svg>

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
	<path fill="#272727" d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
</svg>

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

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
	<path fill="#009900" d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
</svg>

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

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

<a href="#">
	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
		<path fill="currentColor" d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
	</svg>
	Это моя ссылка
</a>

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

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

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

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