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

#html #css #css3 #svg

Подскажите как изменить цвет svg иконки? Код получен из photoshop c помощью плагина.
Добавление атрибута style="fill: #000;" тегу image не помогает. 







    

Ответы

Ответ 1

Иконка сделана в растровом редакторе, скорее всего в плагине Фотошопа, а затем сохранена
в формате data:image/png;base64. Иконка на самом деле осталась растровой, обернутой
в SVG оболочку, поэтому через CSS ей невозможно поменять стили привычными методами. 

Вот так иконка выглядит при десятикратном увеличении. На мой взгляд совсем не отличается
 от растра.   Такие простые изображения лучше делать в векторных редакторах, в Inkscape
например. Он бесплатен, но достаточно богат по реализованным функциям и одновременно
прост, и интуитивно понятен в изучении.      

       

Но, что есть, то есть. И в случае формата изображения base64 есть способы стилизации:

Применяя фильтры 

Используя 
 

И даже изменять цвет при наведении курсора: