Mudar as cores de um SVG

Sobre mudar as cores de um SVG

Um SVG é texto. Algures lá dentro, uma forma diz fill="#1f2937", e é essa a única razão de o ícone ser cinzento-escuro. Mude esses sete caracteres e o ícone passa a ser o que quiser.

O problema é encontrá-los. Uma exportação a sério do Illustrator ou do Figma não põe as cores num sítio óbvio — espalha-as por atributos fill, atributos style, um bloco <style> cheio de regras de classe e as paragens de um gradiente. Abra o ficheiro num editor de texto e fica à procura, entre mil linhas, das onze que interessam.

Esta ferramenta lê o ficheiro todo, junta todas as cores que ele usa e põe-nas numa tabela. Mude a cor à direita de uma linha e mudam com ela todas as formas que a usavam, na pré-visualização editada, à medida que escolhe. O que volta é o seu ficheiro com novos valores de cor — mais nada foi tocado.

Duas maneiras de mudar uma cor

• Por cor — a tabela por baixo das imagens lista cada cor distinta do ficheiro: à esquerda o que é, à direita em que se torna. Cada linha começa na sua própria original, por isso nada muda até você mandar. Mude uma e todas as suas utilizações mudam juntas. É o que quer para «pôr as partes azuis a verde» e para recolorir um ícone para uma paleta de marca.
• Por forma — clique em qualquer forma da imagem e pinte só essa, mesmo que partilhe a cor com outras vinte. O seu preenchimento e o seu contorno ganham valores próprios, e mais nada se mexe.

As duas trabalham juntas: primeiro acerta a paleta, depois corrige a única forma que tinha de ser diferente.

Tudo de uma só cor

De longe o trabalho mais frequente. Um ícone chega em cinco cinzentos e precisa dele em branco liso para um cabeçalho escuro, em preto liso para impressão, ou numa cor de marca para uma fila de botões.

Escolha uma cor, carregue em Aplicar, e todas as cores do ficheiro passam a ser essa. As formas sem preenchimento ficam sem preenchimento, por isso os contornos continuam contornos e os vazados continuam vazados.

Onde 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 gradientes, para recolorir um gradiente paragem a paragem
• flood-color e lighting-color nos filtros

As cores escritas de qualquer maneira que o CSS permita 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 nova cor.

Aquilo em que não toca

• Os gradientes e padrões enquanto tal. As paragens de um gradiente podem ser recoloridas; o gradiente em si não é transformado numa cor lisa, e uma forma preenchida com url(#pattern) fica como está.
• Os bitmaps embutidos. Um PNG colado dentro de um SVG é uma fotografia, não uma forma, e não tem preenchimento para mudar. Para esses, use o Conta-gotas de imagem ou um editor de imagem.
• Tudo o que não for uma cor. Opacidade, espessura de traço, transformações e texto saem tal como entraram.

Nada é enviado

O ficheiro é lido, recolorido e reescrito dentro do seu navegador. Nunca chega a um servidor, o que interessa quando o ficheiro é um logótipo por lançar, a marca de um cliente ou trabalho sob acordo de confidencialidade.

Também quer dizer que não há espera de envio nem limite de tamanho, e que a ferramenta continua a funcionar offline assim que a página estiver carregada.

Há uma exceção de propósito ao «nada é alterado»: se o ficheiro tiver um bloco <script>, ele é removido e a página avisa-o. Uma imagem não tem razão para transportar código executável, e esta ferramenta tem de desenhar o ficheiro para lho mostrar.

Para que serve

• Recolorir um conjunto de ícones para uma paleta de marca sem abrir um programa de desenho
• Pôr um logótipo em branco liso para um cabeçalho escuro, ou em preto liso para impressão
• Corrigir a única forma que saiu da cor errada
• Fazer versões clara e escura do mesmo grafismo
• Mudar as paragens de um gradiente sem o reconstruir
• Experimentar cores depressa, já que a imagem se atualiza enquanto escolhe

Bom saber

• As duas pré-visualizações são o ficheiro antes e depois, desenhadas à mesma escala — e a editada é o documento a sério, por isso o que vê é exatamente o que é descarregado
• Uma alteração forma a forma é escrita como um simples atributo fill ou stroke quando isso chega, e como style em linha apenas quando uma regra <style> do ficheiro se sobreporia — a ferramenta verifica o que aconteceu de facto em vez de adivinhar
• As cores são agrupadas pelo valor, por isso #FFF, #ffffff e white são uma só linha
• Cada linha tem o seu próprio desfazer, e Repor todas as cores devolve o ficheiro inteiro ao estado em que chegou
• Um ficheiro com centenas de cores é quase sempre uma fotografia vetorizada; só as mais usadas são listadas
• Para cortar o espaço vazio à volta do resultado, use Recortar SVG
• Para transformar o resultado num PNG, use SVG para PNG

Como usar

• Clique em Clique para carregar, ou arraste o seu SVG para a caixa
• Cada cor do ficheiro aparece como uma linha da tabela, a original à esquerda
• Defina a cor à direita — com o seletor ou escrevendo um hexadecimal — para a mudar em todo o lado onde é usada
• Ou clique numa forma da imagem editada para pintar só essa
• Use Tudo de uma só cor para uma versão lisa de uma cor
• Carregue em Descarregar SVG, ou em Copiar o código SVG para o colar diretamente numa página

Ferramentas relacionadas

• Recortar SVG — cortar o espaço vazio à volta do resultado
• SVG para PNG — transformar o SVG recolorido num bitmap
• SVG para JPG — um SVG como imagem lisa
• Imagem para SVG — vetorizar primeiro um logótipo
• Paleta de cores de uma imagem — tirar uma paleta de uma foto
• Contraste de cores — confirmar que as cores escolhidas se leem bem