Por que as cores do SVG mudam após exportar: diagnóstico

Um SVG muda de cor após a exportação quando a aparência do arquivo original e o arquivo entregue são interpretados de maneiras diferentes. O exportador pode converter os valores de cor. Um site pode sobrescrever fill por CSS ou resolver currentColor a partir de um elemento pai. Um degradê, uma configuração de opacidade, um modo de mesclagem ou um filtro pode depender de um recurso que o destino processa de outra forma. Às vezes, a marcação exportada está correta e um importador específico é a exceção.

Não comece substituindo todos os valores hexadecimais. Primeiro encontre o ponto em que a aparência muda. Isso indica se você deve reparar o SVG, mudar a exportação, simplificar uma cópia para entrega ou manter a arte em outro formato.

Relacione o sintoma à primeira verificação

Onde procurar primeiro

Isole o problema em cinco minutos

1. Mantenha o arquivo mestre editável intocado

Salve uma cópia para os testes. Não achate os efeitos, não converta todos os objetos em contornos e não substitua cores na única cópia editável. Essas mudanças podem esconder a causa e dificultar revisões futuras do arquivo.

2. Abra o SVG exportado em dois lugares

Use um navegador atual como controle neutro e depois abra ou importe o mesmo arquivo no destino real. Compare ambos com a arte de origem sobre o mesmo fundo.

• Se as duas visualizações exportadas estiverem erradas, investigue o exportador ou o SVG serializado.
• Se a visualização isolada no navegador estiver correta e o destino estiver errado, investigue a incorporação, o CSS ou o suporte do importador.
• Se apenas regiões transparentes ou mescladas diferirem, teste o fundo e os efeitos antes de mexer nos preenchimentos sólidos.

Um navegador é um controle útil, mas não comprova que todos os aplicativos de design ou produção importarão o mesmo conjunto de recursos.

3. Examine as instruções de pintura

Abra o SVG em um editor de texto e procure:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Você está examinando a estrutura, ainda não reescrevendo. Um fill="#2F6BFF" literal aponta para um caminho diferente de fill="currentColor" ou fill="url(#paint0)".

Se esta é a primeira vez que você abre a marcação de um SVG, o guia mais amplo sobre edição de SVG explica os caminhos pelo código e pelo editor visual.

4. Reduza um objeto que apresenta a falha

Copie o menor objeto que ainda muda para um novo documento e exporte-o. Remova um recurso de cada vez: primeiro o filtro, depois o modo de mesclagem, depois o degradê e depois a opacidade do grupo. A primeira remoção que corrigir o resultado identifica o recurso incompatível ou dependente do contexto.

Esse teste de redução é mais seguro do que achatar toda a ilustração, porque revela uma restrição específica para a entrega.

Causa 1: o exportador converteu o espaço de cor

Cores hexadecimais e a conhecida sintaxe rgb() descrevem cores sRGB. O CSS moderno também pode expressar espaços de gama mais ampla, como Display P3, por meio de color(), conforme definido pelo CSS Color Module Level 4. Portanto, um aplicativo de design pode armazenar uma cor de origem que precisa ser convertida antes de se tornar um valor hexadecimal sRGB, e essa conversão pode alterar os números ou limitar uma cor fora da gama.

Verifique o problema nesta ordem:

1. anote o espaço de cor do documento de origem e o valor numérico do objeto selecionado;
2. exporte um único objeto plano, sem opacidade ou efeitos;
3. abra o SVG como texto e leia o fill ou stroke serializado;
4. compare o número exportado com o do arquivo original;
5. teste o mesmo arquivo no destino.

Se o valor mudou no arquivo, a conversão ocorreu durante a exportação. Escolha o espaço de cor de destino deliberadamente e exporte de novo. Se o valor não mudou, mas a aparência difere, passe para CSS, efeitos, fundo ou comportamento do importador.

Para trabalhos de impressão que exigem separações CMYK, cores especiais ou uma composição específica de preto, mantenha o arquivo mestre que serve como referência para impressão no formato nativo do aplicativo de design e entregue o formato solicitado pela gráfica, frequentemente PDF. Um SVG ainda pode ser útil para uso em tela, mas não deve se tornar silenciosamente a referência de cor de um fluxo que ele não consegue descrever com segurança.

Causa 2: currentColor ou CSS substituiu a pintura

SVG pode ser estilizado com CSS. A especificação de estilização SVG 2 diz que atributos de apresentação como fill participam da cascata CSS com especificidade zero, portanto o CSS do autor pode sobrescrevê-los. Um SVG inline também compartilha o documento com a página ao redor, o que significa que nomes genéricos de classes podem colidir com estilos do site.

currentColor é uma referência indireta intencional. A referência de cor SVG da MDN explica que ela fornece um valor para fill, stroke, pontos de cor de degradês e outras propriedades de pintura. Isso é útil para ícones que devem acompanhar o texto ao redor, mas também significa que o arquivo não tem uma cor fixa naquele ponto.

Use uma de duas estratégias de entrega:

• Para um ícone web que acompanha o tema, mantenha currentColor e defina um color explícito no SVG ou no elemento pai pretendido.
• Para um recurso independente que precisa manter sua própria paleta, escreva preenchimentos e contornos explícitos e delimite as classes internas com nomes que não causem colisões.

Quando vários SVGs inline contiverem IDs como paint0, clip0 ou gradient1, torne esses IDs únicos e atualize suas referências em conjunto. Não mude apenas o id; todo url(#id) ainda precisa apontar para uma definição existente.

Se seu objetivo for recolorir deliberadamente, e não recuperar uma mudança de cor na exportação, use o guia separado para mudar as cores de um SVG com segurança.

Causa 3: um degradê ou uma referência de pintura quebrou

Degradês e padrões SVG são servidores de pintura. Uma forma aponta para eles por uma referência como fill="url(#brandGradient)", enquanto a definição do degradê normalmente fica em <defs>. A especificação de servidores de pintura SVG 2 também define como as coordenadas e transformações do degradê afetam o resultado.

Três verificações identificam a maioria das falhas estruturais:

1. todo url(#id) tem uma definição correspondente;
2. os IDs continuam únicos depois que vários SVGs são combinados em uma página ou documento;
3. o destino preserva o tipo de pintura, as unidades, as transformações e os pontos de cor do degradê usados pelo arquivo.

Se um preenchimento sólido simples for importado corretamente, mas o degradê não, mantenha o degradê no arquivo mestre e faça uma cópia para entrega ao destino. Tente primeiro um degradê linear ou radial mais simples. Se o destino ainda não conseguir reproduzi-lo e a aparência exata importar mais do que a pintura editável, use um formato ou recurso achatado compatível com o fluxo de destino. Identifique essa cópia claramente para que ela não substitua o arquivo original editável.

Causa 4: opacidade e mesclagem alteraram o resultado visível

O pixel visível nem sempre corresponde ao preenchimento armazenado. fill-opacity afeta o preenchimento de uma forma, a opacity de grupo é aplicada após a combinação dos filhos do grupo e um modo de mesclagem mistura o conteúdo original com o fundo. A especificação de composição e mesclagem do W3C define a ordem de renderização e as fórmulas de mesclagem que dependem do fundo.

Isso tem duas consequências práticas:

• O mesmo SVG pode parecer diferente sobre branco, preto ou uma página colorida sem que nenhum valor de cor mude.
• Transferir a opacidade de um grupo para cada filho pode alterar as sobreposições, porque a ordem de composição é diferente.

Teste sobre o fundo real. Depois remova mix-blend-mode, filtros, máscaras e opacidade de grupo, um de cada vez, em uma cópia. Se o destino não puder preservar um efeito essencial, escolha entre um tratamento vetorial simplificado e um recurso achatado para entrega. Não achate partes do design que não estejam relacionadas ao problema.

Um retângulo branco ou colorido atrás da arte é um caso separado. O guia de SVG com fundo transparente mostra como distinguir uma forma de fundo real de uma área vazia da tela.

Causa 5: o destino importou apenas parte do SVG

SVG é um padrão web, mas muitas ferramentas para desktop, impressão, corte, apresentações e criação de sites o traduzem para seus próprios modelos de objetos. O suporte pode variar conforme o aplicativo e a versão. Evite regras como “este aplicativo nunca aceita degradês”, a menos que a documentação oficial atual diga isso e sua versão exata corresponda a ela.

Use um teste de importação controlado:

1. importe um único traçado com preenchimento sólido;
2. adicione o degradê original;
3. adicione opacidade;
4. adicione a mesclagem ou o filtro;
5. pare na primeira versão que apresentar mudança.

Agora você conhece o limite daquele destino. Mantenha o arquivo mestre completo e exporte uma cópia para entrega dentro do limite testado. Se os contornos forem a parte que desaparece, siga o diagnóstico de exportação específico para contornos em vez de converter todas as linhas em preenchimentos.

Escolha a menor correção segura

Onde o PerfectVector se encaixa

O PerfectVector é útil quando o arquivo vetorial original já foi perdida ou está inutilizável e a melhor arte restante é uma imagem raster. Você pode transformar essa imagem em formas vetoriais editáveis e depois examinar a paleta, a transparência e os traçados antes de abrir o resultado no destino.

Ele não repara CSS herdado, não restaura uma definição de degradê ausente, não recupera o perfil de cor de um aplicativo de design, não preserva um modo de mesclagem incompatível nem muda o analisador de um importador. Se o SVG ainda contiver bons traçados e instruções de pintura, repare o arquivo em vez de vetorizar uma captura de tela. Isso preserva mais da estrutura original.

Lista de verificação para entrega

• Mantenha o arquivo mestre editável e faça as correções em uma cópia.
• Compare o arquivo exportado em um navegador e no destino real sobre o mesmo fundo.
• Verifique se os valores serializados de fill e stroke mudaram.
• Procure currentColor, classes genéricas e IDs repetidos.
• Relacione toda referência url(#id) à sua definição.
• Teste separadamente opacidade de grupo, modos de mesclagem, filtros e máscaras.
• Simplifique apenas o recurso que o destino não consegue reproduzir.
• Reabra ou reimporte o arquivo final de entrega antes de substituir a versão anterior.

FAQ

Por que meu SVG parece correto no navegador, mas errado após a importação? O arquivo provavelmente usa um recurso ou contexto de estilo que o destino traduz de outra maneira. Importe um traçado sólido e depois adicione de volta o degradê, a opacidade, a mesclagem ou o filtro, um de cada vez. A primeira etapa que falhar identifica o limite do destino sem danificar o arquivo mestre.

Arquivos SVG são sempre RGB? Cores hexadecimais comuns e rgb() são sRGB, enquanto o CSS moderno também pode expressar espaços como Display P3. Aplicativos de design e impressão podem converter essas cores durante a exportação ou importação. Examine a cor serializada e use o formato de produção solicitado pela gráfica para trabalhos CMYK ou com cores especiais.

Por que meu SVG ficou preto após a exportação? Verifique se o arquivo usa currentColor, perdeu uma regra CSS ou faz referência a um degradê ou ID de pintura ausente. O preto pode ser uma cor herdada ou um sintoma de fallback, em vez de o preenchimento original ter sido substituído. Compare o arquivo isolado com a versão incorporada ou importada.

Devo substituir todos os valores hexadecimais quando as cores parecem erradas? Não. Primeiro determine se os valores mudaram durante a exportação. Se os números estiverem intactos, substituí-los pode esconder um problema de CSS, referência de pintura, mesclagem, fundo ou importador e tornar o arquivo menos preciso em outros lugares.

O PerfectVector pode corrigir um SVG cujas cores mudaram após a exportação? Não quando o SVG só precisa de reparos no CSS, nos degradês, na opacidade, no perfil ou no comportamento do importador. O PerfectVector se encaixa quando o vetor original foi perdido e você precisa reconstruir uma arte raster plana adequada como formas vetoriais editáveis.

Fontes

1. W3C — Estilização SVG 2 — Define estilização CSS, atributos de classe e estilo, atributos de apresentação, comportamento da cascata e herança em SVG.
2. MDN — Atributo color do SVG — Explica como currentColor fornece valores de pintura para preenchimentos, contornos, pontos de cor de degradês e propriedades relacionadas.
3. W3C — Servidores de pintura SVG 2 — Define degradês lineares e radiais, referências de pintura, sistemas de coordenadas, transformações e interpolação de cores.
4. W3C — CSS Color Module Level 4 — Define a sintaxe de cores sRGB e espaços predefinidos mais amplos, incluindo Display P3.
5. W3C — Composição e mesclagem Level 1 — Define grupos de opacidade, ordem de composição, fundos e modos de mesclagem para SVG e CSS.

Se a melhor imagem original restante for um PNG ou JPG, reconstrua-a como SVG com o PerfectVector e compare o resultado em um navegador isolado e no destino final antes de substituir o arquivo antigo.