Как темизировать иконки разноцветные svg?

Question

mletov @mletov

CSS
SVG

Как темизировать иконки разноцветные svg?

Пожалуйста, подскажите:
Есть иконки svg. Иконка может состоять из 3-4 цветов. Без градиентов.
И нужно, чтобы при смене темы цвета иконки менялись. Например, была иконка светофора "красный-желтый-зеленый", а стала "белый-синий-красный".

В принципе, решение у меня есть. Присвоить разным кускам svg свои css классы, и менять при смене темы описание стиля класса.

<polygon points="28,20 10,20 10,4 28,4 20,12  class="polygon-1" />

Просто хотелось бы узнать, не велосипед ли я придумываю, может есть примеры, как это уже реализовано, например, в каких-нибудь ui фреймворках.

Вопрос задан более года назад
84 просмотра

3 комментария

Подписаться 2 Простой 3 комментария

Kentavr16 @Kentavr16

Не встречал инструментов для такого. Да в принципе инструменты и не нужны. имхо проще прописать руками все в соответствии со своими запросами. Так именно нужная часть свг будет меняться. Откуда посторонний человек может знать, хотите вы правый или левый глаз аватарки окрасить в черный? чтобы было проще цвета можно сохранить в переменные css и подставлять нужные при смене темы.

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

svg поддерживают кастомные свойства css внутри себя.
Пишете что-то типа fill="var(accent-color-1)"

Написано более года назад

ProjectSoft @ProjectSoft

mletov не известно, что понимается под "темой".
Тема браузера (тёмная, светлая, системная) или тема оформления шаблона.
В фреймворках под тему браузера сделано так:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>SVG ICON</title>
		<style type="text/css">
			:root {
				--body-bg: #FFFFFF;
				--traffic-black: #464F5D;
				--traffic-grey: #2F3744;
				--traffic-red: #FF0000;
				--traffic-yellow: #FFFF00;
				--traffic-green: #00FF00;
			}
			@media (prefers-color-scheme: dark) {
				:root {
					--body-bg: #000000;
					--traffic-black: #CCCCCC;
					--traffic-grey: #FFFFFF;
					--traffic-red: #FFFFFF;
					--traffic-yellow: #0000FF;
					--traffic-green: #FF0000;
				}
			}
			body {
				background-color: var(--body-bg);
			}
			.svg-black{
				fill: var(--traffic-black);
			}
			.svg-grey{
				fill: var(--traffic-grey);
			}
			.svg-red{
				fill: var(--traffic-red);
			}
			.svg-yellow{
				fill: var(--traffic-yellow);
			}
			.svg-green{
				fill: var(--traffic-green);
			}	
		</style>
	</head>
	<body>
		<div>
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
				<path class="svg-black" d="M342.1,512H169.9c-11,0-19.9-8.9-19.9-19.9V19.9c0-11,8.9-19.9,19.9-19.9h172.1c11,0,19.9,8.9,19.9,19.9v472.3
					C361.9,503.1,353,512,342.1,512"/>
				<path class="svg-grey" d="M44.1,53c0,29.3,23.7,53,53,53h8.8c24.4,0,44.1,19.7,44.1,44.1V53H44.1z M44.1,203c0,29.3,23.7,53,53,53h8.8
					c24.4,0,44.1,19.7,44.1,44.1V203L44.1,203L44.1,203z M44.1,353.1c0,29.3,23.7,53,53,53h8.8c24.4,0,44.1,19.7,44.1,44.1v-97.1
					L44.1,353.1L44.1,353.1z M467.9,53c0,29.3-23.7,53-53,53h-8.8c-24.4,0-44.1,19.7-44.1,44.1V53H467.9z M467.9,203
					c0,29.3-23.7,53-53,53h-8.8c-24.4,0-44.1,19.7-44.1,44.1V203L467.9,203L467.9,203z M467.9,353.1c0,29.3-23.7,53-53,53h-8.8
					c-24.4,0-44.1,19.7-44.1,44.1v-97.1L467.9,353.1L467.9,353.1z"/>
				<path class="svg-green" d="M309,406.1c0,29.3-23.7,53-53,53s-53-23.7-53-53s23.7-53,53-53S309,376.8,309,406.1"/>
				<path class="svg-yellow" d="M309,256c0,29.3-23.7,53-53,53s-53-23.7-53-53s23.7-53,53-53S309,226.7,309,256"/>
				<path class="svg-red" d="M309,105.9c0,29.3-23.7,53-53,53s-53-23.7-53-53s23.7-53,53-53S309,76.7,309,105.9"/>
			</svg>
		</div>
	</body>
</html>

Переключите тему браузера (Chrome, Yandex, Opera и им подобных) с светлого на тёмный и обратно.

Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как сделать так, чтобы при нажатии не исчезало?
- 1 подписчик
- вчера
- 103 просмотра
1

ответ
CSS

Простой
Не понимаю, почему блок уходит влево?
- 1 подписчик
- 14 нояб.
- 123 просмотра
1

ответ
HTML

+1 ещё

Простой
Как сделать задний фон картинки с фреймом чтоб не съезжало?
- 1 подписчик
- 14 нояб.
- 62 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сделать элементы в разных блоках одинаковыми по ширине?
- 1 подписчик
- 14 нояб.
- 86 просмотров
1

ответ
CSS

Средний
Как отключить блокировку текста?
- 1 подписчик
- 13 нояб.
- 97 просмотров
1

ответ
CSS

Простой
Как задать задний фон поверх фрейма на 5 сек?
- 1 подписчик
- 12 нояб.
- 71 просмотр
1

ответ
HTML

+1 ещё

Простой
Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?
- 1 подписчик
- 12 нояб.
- 134 просмотра
4

ответа
CSS

+2 ещё

Простой
Словил баг с реализацией гридов в Firefox [колонки через repeat(auto-fit) и position: absolute]?
- 1 подписчик
- 12 нояб.
- 83 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как реализовать перемещение между табами через стрелки?
- 2 подписчика
- 12 нояб.
- 113 просмотров
0

ответов
CSS

Простой
Какие минусы у данного решения?
- 1 подписчик
- 12 нояб.
- 130 просмотров
2

ответа
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Настроить переброс маршрутов на роутере

17 нояб. 2024, в 14:33

1500 руб./за проект

Доработать Telegram бота, разместить его на сервере

17 нояб. 2024, в 14:13

4000 руб./за проект

Выполнить работы по философии, ~12шт

17 нояб. 2024, в 13:44

300 руб./за проект

Не встречал инструментов для такого. Да в принципе инструменты и не нужны. имхо проще прописать руками все в соответствии со своими запросами. Так именно нужная часть свг будет меняться. Откуда посторонний человек может знать, хотите вы правый или левый глаз аватарки окрасить в черный? чтобы было проще цвета можно сохранить в переменные css и подставлять нужные при смене темы.
svg поддерживают кастомные свойства css внутри себя.
Пишете что-то типа fill="var(accent-color-1)"

Как темизировать иконки разноцветные svg?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт