CSS: currentColor для SVG

currentColor.md

CSS: currentColor для SVG

Можливості використання ключового слова currentColor для SVG зображень.

Властивість FILL для SVG

Примустимо, що ми маємо монохромне 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 в CSS

svg {
  fill: currentColor;
}

Використання currentColor з SVG

На практиці значення currentColor, в поєднанні з SVG, використовують для зміни кольору через зміну кольору батьківського елелементу:

<a class="link" 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>

.link {
  color: tomato;
}
.icon {
  fill: currentColor;
}

(!)Коли не варто використовувати currentColor

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

Гарна лаконічна стаття. Варто було б додати ще інфу як на практиці в css використовується currentColor разом з inline svg. Коли властивість fill вилучається з опису символу в svg спрайті і задається в css правилі:

HTML

<a class="my-link" href=" ">
  <svg class="my-icon" width="12" height="12">
    <use href="./images/sprite.svg#my-icon"></use>
  </svg>
  Текст посилання
</a>

CSS

.my-link {
  color: tomato;
}
.my-icon {
  fill: currentColor;
}

@AndreiRadchenko Дякую, доповнив.