Коротко: поменять цвет SVG через CSS можно, если SVG вставлен прямо в HTML (fill, stroke, currentColor). Если это файл в <img src="icon.svg">, стилизовать его нельзя — используют mask, CSS-фильтры или вставку кода SVG на страницу.
Три способа вставки SVG
| Способ | Можно красить CSS? |
|---|---|
| Инлайн (код SVG в HTML) | да, полностью |
<svg><use href="#id"></svg> |
частично (через currentColor) |
<img src="x.svg"> |
нет, только mask/фильтры |
background-image: url(x.svg) |
нет |
Вкладки: способы покраски
<svg class="icon" viewBox="0 0 24 24">
<path d="..." />
</svg>.icon path { fill: #003F8F; }
.icon-stroke path { fill: none; stroke: #992222; stroke-width: 2; }Инлайн-SVG — обычный элемент DOM, поэтому fill и stroke работают как любые CSS-свойства. Меняйте по состоянию (:hover, .is-active).
.icon { fill: currentColor; }Главный приём: fill: currentColor заставляет иконку взять цвет текста. Меняете color у кнопки — иконка перекрашивается автоматически.
.btn { color: #fff; background: #003F8F; }
.btn .icon { fill: currentColor; } /* иконка белая */Если SVG подключается как картинка (или фоном), красим через маску:
.icon-mask {
width: 24px; height: 24px;
background: #003F8F; /* цвет иконки */
-webkit-mask: url("icon.svg") no-repeat center / contain;
mask: url("icon.svg") no-repeat center / contain;
}Маска использует форму SVG как «трафарет», а цвет задаёт background. Работает в современных браузерах.
Если нужно «перекрасить» чёрный SVG-файл в другой цвет без маски — применяют цепочку фильтров:
.icon-img { filter: invert(24%) sepia(90%) saturate(2000%) hue-rotate(200deg); }Способ работает, но подбор значений — метод проб. Проще взять инлайн-SVG или маску.
fill: currentColor. Иконка всегда совпадает с цветом текста, легко меняется по состоянию и поддерживает тёмную тему.Тёмная тема и состояния
:root { --icon: #003F8F; }
[data-theme="dark"] { --icon: #7fb2ff; }
.icon { fill: var(--icon); }
.icon:hover { fill: #992222; }Переменные позволяют менять цвет всех иконок в одном месте и мгновенно переключать тему.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| fill не действует | SVG вставлен как img | инлайн или mask |
| Красится только часть | в файле задан свой fill | убрать заливки в файле |
| Иконка не меняет цвет в теме | жёсткий цвет в SVG | использовать currentColor |
| Маска не видна | не задан background | задать цвет фона |
Проверьте себя
<img>?
fill: currentColor?
Вопросы и ответы
fill красит заливку фигуры, stroke — контур (обводку). У контурных иконок часто fill: none и цветной stroke.
Через CSS-переменную: .icon { fill: var(--icon); } и менять --icon в одном месте.
Возможно, в самом SVG-файле прописаны атрибуты fill="#...". Атрибуты в разметке перебивают некоторые стили — уберите их или используйте fill: none в сочетании с CSS.
Инлайн-SVG обычно предпочтительнее: он в DOM, управляем и кэшируется вместе со страницей. Маска — когда SVG подключён внешним файлом.
Итоги
- Красить CSS можно инлайн-SVG (
fill,stroke). - Универсально —
fill: currentColorдля иконок рядом с текстом. - Для
<img src=".svg">—maskили фильтры. - Убирайте жёсткие цвета из файлов SVG, используйте переменные.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.