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

158

25 июля 2019, 07:10

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

<img src='home.svg'>

Answer 1

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

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

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

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

<img src="https://twemoji.maxcdn.com/svg/1f511.svg">

С помощью различных 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%); 
}

<div class="container"> 
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg">  
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg">  
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg">  
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
</div>

Пример, если 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%); 
}

<div> 
  <span class="key"></span> 
  <span class="key grey-out"></span> 
  <span class="key hue-rotate"></span> 
  <span class="key invert"></span> 
</div>

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

.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%); 
}

<div class="container"> 
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg">  
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg">  
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg">  
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
</div>

Answer 2

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

Answer 3

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

#star { 
  fill: red; 
}

<h3>С заливкой</h3> 
<svg aria-hidden="true" width="40" height="40" viewBox="0 0 18 18" id = "star"> 
		<path d="M9 12.65l-5.29 3.63 1.82-6.15L.44 6.22l6.42-.17L9 0l2.14 6.05 6.42.17-5.1 3.9 1.83 6.16z">    
    </path> 
</svg> 
<h3>Без заливки</h3> 
<svg aria-hidden="true" width="40" height="40" viewBox="0 0 18 18"> 
    <path d="M9 12.65l-5.29 3.63 1.82-6.15L.44 6.22l6.42-.17L9 0l2.14 6.05 6.42.17-5.1 3.9 1.83 6.16z"> 
    </path> 
</svg>

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