**html***
<img src="logo.svg" alt="Logo" class="logo-img">
**css***
.logo-img path {
fill: #000;
}
O svg acima carrega e é nativamente fill: #fff
mas quando eu uso o css
acima para tentar mudá-lo para preto ele não't muda, esta é minha primeira vez jogando com SVG e eu não tenho certeza porque ele's não está funcionando.
Se o seu objetivo é apenas mudar a cor do logotipo, e você não'não necessariamente precisa usar CSS, então don'não use javascript ou jquery como foi sugerido por algumas respostas anteriores.
Para responder precisamente à pergunta original, apenas:
Abra seu logo.svg
em um editor de texto.
Procure por fill: #fff' e substitua-o por
fill': #000`
Por exemplo, seu logo.svg
pode ficar assim quando aberto em um editor de texto:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
... basta mudar o enchimento e salvar.
A resposta de @Praveen é sólida.
Eu não consegui'não consegui responder no meu trabalho, por isso fiz uma função jquery hover para ele.
**CSS***
.svg path {
transition:0.3s all !important;
}
**JS / JQuery***
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});