Использование currentColor для динамического цвета SVG

Недавно в статье «CSS: currentColor» обсуждалось использование ключевого слова currentColor для создания адаптивных компонентов. В этой статье мы рассмотрим, как применять currentColor для динамического изменения цвета SVG-изображений.

Содержание

FILL для SVG
Динамический цвет для SVG
Когда не использовать currentColor

FILL для SVG

Представим, что у нас есть монохромное 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 не заданы, изображение будет черным по умолчанию. Чтобы изменить цвет SVG на темно-угольный (#272727) в соответствии с текстом страницы, нужно добавить атрибут 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

Этот метод работает, но что делать, если SVG-изображение используется в тексте разного цвета, например, зеленого?

<p>Это мой зеленый текст <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>
</p>

Чтобы каждый раз не менять значение fill, можно использовать currentColor. Это ключевое слово устанавливает цвет SVG-изображения в соответствии с текущим цветом текста.

Пример использования currentColor:

<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>

Теперь SVG-изображение будет автоматически менять цвет в зависимости от текста, что особенно удобно при использовании в ссылках или других интерактивных элементах.

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

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

Использование currentColor значительно упрощает стилизацию SVG-изображений и обеспечивает их адаптивность к различным цветовым темам на сайте.