recolorir SVG
☞ roda inteiramente no seu navegador — nada é enviadoSolte seu SVG aqui
ou clique para procurar — somente SVG
Prévia
recolorir SVG
Todas as cores do arquivo reunidas em uma paleta — edite qualquer uma e veja o resultado na hora, ou entregue tudo ao CSS com currentColor.
ou clique para procurar — somente SVG
Prévia
uma paleta, todas as cores
Uma cor pode estar num atributo fill ou stroke, dentro de um style inline, ou numa folha de estilos embutida no arquivo — e uma exportação do Illustrator ou do Figma quase sempre escolhe a última. É por isso que editar um SVG à mão no editor de texto deixa tantas formas para trás.
Esta ferramenta lê os três lugares, mais as paradas de gradiente e as cores de filtro, e junta tudo numa paleta só. Altere uma amostra e cada ocorrência daquela cor muda junto, onde quer que estivesse escrita.
três passos
Escolha um arquivo .svg — ele fica no seu dispositivo.
Cada cor do arquivo ganha uma, com quantas vezes é usada.
Só as cores mudam; as formas ficam intactas.
respostas rápidas
Ele manda a forma usar a cor de texto do elemento em que está. Um ícone em currentColor fica branco dentro de um botão escuro e cinza dentro de um texto discreto, sem um segundo arquivo nem uma linha extra de CSS. É assim que as bibliotecas de ícones distribuem SVG.
Um gradiente é uma referência a uma definição em outro ponto do arquivo, não uma cor, então substituí-lo apagaria o gradiente em vez de recolori-lo. As cores de cada parada dentro do gradiente aparecem sim na paleta — edite essas.
Então o arquivo não tem cor própria. Normalmente isso significa que a arte já está em currentColor ou herda a cor de uma folha de estilos fora do arquivo. Abra no visualizador de SVG para ver o código.
As cores são agrupadas pelo valor em que realmente resultam, então #FFF, #ffffff e white são uma entrada só. Ao editá-la, todas são atualizadas, cada uma na forma em que estava escrita.
Não. O arquivo é interpretado e reescrito no seu navegador.