Mudar as cores de um SVG

Sobre mudar as cores de um SVG

Um SVG é texto. Em algum lugar lá dentro, uma forma diz fill="#1f2937", e esse é o único motivo de o ícone ser cinza-escuro. Mude esses sete caracteres e o ícone vira o que você quiser.

O problema é encontrá-los. Uma exportação de verdade do Illustrator ou do Figma não coloca as cores num lugar óbvio — ela espalha tudo por atributos fill, atributos style, um bloco <style> cheio de regras de classe e as paradas de um degradê. Abra o arquivo num editor de texto e você fica procurando, entre mil linhas, as onze que importam.

Esta ferramenta lê o arquivo inteiro, junta todas as cores que ele usa e coloca tudo numa tabela. Mude a cor à direita de uma linha e todas as formas que usavam essa cor mudam junto, na prévia editada, enquanto você escolhe. O que volta é o seu arquivo com os novos valores de cor — nada mais foi tocado.

Duas formas de mudar uma cor

• Por cor — a tabela abaixo das imagens lista cada cor diferente do arquivo: à esquerda o que ela é, à direita no que vai se transformar. Cada linha começa com a própria cor original, então nada muda até você mandar. Mude uma e todos os usos dela mudam juntos. É o que você quer para "deixar as partes azuis verdes" e para adaptar um ícone à paleta de uma marca.
• Por forma — clique em qualquer forma da imagem e pinte só ela, mesmo que ela compartilhe a cor com outras vinte. O preenchimento e o contorno dela ganham valores próprios, e nada mais se mexe.

As duas funcionam juntas: primeiro você acerta a paleta, depois corrige aquela única forma que precisava ser diferente.

Tudo de uma cor só

De longe a tarefa mais comum. Um ícone chega em cinco tons de cinza e você precisa dele em branco chapado para um cabeçalho escuro, em preto chapado para impressão, ou na cor da marca para uma fileira de botões.

Escolha uma cor, clique em Aplicar, e todas as cores do arquivo viram essa. As formas sem preenchimento continuam sem preenchimento, então os contornos continuam contornos e os vazados continuam vazados.

Onde ela procura as cores

• fill e stroke escritos como atributos
• As mesmas propriedades dentro de um atributo style
• blocos <style> — regras de classe como .cls-1 { fill: #231f20; }, que é como o Illustrator escreve praticamente todas as exportações
• stop-color dentro de degradês, para recolorir um degradê parada por parada
• flood-color e lighting-color nos filtros

Cores escritas de qualquer forma que o CSS aceite são entendidas — #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) e nomes como red ou darkslategray. A transparência é mantida: uma forma meio transparente continua meio transparente na cor nova.

O que ela não toca

• Os degradês e padrões em si. As paradas de um degradê podem ser recoloridas; o degradê em si não é transformado numa cor chapada, e uma forma preenchida com url(#pattern) fica como está.
• Imagens bitmap embutidas. Um PNG colado dentro de um SVG é uma foto, não uma forma, e não tem preenchimento para mudar. Para essas, use o Seletor de cor de imagem ou um editor de imagens.
• Tudo o que não for cor. Opacidade, espessura do traço, transformações e texto saem do jeito que entraram.

Nada é enviado

O arquivo é lido, recolorido e reescrito dentro do seu navegador. Ele nunca chega a um servidor, o que importa quando o arquivo é um logotipo ainda não lançado, a marca de um cliente ou um trabalho sob acordo de confidencialidade.

Isso também significa que não há espera de upload nem limite de tamanho, e que a ferramenta continua funcionando offline depois que a página carrega.

Existe uma exceção proposital ao "nada é alterado": se o arquivo tiver um bloco <script>, ele é removido e a página avisa você. Uma imagem não tem motivo para carregar código executável, e esta ferramenta precisa desenhar o arquivo para mostrá-lo a você.

Para que serve

• Recolorir um conjunto de ícones para a paleta de uma marca sem abrir um programa de desenho
• Deixar um logotipo em branco chapado para um cabeçalho escuro, ou em preto chapado para impressão
• Corrigir aquela única forma que saiu com a cor errada
• Fazer versões clara e escura da mesma arte
• Mudar as paradas de um degradê sem refazê-lo
• Testar cores rápido, já que a imagem se atualiza enquanto você escolhe

Bom saber

• As duas prévias são o arquivo antes e depois, desenhadas na mesma escala — e a editada é o documento de verdade, então o que você vê é exatamente o que é baixado
• Uma alteração forma por forma é gravada como um simples atributo fill ou stroke quando isso basta, e como style inline só quando uma regra <style> do arquivo passaria por cima — a ferramenta confere o que de fato aconteceu em vez de adivinhar
• As cores são agrupadas pelo valor, então #FFF, #ffffff e white são uma linha só
• Cada linha tem o próprio desfazer, e Restaurar todas as cores devolve o arquivo inteiro ao estado em que chegou
• Um arquivo com centenas de cores quase sempre é uma foto vetorizada; só as mais usadas aparecem na lista
• Para cortar o espaço vazio em volta do resultado, use Recortar SVG
• Para transformar o resultado num PNG, use SVG para PNG

Como usar

• Clique em Clique para enviar, ou arraste o seu SVG para a caixa
• Cada cor do arquivo aparece como uma linha da tabela, com a original à esquerda
• Defina a cor da direita — com o seletor ou digitando um hexadecimal — para mudá-la em todos os lugares onde é usada
• Ou clique numa forma da imagem editada para pintar só ela
• Use Tudo de uma cor só para uma versão chapada de uma cor
• Clique em Baixar SVG, ou em Copiar o código SVG para colar direto numa página

Ferramentas relacionadas

• Recortar SVG — cortar o espaço vazio em volta do resultado
• SVG para PNG — transformar o SVG recolorido num bitmap
• SVG para JPG — um SVG como imagem comum
• Imagem para SVG — vetorizar um logotipo antes
• Paleta de cores a partir de imagem — tirar uma paleta de uma foto
• Verificador de contraste de cores — conferir se as cores escolhidas ficam legíveis