Изменить цвет SVG с помощью CSS

Поделиться: 

Сегодня, в мае 2022 года я для себя открыл супер инструмент. Ранее которого мне не хватало. А именно как изменить цвет SVG иконке не вставляя её как код? А вот как.

Вставляем картинку СВГ (чёрно-белую иконку) как обычную картинку через тег IMG SRC

И присваиваем ей стиль через CSS:

Получится из черного цвета, зеленый цвет. Вот этот код

invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

генерируется в этом сервисе. Указываем там какой нам нужен цвет в формате #00bb12 и получаем код фильтра.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Рекомендуем еще эти статьи

08.03.2020

«Развернуть» дамп базы через SSH консоль

Восстановить базу данных из дампа можно несколькими способами, это и через панель хостинга, и через...

25.08.2021

Запуск сайта — как это делается

Что бы запустить сайт и начать с ним работать. Я делаю следующие шаги. У каждого...

22.06.2022

Открытие вкладок по якорным ссылкам в Oxygen

Чтобы разрешить хеш-ссылки (hash links) для открытия вкладок (tabs) в Oxygen нужно проделать следующее. Так как по умолчанию это не работает.

25.03.2022

Плагин дополнений к пиццам и товарам

Нашел плагин Advanced Product Fields (Product Addons) for WooCommerce но еще не пробовал. Думаю, это...

08.09.2023

Полоса загрузки для всплывающего окна

На одном из сайтов был установлен плагин CookieYes | GDPR Cookie Consent. Нужно было сделать...

22.09.2020

Woocommerce: цена по запросу

Для товаров без указанной цены выводим сообщение «Цена по запросу»

Для товаров с нулевой...

MENEX.RU
сборник опыта и интересов мужика
Copyright © 2014 - 2026 menex.ru
tagcalendar-fullcross-circle