Практика: Как правильно изменить цвет элемента 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-фильтров, зависит исключительно от ваших потребностей и подхода к реализации проектов.