Como mudar as cores de um SVG e resolver problemas comuns

Existem três maneiras reais de mudar a cor de um arquivo SVG, e todas são gratuitas. Envie-o para uma ferramenta online de alteração de cores de SVG e clique na amostra que quer substituir. Abra-o em um aplicativo vetorial como o Inkscape, selecione a forma e escolha outro preenchimento. Ou abra o arquivo em um editor de texto e troque o código hexadecimal, porque um SVG é apenas texto. Recolorir um vetor também não causa perda: você reescreve uma instrução, em vez de repintar pixels, então nada fica borrado nem perde qualidade.

O método depende do que há dentro do arquivo. E quando um SVG se recusa a mudar de cor, quase sempre o motivo está no arquivo, não na ferramenta usada. Este guia apresenta os três métodos primeiro e depois o diagnóstico: as seis razões comuns pelas quais a mudança não funciona, incluindo uma que nenhuma ferramenta de cor consegue resolver.

Onde um SVG guarda suas cores

Um arquivo SVG é uma lista de formas escrita como texto. Cada forma pode ter um fill para o interior e um stroke para o contorno, como descreve o guia de preenchimentos e contornos de SVG da MDN. Não existe uma única “cor da imagem” que você possa trocar em um lugar. Um desenho que parece ter uma cor na tela pode ser um único traçado organizado ou quarenta traçados separados que compartilham o mesmo preenchimento.

É basicamente isso. Cada método abaixo é apenas uma maneira diferente de encontrar formas e reescrever seu fill ou stroke. Também é por isso que os resultados variam tanto entre arquivos: quanto menos formas e mais limpas elas forem, mais fácil será recolorir.

Escolha seu método

Método 1: uma ferramenta online de cores de SVG

1. Abra uma ferramenta gratuita de cores de SVG no navegador e envie o arquivo (as boas também aceitam código SVG colado).
2. A ferramenta lista as cores encontradas. As mais úteis agrupam preenchimentos idênticos, então “o azul” aparece como uma amostra mesmo que cubra dezenas de formas.
3. Clique em uma amostra, escolha a substituta e observe a prévia.
4. Baixe o resultado e abra uma vez em uma aba do navegador para conferir.

Esse é o método certo para a maioria das pessoas na maior parte do tempo. Confira duas coisas antes de confiar um trabalho real à ferramenta: se ela também lista cores de contorno e como lida com gradientes. Se mostrar menos cores do que você vê na tela, parte do arquivo é um gradiente ou uma imagem incorporada, e uma simples troca de amostra não a alcançará.

Método 2: um aplicativo de design vetorial

O Inkscape é gratuito e faz tudo de que esta tarefa precisa; Illustrator e Figma funcionam de maneira semelhante.

1. Abra o SVG e clique na parte que quer mudar. Se o desenho inteiro for selecionado como um bloco, está agrupado: dê dois cliques para entrar no grupo ou desagrupe.
2. Altere o preenchimento no painel Fill & Stroke (Inkscape) ou na amostra de preenchimento (Illustrator, Figma).
3. Quando uma cor visual estiver dividida entre muitas formas, não clique uma por uma. Clique com o botão direito em uma forma e use Select Same → Fill Color no Inkscape, ou use o comando documentado do Illustrator Select → Same → Fill Color. Todas as formas com esse preenchimento ficam selecionadas, e uma alteração recolore todas.
4. Exporte ou salve como SVG simples.

Um aplicativo de design também permite ir além da cor, como mover formas ou refazer curvas. Para conhecer essas possibilidades, veja nosso guia de edição de SVG.

Método 3: um editor de texto

Como SVG é texto, qualquer editor serve: Bloco de Notas, TextEdit, VS Code.

1. Abra o arquivo .svg e procure fill=.
2. Altere o valor, por exemplo de fill="#1e3a5f" para fill="#c2410c", e salve.
3. Atualize o arquivo em uma aba do navegador para conferir o resultado.

Três ressalvas. Cores podem ser escritas como nomes (fill="black"), além de hexadecimal. Contornos ficam em stroke=, não em fill=. E muitos arquivos exportados não colocam a cor diretamente na forma: usam classes, com o hexadecimal em um bloco <style> perto do início (.st0{fill:#1e3a5f;}). Altere o hexadecimal no bloco de estilo e todas as formas dessa classe acompanharão a mudança.

Esse método funciona especialmente bem para ícones de uma cor, em que uma única busca e substituição resolve, e para trabalho em lote em uma pasta. Para uma ilustração com quarenta cores, é o caminho lento.

Se seu SVG estiver em um site

Você pode mudar a cor de um SVG com CSS? O caminho mais direto é inserir a marcação SVG diretamente no HTML. Assim, fill funciona como uma propriedade CSS, e definir os preenchimentos como currentColor permite que o ícone herde a cor do texto ao redor. Um SVG carregado como <img> externo é tratado como imagem; a MDN observa que JavaScript não pode manipular a estrutura SVG nessa configuração, e os estilos da página não selecionam diretamente seus traçados internos.

Se você não puder inserir o arquivo diretamente no HTML, volte aos métodos de edição acima: altere a cor dentro do próprio SVG e recarregue-o. Para escolher a forma de entrega, compare SVG inserido diretamente com imagem externa usando a mesma arte e um teste de CSS da página.

Para uma silhueta de interface de uma cor, máscaras SVG com CSS e formas transparentes de ícones oferecem outro caminho: pinte o elemento do ícone com CSS sem alterar as cores dos traçados da imagem original.

Para um efeito de cor reversível, compare feColorMatrix com edições diretas de preenchimento. Um filtro muda as cores renderizadas e mantém intactas as cores originais, o que importa ao entregar arte editável.

Por que seu SVG não muda de cor

Esta é a parte que os tutoriais pulam e onde a maioria das mudanças de cor falha. Siga a tabela de cima para baixo.

Duas dessas situações merecem uma análise mais próxima.

A surpresa da caixa de fundo

Alguns SVGs têm um retângulo de fundo do tamanho inteiro que você não vê sobre uma página branca. Recolora “tudo” e a caixa aparece como um bloco colorido atrás do desenho; alguns aplicativos também a selecionam quando você clica. É uma forma comum, então selecione e apague ou dê a ela a cor que realmente quer. Se a caixa aparecer branca em outro software, é um problema relacionado, mas diferente, tratado no guia de como manter um fundo transparente.

O SVG que não é vetor

O caso persistente é assim: nenhuma forma é selecionável, toda edição de preenchimento não faz nada e, ao ampliar, as bordas ficam pixeladas. Abra o arquivo em um editor de texto e, em vez de elementos <path>, encontrará uma tag <image> com um enorme bloco de texto base64. É uma imagem raster dentro de um arquivo .svg. Conversores que não vetorizam de verdade produzem esses arquivos, e nenhuma ferramenta de cor pode ajudar porque não há formas para pintar. Filtros que “colorizam” só tingem os pixels, geralmente com resultado ruim. Os dois arquivos parecem idênticos na tela, mas a diferença é óbvia no código:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

A solução é voltar à própria imagem, de preferência ao PNG ou JPG original, e convertê-la em um vetor real com traçados reais. Nosso guia de SVGs que ainda parecem pixelados explica como esses falsos vetores surgem e como identificá-los antes de depender deles. Quando houver formas reais, todos os métodos deste guia passam a funcionar.

Recolorir um arquivo de corte: cada cor é uma camada

Uma Cricut ou Silhouette trata cada cor do SVG como uma camada, e cada camada significa outra passada, outra folha de material e mais trabalho de remoção do excesso de material. Portanto, recolorir um arquivo de corte é planejar camadas: dar o mesmo preenchimento a dois elementos os reúne em um corte, e dividir uma cor cria uma nova camada.

Isso torna uma edição especialmente valiosa para quem faz artesanato: unir cores quase duplicadas. Arte vetorizada costuma ter três azuis quase idênticos que acrescentam camadas sem acrescentar nada visível. Una-os em um só e o arquivo corta mais rápido e fica muito mais fácil de limpar pela remoção do excesso de material. O fluxo de redução de paleta SVG mostra como unir por função visual sem apagar contraste nem o significado das operações. Se você está criando desenhos com várias camadas de propósito, nosso guia de SVG em camadas cobre o fluxo completo, e a página de SVG para Cricut aborda a preparação de arte para máquinas de corte do início ao fim.

Se precisar de downloads separados depois de recolorir, salve cada cor exata como um arquivo SVG alinhado.

Como fazer isso com o PerfectVector

Primeiro, uma limitação: o PerfectVector não edita SVGs que você já tem. Ele converte imagens (PNG, JPG, WebP) em SVGs. Mas boa parte da dificuldade em “como recolorir este SVG” vem dessa etapa de conversão: o arquivo que dá trabalho geralmente é uma vetorização bagunçada ou nem é vetor de verdade.

Então, quando o SVG veio de uma imagem, ou você ainda tem a imagem original, a mudança de cor mais limpa acontece na imagem original. Converta a imagem em um SVG feito para ser editado: traçados limpos, poucos nós e cada cor mantida como sua própria forma editável. Depois, use o editor de cores integrado antes de baixar para trocar qualquer cor ou unir cores semelhantes, por cor, sem procurar traçados. Você obtém a paleta desejada e um arquivo mais simples no mesmo passo, e suas primeiras conversões são gratuitas, sem exigir cartão de crédito.

O que mudar a cor não resolve

• Gradientes não são uma única amostra. Um gradiente é uma transição entre paradas de cor. Você pode editar as paradas, mas uma simples operação de “substituir esta cor” talvez altere só parte da transição, por isso uma arte com gradiente fica estranha após uma troca simplista.
• Cores de tela não são cores de impressão. SVG guarda instruções de cor orientadas à tela, enquanto uma impressão pode exigir uma cor exata de marca, uma cor especial ou uma composição específica de preto. Se a exportação mudar o que você vê, diagnostique a mudança de cor no SVG antes de substituir a paleta; o formato de produção solicitado pela gráfica continua sendo a referência de cor.
• Recolorir não limpa a geometria. Novos preenchimentos não unem tiras estreitas, não fecham espaços nem reduzem nós. Uma vetorização bagunçada com novas cores continua bagunçada.

Antes de salvar

• Abra o arquivo recolorido do zero em uma aba do navegador e compare com o original.
• Confira os contornos: eles mudaram junto com os preenchimentos onde deveriam?
• Procure um retângulo de fundo solto que você talvez tenha recolorido sem querer.
• Para arquivos de corte, conte as camadas depois de unir cores; menos quase sempre é melhor.
• Guarde uma cópia intacta do arquivo original.

Perguntas frequentes

Como mudar a cor de um SVG sem Illustrator ou Photoshop? Use uma ferramenta online gratuita de cores de SVG (envie, clique em uma amostra e baixe) ou o Inkscape, um editor vetorial gratuito para computador. Para um ícone de uma cor, também funciona abrir em qualquer editor de texto e alterar o hexadecimal depois de fill=. Nenhuma dessas opções custa dinheiro.

Por que meu SVG continua preto apesar de todas as tentativas? Se estiver em um site, CSS não consegue alterar os estilos de um SVG carregado por uma tag img; insira-o diretamente no HTML ou edite o arquivo. Se estiver em um editor, confira se há um grupo atrapalhando, um contorno responsável pela cor ou cores definidas em um bloco de estilo. Se nada for selecionável e o zoom mostrar pixels, o arquivo é uma imagem raster dentro de um .svg e não tem formas para recolorir.

É possível recolorir um SVG no Canva? O editor dedicado de SVG do Canva informa que você pode enviar, recolorir e baixar um SVG gratuitamente, sem marca-d'água. Recursos complexos de SVG ainda podem ser renderizados de maneiras diferentes entre editores, então inspecione o arquivo baixado antes de substituir o original.

Um único arquivo SVG pode usar mais de uma cor? Sim. Cada forma tem seu próprio preenchimento e contorno, então um SVG pode ter tantas cores quantas forem suas formas, além de gradientes. É também por isso que recolorir uma arte multicolorida exige mudar vários preenchimentos, não uma configuração global.

Como mudar as cores de um SVG para um projeto Cricut? Você pode recolorir camadas no Cricut Design Space, mas ele recolore por camada, não por forma. Para reorganizar quais partes compartilham uma cor e, portanto, quais cortam juntas, edite o SVG antes de enviar: una as cores que quer em uma camada e dê um preenchimento separado a tudo que deve cortar separadamente.

Mudar a cor de um SVG reduz a qualidade? Não. A cor de um vetor é uma instrução em texto, então alterá-la reescreve a instrução sem tocar na geometria. Ao contrário de editar um PNG, você pode recolorir um SVG quantas vezes quiser sem perda de qualidade.

Fontes

1. MDN: preenchimentos e contornos de SVG — Explica fill, stroke, opacidade e propriedades relacionadas à pintura em SVG.
2. MDN: adicionando gráficos vetoriais à web — Compara SVG inserido diretamente no HTML com SVG carregado por <img>.
3. Adobe Illustrator: selecionar objetos com o mesmo preenchimento e contorno — Documenta a seleção de arte por atributos de pintura compartilhados.
4. W3C: conteúdo incorporado em SVG 2 — Define conteúdo raster <image> dentro de documentos SVG.
5. Canva: editor de SVG — Fonte atual das afirmações do Canva sobre envio, mudança de cor e download de SVG.

Recolorir um SVG é rápido quando o arquivo coopera: escolha o método adequado ao que você tem e faça o diagnóstico antes de brigar com as ferramentas. E, se o problema for o próprio arquivo, poupe esse esforço. Converta a imagem original em um SVG limpo e editável e escolha as cores enquanto ainda é fácil.