Изменение цвета эл-тов SVG, заданных как фон в CSS

Быстрый ответ

Чтобы изменить цвет заливки SVG, который вы используете в качестве фонового изображения, вам необходимо добавить код SVG непосредственно в функцию url в CSS:

<div style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot;><rect fill=&quot;#HEX_COLOR&quot; width=&quot;100%&quot; height=&quot;100%&quot;/></svg>');"></div>

Замените место #HEX_COLOR на желаемый цвет. Такой подход не требует применения JavaScript и позволит вам стилизовать SVG через CSS. Не забывайте корректно кодировать URL для SVG-данных.

Усиление контроля над цветом SVG через CSS

Применение масок и фильтров CSS

Вы можете использвать маски CSS для изменения цвета элементов в SVG, как бы вы наводили на изображение цветной свет. Отрегулируйте оттенок источника света по желанию!

Также вы можете улучшить трансформацию цвета, применив фильтры CSS такие как sepia, hue-rotate, brightness и saturation:

.element-with-svg-background {
  -webkit-mask-image: url('path/to/your.svg'); /* Наконец-то маска и фоновое SVG-изображение сошлись */
  mask-image: url('path/to/your.svg');
  background-color: red; /* Устанавливаем фон */
  filter: hue-rotate(90deg); /* Поворачиваем цветовое колесо */
}

Подробнее об этом расскажет наш спикер на видео

Интеграция SVG с использованием Data URI

Для более глубокого контроля над изображением, вы можете встроить код SVG прямо в CSS с использованием Data URI. Это уже более продвинутое решение:

@mixin svg-background($color) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#{$color}" width="100%" height="100%"/></svg>'); /* Устанавливаем цвет внутри SVG */
}

.element {
  @include svg-background(#ff0000); /* Делаем фон красным */
}

Динамическое изменение SVG с сервера

Для более обширных проектов можно использовать серверную генерацию SVG с динамическим изменением цвета с помощью GET-параметров. Этот подход позволяет легко менять цветовую палитру:

https://example.com/icon.svg?color=ff0000 /* Пример: красные SVG-иконки */

Управление слоями с помощью z-index

Абсолютное позиционирование SVG и настройка z-index предоставят вам абсолютный контроль над слоями SVG:

.svg-background {
  position: absolute;
  z-index: 1; /* "Я на нижнем уровне" */
}
.another-element {
  z-index: 2; /* "Я забираю верх" */
}

Визуализация

Допустим, мы перекрываем SVG новым цветным слоем, подобно применению цветного фильтра:

Первоначальный вариант 🧴: Прозрачный и безцветный
Настройка SVG 🏷️: Исходное SVG изображение в своей цветовой гамме

При добавлении цветного слоя 🏷️:

🧴 + 🔵🏷️ = 🧴 со синим SVG

Это аналогично применению псевдо-элемента ::before и изменению цвета заливки перед SVG.

Обратите внимание на совместимость с браузерами

Стоит отметить, что совместимость с различными браузерами может вызвать некоторые проблемы. Не все методы будут работать одинаково хорошо в разных браузерах, проверьте информацию на CanIuse.

Работа с уникальными URL

Для каждого URL вы можете создать уникальный цвет SVG, используя GET-параметры.

Анимация SVG

Оживите ваши SVG, применив CSS-анимацию. Ваши изображения могут стать динамичными, благодаря стилям CSS!

Обучение с помощью учебных материалов

Не останавливайте обучение: знание о том, как изменить цвета SVG, может открыть новые возможности и улучшить ваши навыки работы с SVG!

Полезные материалы

1. Использование SVG | CSS-Tricks — руководство по применению SVG в веб-дизайне.
2. background-image – CSS | MDN — официальная документация MDN о свойстве background-image в CSS.
3. css – Как поменять цвет элемента SVG? | Stack Overflow — обсуждение на сообществе о изменении цветов SVG с использованием CSS.
4. Уроки по SVG | W3Schools — вступительные уроки по использованию SVG от компании W3Schools.
5. SVGOMG | SVGO's Missing GUI — Онлайн утилита SVGO от Jake Archibald, предназначенная для оптимизации SVG.
6. Стилизация и анимация SVG с помощью CSS | Smashing Magazine — Обширный обзор по стилизации и анимации SVG с использованием CSS.
7. Полное руководство по SVG | Web Designer Depot — Углублённое изучение SVG в этом иcчерпывающем руководстве.