Как изменить цвет SVG в CSS

В этой статье рассмотрим несколько примеров, как задать цвет любому изображению в формате svg с использованием css-стилей.

Есть множество вариантов, как использовать SVG. От того, как вы применяете SVG и будет зависеть способы редактирования.

Давайте начнем с базы.

Основы

Что такое SVG?

SVG (Scalable Vector Graphic) — масштабируемая векторная графика. Это уникальный формат для изображений. В отличии от привычных нам форматов, в svg не используются пиксели. Здесь картинка строется на векторах. Это значит, что вы можете, например, масштабирать размер картинки до любых значений и при этом не терять качество.

Изображение svg можно вставить кодом прямо в файл html — это будет инлайновый вариант:

<div class="svg-inline">
  <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m12 24c6.629 0 12-5.371 12-12s-5.371-12-12-12-12 5.371-12 12 5.371 12 12 12zm-6.509-12.26 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z"/></svg>
</div>

А можно вставить через тег img:

<div class="svg-inline">
  <img src="img/icon.svg" alt="Svg" width="24">
</div>

Если заглянуть «под капот» и изучить код, который отвечает за отрисовку SVG, то можно выделить два свойства, которые отвечают за цвет — fill (заливка) и stroke (обводка). Их можно редактировать и тем самым менять цвет иконки.

Давайте выделим несколько методов, которые позволяют менять цвет SVG.

1. Меняем цвет с помощью свойства fill

Смотрите, у нас два квадрата — они идентичны, за исключением свойства fill. В одном случае мы залили квадрат красным цветом, в другом вообще не прописали это свойство.

Свойство fill можно применять к отдельному вектору в вашем изображении.

2. Меняем цвет в файле style.css

Или в любом другом файле css, который подключен к html.

Все легко и понятно. Мы обращаемся к тегу svg и с помощью свойства fill меняем цвет на тот, который нам нужен.

svg {
  fill: #5046e5;
}

Можете задать svg нужный класс и затем в css обратиться к элементу по этому классу:

<svg class="arrow-svg" width="24" height="24" viewBox="0 0 24 24">...

.arrow-svg {
  fill: #5046e5;
}

Это тоже будет работать.

ВАЖНО!

Такой метод будет работать, если вы вставите код svg прямо в файл html.

Если вставить svg, как картинку в тег img, то изменить цвет не получится. В таком случае подойдет вариант №1, который был описан выше.

3. Изменяем цвет с помощью инлайновых стилей

Мы можем прямо в файле svg прописать стили — с помощью <style></style>:

<svg 
  width="120" 
  height="120"
  viewBox="0 0 120 120" 
  xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: red;
    }
  </style>
  <rect x="10" y="10" width="100" height="100"/>
</svg>

Внутри тега svg мы вставили обычные инлайновые стили. Обратите внимание, здесь мы обращаемся к тегу rect, но мы легко можем добавить класс нашему квадрату и обращаться к нему через класс:

<rect x="10" y="10" width="100" height="100" class="someclass" />

Так же, с помощью инлайновых стилей можем менять цвет svg при наведении. Это должно быть вам знакомо.

<style>
  rect:hover {
    fill: red;
  }
</style>

Это же актуально и для метода №2.

Краткий вывод

Если вы используете инлайновый вариант вставки SVG в ваш код, то вы сможете с помощью CSS редактировать цвет изображения. Но если вы вставляете svg, как файл через img или как background-url, то добраться до свойств SVG с помощью CSS у вас не выйдет.

На этом все, если остались вопросы, то задавайте в комментариях. Мы отвечаем на все ваши вопросы.

CSS Головоломки в Telegram

Подписывайся и не пропускай:

Актуальные новости

Интересные задачки

Полезные подборки

Перейти в Telegram