Как темизировать иконки разноцветные svg?
Пожалуйста, подскажите:
Есть иконки svg. Иконка может состоять из 3-4 цветов. Без градиентов.
И нужно, чтобы при смене темы цвета иконки менялись. Например, была иконка светофора "красный-желтый-зеленый", а стала "белый-синий-красный".
В принципе, решение у меня есть. Присвоить разным кускам svg свои css классы, и менять при смене темы описание стиля класса.
<polygon points="28,20 10,20 10,4 28,4 20,12 class="polygon-1" /> |
<polygon points="28,20 10,20 10,4 28,4 20,12 class="polygon-1" />
Просто хотелось бы узнать, не велосипед ли я придумываю, может есть примеры, как это уже реализовано, например, в каких-нибудь ui фреймворках.
Дополнительно:
Не встречал инструментов для такого. Да в принципе инструменты и не нужны. имхо проще прописать руками все в соответствии со своими запросами. Так именно нужная часть свг будет меняться. Откуда посторонний человек может знать, хотите вы правый или левый глаз аватарки окрасить в черный? чтобы было проще цвета можно сохранить в переменные css и подставлять нужные при смене темы.
Пишете что-то типа fill="var(accent-color-1)"
Тема браузера (тёмная, светлая, системная) или тема оформления шаблона.
В фреймворках под тему браузера сделано так:
<!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> |
<!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 и им подобных) с светлого на тёмный и обратно.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для темизации иконок SVG разными цветами, вы можете использовать CSS фильтры. Вот пример того, как это можно сделать:
1. Добавьте иконку SVG в ваш HTML-код:
2. Создайте класс CSS для темизации иконки:
.icon-red { filter: invert(58%) sepia(100%) saturate(749%) hue-rotate(350deg) brightness(99%) contrast(92%); }
3. Примените класс к вашей иконке:
Этот пример CSS фильтра изменит цвет иконки на красный. Вы можете настроить параметры фильтра, чтобы получить другие цвета. Кроме того, вы можете создать дополнительные классы для разных цветов и применять их к иконкам по вашему усмотрению.
Надеюсь, это поможет вам темизировать иконки SVG разноцветными. Если у вас есть дополнительные вопросы, не стесняйтесь задавать.