recolorir SVG

Alterador de cor de 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.

recolorir SVG

☞ roda inteiramente no seu navegador — nada é enviado

Solte seu SVG aqui

ou clique para procurar — somente SVG

uma paleta, todas as cores

Onde as cores se escondem em um SVG

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

Como mudar as cores de um SVG

01

Solte o SVG

Escolha um arquivo .svg — ele fica no seu dispositivo.

02

Edite uma amostra

Cada cor do arquivo ganha uma, com quantas vezes é usada.

03

Baixe

Só as cores mudam; as formas ficam intactas.

respostas rápidas

Perguntas frequentes sobre o alterador de cor de SVG

O que o currentColor faz de verdade?

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.

Por que não consigo editar o gradiente?

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.

A paleta está vazia

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.

Dois tons idênticos dividem a mesma amostra

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.

Meu arquivo é enviado para algum servidor?

Não. O arquivo é interpretado e reescrito no seu navegador.