Melhor resposta
Existem várias maneiras diferentes de usar / incluir SVG em seu projeto. Dependendo de qual forma, a tática para recolorir esse SVG em diferentes estados ou condições
- SVG embutido – Incorporar código SVG diretamente.
HTML: Isso é o que você obteve como uma imagem SVG devido a este código XML
CSS: a propriedade Fill pode ser usada para alterar a cor do SVG, porque ela é criada usando o código HTML, então você precisa alterar a cor do caminho que o SVG criou.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Símbolo SVG / Uso – Embutir arquivo de código SVG e buscá-lo usando a tag USE HTML
HTML: Esta é a maneira como você pode exportar sua imagem SVG de outro arquivo usando o USE a tag HTML.
CSS: Da mesma forma que o primeiro, mudou a técnica de exportação deste é usada quando você tem dezenas de imagens SVG e não quer sobrecarregar sua página HTML, portanto, ela precisa ser exportada em um arquivo e você pode buscá-la de lá.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Imagens de fundo SVG – defina a imagem como outros formatos gráficos.
Isso é tão simples quanto você precisa chamar duas imagens ou a condição desejada de acordo com o estado selecionado.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Usando a propriedade de filtro CSS – mas não muito recomendado
Não recomendado porque não é compatível com um comportamento em um navegador diferente .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Obrigado, vote positivamente se funcionar para você.
Aproveite a aprendizagem !!