Как изменить цвет иконки SVG с помощью CSS?

#html #css #вёрстка #svg

На странице есть иконки в формате SVG. Сами иконки нарисованы в черном цвете.
Как с помощью CSS покрасить их их в красный цвет?





    

Ответы

Ответ 1

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

Но есть способ сделать изменение цвета иконки с помощью фильтров CSS или SVG  

Допустим добавлена иконка ключа с помощью : 



img 
{
width:100px;
height:100px;
}





С помощью различных css фильтров меняем цвет иконок:



.container {
display:inline-block;
width:25%;
height:25%;
padding:1.5em;
background: rgb(123,215,193);
background: linear-gradient(90deg, rgba(123,215,193,1) 4%, rgba(225,233,148,1) 97%);
}
.key {
  height: 3em;
  width: 3em;
 
   }
.grey-out {
  opacity: 0.4;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
  
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

 
   
    
    





Пример, если svg файл добавлен с помощью background-image:   



.key {
  background-image: url("https://twemoji.maxcdn.com/svg/1f506.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em; 
 }
.grey-out {
  opacity: 0.4;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
   -webkit-filter: invert(100%);
    filter: invert(100%);
}

  
  
  
  





Вариант с изменением цвета при наведении   



.container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
   transition:  0.8s;
   }
:hover.key{
  height: 4em;
  width: 4em;
    -webkit-filter: hue-rotate(320deg);
     filter: hue-rotate(320deg);
   }
.grey-out {
  opacity: 0.4;
   -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);

  
}
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

 
   
    
    



Ответ 2

В данном контексте, когда svg у вас лежит отдельно в виде файла, через CSS ничего
сделать нельзя. Нужно вставить svg в html текстом, тогда появится возможность использовать
в css свойство fill к тегу svg и его вложенным тегам.


Ответ 3

Используйте свойство fill:



#star {
  fill: red;
}
С заливкой

Без заливки




Но загружать не через img, а через тег svg.