Подключение SVG‑иконок и перекраска CSS без потери качества

Чтобы добавить SVG-иконки и перекрашивать их без потери качества, используйте inline SVG или SVG-спрайт и задавайте цвет через fill/stroke: currentColor. Если иконка подключена как файл (<img> или background-image), перекраска ограничена — выручает mask-image.

Оглавление

Какой способ подключения выбрать

Для веба обычно хватает 3 рабочих сценариев: inline, спрайт, маска. Остальные — компромиссы.

Сравнение способов подключения SVG-иконок

СпособПерекраска CSSЛучшее применениеОграничения
Inline SVG в HTML✅ максимальнаяhover/transition, разные части иконкибольше разметки
SVG sprite (symbol + use)✅ хорошаямного иконок на сайте, единый наборважна дисциплина в атрибутах внутри symbol
<img src="icon.svg">❌ почти нетконтентные картинки, простая вставкаCSS не видит внутренние path
background-image: url(icon.svg)❌ почти нетдекоративные элементытрудно управлять цветом/состояниями
mask-image + background-color✅ (монохром)быстро перекрасить внешний SVGтолько “силуэт”, без многоцветности

Если нужна стабильная перекраска “как у текста” — делайте иконки одноцветными и используйте fill="currentColor" или stroke="currentColor".

Как правильно перекрашивать: fill, stroke и currentColor

Есть две главные модели иконок:

  • заливка (fill) — большинство “плоских” иконок;
  • обводка (stroke) — линейные иконки.

Inline SVG: самый управляемый вариант

<button class="btn">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2l9 4.5-9 4.5L3 6.5 12 2z"></path>
  </svg>
  Уведомления
</button>

.btn { color: #111; }
.btn:hover { color: #0a66ff; }

.icon{
  width: 20px;
  height: 20px;
  fill: currentColor; /* наследует цвет текста */
  transition: transform .2s ease, fill .2s ease;
}
.btn:hover .icon{ transform: translateY(-1px); }

Для “stroke”-иконок

.icon-stroke{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Частая причина “не красится”: в SVG внутри стоит жёсткий fill="#000" / stroke="#000". Такой атрибут часто перебивает CSS. Решение — удалить его или заменить на currentColor.

Когда SVG уже подключен файлом: img, background и маска

Почему <img> и background-image не перекрашиваются

<img src="icon.svg"> и background-image: url(icon.svg) подгружают SVG как внешний ресурс, поэтому ваш CSS не может обратиться к его внутренним элементам (<path>, <g>) и поменять fill/stroke.

Если вы не готовы переписывать разметку на inline/sprite, используйте маску.

Монохромная перекраска через mask-image

.icon-mask{
  width: 20px;
  height: 20px;
  background-color: #111;

  -webkit-mask: url("/icons/bell.svg") no-repeat center / contain;
  mask: url("/icons/bell.svg") no-repeat center / contain;
}

.icon-mask.is-active{ background-color: #0a66ff; }

Маска сохраняет чёткость (это всё ещё вектор), но превращает иконку в “трафарет”: градиенты и несколько цветов не сохранятся.

Частые ошибки

  • Пытаются красить fill у <img> или background-image — там это не работает.
  • Внутри SVG оставили fill="#000" / stroke="#000" и ждут, что currentColor перебьёт.
  • Линейную иконку красят через fill, хотя нужно stroke.
  • Нет viewBox: иконка плохо масштабируется и “ломается” при смене размеров.
  • В спрайте разные иконки с разной логикой (часть через fill, часть через stroke) без общих правил — потом сложно поддерживать.

FAQ

Можно ли перекрашивать многоцветные SVG одной CSS-командой?
Полностью — редко. Проще делать inline и управлять частями по классам/селектором или иметь отдельные версии для тем.

Как сделать, чтобы иконка автоматически принимала цвет текста/ссылки?
Задайте элементам внутри SVG fill="currentColor" (или stroke="currentColor") и управляйте цветом через color у родителя.

Что выбрать для большого проекта с десятками иконок?
Обычно лучший баланс — SVG sprite (один набор иконок) + правило “все монохромные иконки используют currentColor”.

Оптимизация SVG ухудшит качество?
Нет, если это вектор. Оптимизация обычно убирает метаданные и лишние атрибуты, снижая вес без потери чёткости.