Por que vazados do SVG são preenchidos e como reparar

Um vazado de SVG é preenchido quando o arquivo ou destino deixa de tratar o contorno interno como externo à forma preenchida. As causas habituais são um traçado composto liberado, um contorno interno armazenado como objeto preenchido separado, uma mudança na regra de preenchimento ou direção do traçado, um importador que perde a relação ou um traçado raster que fechou a abertura antes de criar o SVG.

Comece abrindo o SVG em um navegador. Se o vazado já estiver preenchido ali, repare o arquivo. Se o navegador mostra corretamente, mas outro aplicativo preenche o vazado, a etapa de importação é a provável culpada.

Primeiro encontre onde o vazado desapareceu

Use dois renderizadores antes de mudar a geometria:

1. Salve uma cópia do SVG.
2. Abra a cópia diretamente no Chrome, Safari, Firefox ou outro navegador.
3. Coloque-a sobre fundos claro e escuro.
4. Abra o mesmo arquivo no aplicativo de destino.
5. Compare o vazado exato, não apenas a silhueta geral.

Essa comparação separa um SVG ruim de um problema de importação específico do destino. Também evita que operações aleatórias de traçado danifiquem um arquivo que estava correto antes de importar.

Uma forma branca não é um vazado

Um vazado real mostra o que está atrás do SVG. Uma forma branca só parece vazia em uma área de trabalho branca. Para arte usada em uma interface web, o guia de pointer-events do SVG mostra como um vazado, uma região pintada e um alvo separado de interação respondem a cliques.

Para testar, adicione um retângulo escuro temporário atrás da arte. Se o suposto vazado continuar branco, selecione esse objeto interno. Você pode mantê-lo como elemento branco intencional do desenho, mas não espere que máquina de corte, ferramenta de gravação, sobreposição no navegador ou importador 3D o interprete como espaço vazio.

Para uma abertura transparente, use um traçado composto ou subtraia a forma interna da externa. Uma máscara também cria transparência, mas muitos aplicativos de produção tratam geometria simples de traçados de forma mais confiável que máscaras. Para um fluxo por script, experimente recortar e unir traçados importados com Paper.js e reabra o SVG exportado para verificar a abertura.

Para arte de gobos, uma abertura transparente correta ainda deixa uma decisão separada sobre material. A comparação de gobos de aço versus vidro acompanha a mesma letra O em uma disposição com pontes de aço e em um desenho sustentado por vidro e explica por que inverter as regiões claras e escuras projetadas muda o que precisa permanecer conectado.

Traçados compostos carregam a relação do vazado

Uma letra O, um anel e um logotipo com centro vazado frequentemente usam um elemento de traçado com vários subtraçados fechados. O contorno externo define a silhueta; um subtraçado interno define o espaço vazio ou recorte. O modelo de traçados SVG permite vários subtraçados dentro de um traçado.

Por isso Ungroup, Break Apart e Release Compound Path não são intercambiáveis. Liberar o traçado composto pode transformar o contorno interno em um objeto preenchido comum. A geometria continua presente, mas sua relação com o contorno externo desapareceu.

Restaure-a em uma cópia:

1. Selecione o limite externo e apenas os contornos que devem ser vazados.
2. Use Make Compound Path, Combine ou o comando equivalente.
3. Aplique um preenchimento ao objeto resultante.
4. Confira a regra de preenchimento.
5. Reabra o SVG salvo em um navegador e no aplicativo de destino.

A documentação atual de traçados compostos da Adobe usa esse mesmo modelo: os traçados constituintes determinam regiões preenchidas e transparentes por uma regra de preenchimento.

Restaure a relação, não apenas a aparência

Para arte de carimbos, confira a geometria elevada versus rebaixada de carimbos para cerâmica antes de decidir quais áreas devem permanecer preenchidas.

Confira nonzero versus evenodd

O SVG tem duas regras de preenchimento. A especificação de pintura do SVG 2 define nonzero como valor inicial e evenodd como a outra opção.

• nonzero usa cruzamentos de traçado com sinal. Um contorno interno com direção errada pode somar ao preenchimento em vez de cancelá-lo.
• evenodd conta cruzamentos. Um ponto cercado duas vezes fica fora, então um contorno aninhado simples vira vazado independentemente da direção.

Este traçado mínimo contém dois retângulos na mesma direção. Com evenodd, o centro permanece transparente:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Mudar a regra é útil quando corresponde ao desenho, mas não é um reparo universal. Os dois contornos ainda devem ser avaliados como subtraçados da mesma forma. Definir fill-rule="evenodd" em dois objetos sem relação não faz um recortar o outro.

Se mantiver nonzero, inverta apenas o contorno interno quando seu editor oferecer esse comando. O Illustrator oferece as duas regras de preenchimento e um controle de direção de traçado para traçados compostos. Salve uma cópia antes de inverter qualquer coisa, pois autointerseções e vários interiores aninhados podem produzir um resultado diferente de um anel simples.

Quando o SVG está certo, mas o importador está errado

Algumas ferramentas de corte, CAD, 3D e animação suportam apenas um subconjunto prático de SVG. Um navegador pode renderizar corretamente o traçado composto, enquanto o destino importa cada contorno como objeto sólido.

Use esta ordem de reparo:

1. Salve uma cópia simplificada no editor original.
2. Converta texto editável em contornos nessa cópia quando a importação de texto for o ponto fraco.
3. Substitua máscaras, recortes e efeitos de aparência por geometria simples de traçados apenas onde necessário.
4. Mantenha cada vazado pretendido com seu contorno externo como um traçado composto.
5. Teste evenodd e nonzero deliberadamente, em vez de alternar repetidamente.
6. Se o importador ainda preencher a abertura, importe os dois limites e subtraia o perfil interno no destino.

Para um fluxo de extrusão, o destino também precisa reconhecer um perfil fechado selecionável. O diagnóstico de extrusão SVG aborda extremidades abertas, duplicações e validade de perfis depois que o vazado é preservado.

Quando o traçado fechou a abertura

Um vetorizador pode fechar o interior de uma letra pequena ou unir uma lacuna estreita quando o raster original é minúsculo, desfocado ou tem pouco contraste. Isso é um problema de geometria, não de regra de preenchimento: o limite interno nunca chegou ao SVG.

Volte ao raster original e:

• amplie ou capture-o novamente sem adicionar desfoque;
• aumente a separação ao redor da abertura importante;
• remova ruído de compressão perto da lacuna;
• reduza a suavização ou união de cores se a ferramenta oferecer esses controles;
• compare o novo traçado no tamanho final de saída.

É nesse caso que o PerfectVector pode ajudar. Use o fluxo de imagem para vetor quando tiver o raster original e precisar de um novo traçado SVG. Examine todos os interiores de letras e espaços negativos antes de baixar. Se o SVG estava correto até um editor liberar seus traçados compostos, repare esse SVG; traçar novamente não recupera o histórico perdido de edição.

A mesma abordagem que começa pela imagem original é útil para lettering. O guia de vetorização de lettering manual mostra como manter pequenos espaços internos abertos sem tirar a personalidade do desenho inteiro.

Uma verificação final segura

Antes de enviar o SVG reparado:

• visualize-o sobre fundos claros, escuros e transparentes;
• selecione o alvo e confirme que é um único traçado composto intencional;
• examine a regra de preenchimento no editor ou no código SVG;
• confira cada interior de letra, anel e espaço negativo fechado;
• reabra o arquivo exportado em vez de confiar na área de trabalho não salva;
• teste o aplicativo de destino exato;
• mantenha separados o arquivo original editável e a cópia simplificada de entrega.

Se o objeto agora se comporta como uma única seleção, isso pode estar correto. Um traçado composto é um objeto por definição. Use o guia de desagrupamento de SVG antes de separá-lo novamente.

Perguntas frequentes

Por que os vazados foram preenchidos depois de usar Break Apart? Break Apart separou os contornos internos do traçado composto externo. Os antigos vazados viraram objetos preenchidos comuns. Desfaça o comando ou recombine cada contorno externo com os contornos internos corretos e verifique a regra de preenchimento.

Devo usar fill-rule="evenodd" para vazados SVG? evenodd costuma ser conveniente para contornos aninhados porque a direção deles não determina o resultado. Ela ainda funciona dentro de uma forma; não subtrai um objeto separado. Mantenha nonzero quando o arquivo original e o destino preservarem as direções pretendidas dos contornos.

Por que o SVG parece correto no navegador, mas sólido no meu aplicativo? O importador de destino pode não preservar o traçado composto, regra de preenchimento, máscara ou direção dos contornos. Simplifique uma cópia como traçados básicos e teste novamente. Se necessário, importe os limites externo e interno e subtraia o vazado no destino.

Posso criar um vazado colocando uma forma branca por cima? Ela apenas simula um vazado em fundo branco. O objeto branco continua preenchido, então pode ser impresso, cortado ou importado como outro sólido. Use um traçado composto, subtração ou outra estrutura de transparência quando o fundo deve aparecer através dele.

O PerfectVector corrige vazados preenchidos em um SVG existente? O PerfectVector é útil quando você pode voltar a uma imagem raster original adequada e criar um novo traçado com as aberturas pretendidas visíveis. Ele não repara um traçado composto que um editor liberou ou um importador ignorou. Corrija essas relações no editor vetorial ou aplicativo de destino.

Fontes

1. W3C — Pintura do SVG 2 — Define nonzero, evenodd e o valor inicial da regra de preenchimento.
2. W3C — Traçados SVG — Define traçados, subtraçados e geometria de traçados fechados.
3. Adobe Illustrator — Criar traçados compostos — Documenta vazados compostos, regras de preenchimento e inversão da direção dos traçados constituintes.
4. PerfectVector — Imagem para vetor — Fluxo atual de raster para SVG usado no caso condicional de traçar novamente.

Se a abertura foi perdida ao traçar o raster, crie um novo vetor a partir da imagem original limpa e examine cada interior de letra antes de entregar. Se a versão no navegador já estiver correta, mantenha essa geometria e repare apenas a importação que falha.