Практика: Как правильно изменить цвет элемента SVG?

2 проверенных способа

SVG — это масштабируемая векторная графика (англ. Scalable Vector Graphics). Разработчики вебсайтов чаще всего используют этот формат для иконок и логотипов, а также для создания интерактивных и анимированных графических элементов сайта. Свою популярность он завоевал благодаря небольшому размеру файлов и возможности масштабировать изображение без потери качества. Кроме того, SVG — это текстовый формат, который индексируется поисковыми системами и может помочь с SEO-продвижением сайта.

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

Изменение цвета SVG-изображения на сайте может понадобиться по нескольким причинам:

1. Адаптация к дизайну сайта. Изменение цвета SVG-элементов позволяет подстроить их под цветовую палитру сайта.

2. Поддержка темной/светлой темы. Параметры SVG-элементов можно легко изменять в соответствии с выбранной темой на устройстве.

3. Улучшение пользовательского опыта (UX). SVG-изображение может менять цвет во время взаимодействия с пользователем. Например, при наведении курсора иконка изменяет оттенок. Или же цвет SVG-элемента сигнализирует об успехе (зеленый) выполненной операции или ошибке (красный).

4. Оптимизация кода и повышение производительности сайта. Можно динамически изменять свойства одного SVG-элемента вместо дублирования графики.

Как изменить цвет SVG-элемента

1. С помощью `fill` и `stroke`

Каждый SVG-элемент имеет атрибуты fill и stroke. Атрибут fill определяет цвет внутренней части элемента, а stroke — его контура. Изменить значение этих атрибутов можно двумя способами: статически в текстовом редакторе или динамически с помощью CSS.

Изменение в текстовом редактор

Так как SVG — это текстовый формат на основе XML, его параметры можно изменить в текстовом редакторе. Для этого:

1. Откройте SVG-файл в текстовом редакторе, например, Notepad или Visual Studio Code.

2. Найдите нужный код в файле.
Например, у нас есть красный круг с черным контуром:

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

3. Измените значения атрибутов fill и stroke. Например, сделайте круг зеленым, а цвет контура оставьте без изменений:

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />

4. Сохраните файл в том же формате .svg.

Задавать цвет можно как его названием (red, green, white), так и соответствующим шестнадцатеричным значением. Например, #FFFFFF для белого или #FF0000 для красного. В интернете вы найдете множество таблиц с оттенками цветов и их соответствующими HEX-кодами.

Этот способ изменения цвета довольно прост и не требует корректировки изображения в графическом редакторе. Однако таким образом вы не сможете динамически изменять свойства SVG-элемента. Поэтому предлагаем рассмотреть следующий метод.

Изменение с помощью CSS

Чтобы изменить цвет SVG-элемента с помощью CSS, изображение необходимо вставлять как встроенный (inline) элемент. То есть внести код SVG непосредственно в HTML-документ.

Чтобы получить код SVG-изображения, откройте его в текстовом редакторе. Также посмотреть код можно при сохранении SVG-файла, если вы работаете в Adobe Illustrator. Для этого нажмите SVG Code….

Например, у нас есть красный круг, код которого необходимо добавить в HTML-файл.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle  stroke="black" stroke-width="3" fill="red" />
</svg>

Для изменения цвета используйте те же атрибуты, что и в прошлом методе: fill или stroke.

circle {
  fill: green;
}

В этом примере цвет круга изменяется на зеленый.

<style>
 circle {
   fill: green;
 }
</style>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle  stroke="black" stroke-width="3" fill="red" />
</svg>

Также можно изменять цвет контура, его ширину и другие свойства SVG-элемента. Если хотите использовать внешние таблицы стилей, сохраняйте CSS-код в отдельном файле и подключайте его в HTML с помощью тега link.

/*сохранено как style.css*/

circle {
  fill: green;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle  stroke="black" stroke-width="3" fill="red" />
    </svg>
 </body>
</html>

2. С помощью `filter`

Иногда возникает необходимость вставить SVG0элемент как файл вместо встроенного кода. В таком случае fill или stroke не работают. На помощь придет CSS-свойство filter. Оно применяет к изображению такие графические эффекты:

blur() — размытие;
brightness() — изменение яркости;
contrast() — изменение контраста;
drop-shadow() — добавление тени;
grayscale() — изменение изображения в оттенки серого;
hue-rotate() — изменение общего оттенка;
invert() — инверсия цветов;
opacity() — изменение прозрачности;
saturate() — изменение насыщенности цветов;
sepia() — изменение цветов в тон сепии.

Чтобы изменить цвет изображения:

1. Вставьте SVG элемент через тег <img> и задайте ему класс.

<img src="circle.svg" class="circle"/>

2. Преобразуйте HEX-код желаемого цвета в CSS-фильтр. Сделать это можно здесь. Обратите внимание, что приведенный пример работает для изображений черного цвета с прозрачным фоном.

Пример фильтра для цвета #FF0000 (красный):

filter: invert(13%) sepia(100%) saturate(5260%) hue-rotate(1deg) brightness(97%) contrast(117%);

3. Добавьте CSS-фильтр в класс.

.circle {
  filter: invert(13%) sepia(100%) saturate(5260%) hue-rotate(1deg) brightness(97%) contrast(117%);
}

Порядок написания аргументов фильтра (invert, sepia, saturate и т. д.) имеет значение. Каждый из них последовательно применяется к изображению, изменяя его свойства. Поэкспериментируйте с ними, чтобы лучше понять принцип работы CSS-фильтра.

Таким образом, если вам нужно динамично изменять цвет SVG-изображений, добавлять интерактивные графические элементы и разрабатывать современные веб-страницы, без CSS не обойтись. А вот изменять параметры через атрибуты fill и stroke или с помощью CSS-фильтров, зависит исключительно от ваших потребностей и подхода к реализации проектов.

Автор: Анастасія Ластовець