Mudar a cor do svg

Para mudar a cor de qualquer SVG, poderá alterar directamente o código svg por abrir o ficheiro svg em qualquer editor de texto . O código pode parecer com o código abaixo

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Pode observar que existem algumas marcas XML como path,circle, polygon etc . Aí poderá adicionar a sua própria cor com a ajuda do atributo style . Veja o exemplo abaixo

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Adicione o atributo style a todas as marcas para que possa obter o seu SVG da cor necessária

Adicionou uma página de ensaio à SVG de cores através da configuração do filtro:

E. G. filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Enviar A & cor do seu SVG-Jsfiddle

Tirei a ideia de: https://blog.union.io/code/2017/08/10/img-svg-fill/

A maneira mais fácil seria criar um tipo de letra do SVG usando um serviço como https://icomoon.io/app/#/select ou assim. faça upload do seu SVG, carregue em "gerar o tipo de letra", inclua ficheiros de tipos de letra e css para o seu lado e use-o e classifique-o como qualquer outro texto. Eu sempre usá-lo assim porque torna o estilo muito mais fácil.

Editar: tal como mencionado no artigo , comentado por @CodeMouse92 tipos de letra dos ícones confundem os leitores do ecrã (e são possivelmente maus para o SEO). Entao prefiro ficar-me pelos SVGs.

Pode mudar a coloração SVG com css se usar alguns truques. Escrevi um pequeno guião para isso.

• passa por uma lista de elementos que têm uma imagem svg
• carregue o ficheiro svg como xml
• obter apenas a parte svg
• mudar a cor da localização
• substituir o src com o svg modificado como imagem incorporada

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

O código acima pode não estar a funcionar correctamente, implementei isto para elementos com uma imagem de fundo svg que funciona quase semelhante a isto. Mas de qualquer forma você tem que modificar este script para se encaixar no seu caso. espero que tenha ajudado.

Apenas SVG com informação do canal horário. não podes fazer isso à imagem.. como o caminho você pode mudar strock e preencher informações e você está feito. Como ilustrador

Assim: através do CSS, poderá sobrepor o valor do local fill

path { fill: orange; }

Mas se quiser uma forma mais flexível, como deseja alterá-la com um texto quando está a ter algum efeito de pairar.. utilizar

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

Para simplesmente mudar a cor do svg:

Vá para o ficheiro svg e por baixo dos estilos, mencione a cor no preenchimento.

<style>.cls-1{fill:#FFFFFF;}</style>

Se quiser fazer isto a um svg incorporado que seja, por exemplo, uma imagem de fundo no seu css:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

Claro, substitui o ... com o seu código de imagem incorporado