Espaços brancos entre formas SVG: diagnostique e corrija

Linhas brancas finas entre formas SVG muitas vezes são emendas de renderização, não buracos no arquivo. O modelo de renderização SVG permite que implementações usem suavização ao rasterizar gráficos vetoriais; bordas adjacentes amostradas separadamente podem, portanto, revelar uma linha finíssima da cor do fundo em determinada escala. A linha pode desaparecer em outro zoom ou renderizador.

Às vezes o espaço é real. Antes de sobrepor formas, acrescentar contornos ou unir traçados, faça quatro verificações: mude o zoom, mude o fundo, exporte a arte como raster e inspecione os traçados na visualização de contornos. Os resultados indicam se você deve corrigir a amostragem de exibição ou a geometria.

Emenda de renderização ou espaço real?

• Muda ou desaparece com o zoom: provavelmente uma emenda de exibição.
• Muda de cor com o fundo: o fundo está sendo amostrado entre as bordas.
• Ausente na visualização de contornos: os limites vetoriais talvez já se encontrem.
• Visível em uma exportação raster de alta resolução: inspecione melhor a precisão da exportação e a geometria.
• Permanece em malha, prévia de corte ou medição de traçado: trate como problema real de geometria.

Por que traçados que se tocam podem mostrar uma emenda

Telas renderizam formas vetoriais em uma grade de pixels. Quando uma borda atravessa um pixel, a suavização mistura esse pixel entre forma e fundo para dar aparência suave. Duas formas renderizadas separadamente podem misturar seus pixels de borda, mesmo quando as coordenadas vetoriais se encontram.

A escala acrescenta outra variável. Uma coordenada compartilhada que cai exatamente no limite de um pixel em um tamanho pode cair entre pixels em outro. Arredondamento na exportação também pode mover um limite por uma quantidade mínima. Por isso, uma linha aparece só a 67% de zoom, desaparece a 100% e retorna em uma pequena miniatura web.

O SVG ainda pode estar matematicamente correto. Editar a geometria antes de testar pode criar sobreposições visíveis em usos transparentes, impressos, cortados ou animados.

A distinção central é se os contornos subjacentes compartilham uma borda. Uma emenda de renderização pode aparecer sobre geometria que se toca; um espaço real continua visível entre os próprios contornos.

Faça quatro testes antes de editar

1. Mude o zoom

Veja o SVG em vários níveis de zoom, incluindo 100% e uma grande ampliação. Um espaço real permanece entre os traçados ao ampliar. Uma emenda de amostragem costuma piscar, mudar de espessura ou desaparecer.

Não use só o zoom. Alguns espaços geométricos são menores que um pixel e também mudam de aparência.

2. Mude o fundo

Coloque o SVG sobre branco, preto e uma cor forte. Se a linha fina assumir a cor do fundo, o renderizador mostra o fundo entre bordas amostradas separadamente. Isso pode ser uma emenda de amostragem ou um espaço transparente real, então continue inspecionando os contornos.

3. Exporte um PNG de alta resolução

Exporte com duas ou quatro vezes as dimensões finais e inspecione o resultado reduzido. Se a emenda desaparecer na exportação de alta resolução, o problema provavelmente era rasterização dependente de escala. Se permanecer e ficar mensurável, inspecione coordenadas e precisão de exportação.

4. Use a visualização de contornos ou aramado

Desative preenchimentos e inspecione os limites reais. Selecione nós vizinhos e compare coordenadas. Se os traçados se encontram exatamente, a linha visível é um problema de renderização. Se extremidades ou bordas não correspondem, repare a geometria.

Para mais tipos de edição de traçados, veja como editar um SVG. Guarde uma cópia porque a melhor solução depende do uso do arquivo.

Corrija uma emenda de exibição

Para arte de cores chapadas cujos preenchimentos adjacentes não devem ter transparência entre si, uma pequena sobreposição controlada geralmente é a solução mais confiável. Estenda um pouco a forma inferior ou mais escura sob sua vizinha. A sobreposição deve ser invisível no tamanho normal e não alterar a silhueta externa.

Outras opções incluem:

• Acrescentar um contorno muito fino da mesma cor da forma, alinhado para cobrir a emenda.
• Colocar uma forma de base correspondente atrás de todas as peças adjacentes.
• Aumentar a precisão das coordenadas na exportação SVG se o arredondamento separou bordas compartilhadas.
• Renderizar um raster maior e reduzir quando a entrega final for PNG.

A propriedade SVG shape-rendering pode solicitar precisão geométrica ou bordas mais nítidas, mas a MDN observa que é uma indicação de renderização, não uma garantia portátil de que todas as emendas desaparecerão. Veja quando crispEdges ajuda e quando não antes de aplicar ao arquivo inteiro.

Escolha uma correção e teste no destino real. Acumular várias pode criar faixas escuras ou saliências onde as formas se sobrepõem.

Corrija um espaço real na geometria

Se a visualização de contornos ou a saída posterior confirmar um buraco:

1. Encaixe os nós pretendidos na mesma coordenada.
2. Estenda bordas vizinhas até realmente se encontrarem.
3. Una extremidades apenas quando o desenho exigir um traçado contínuo.
4. Remova segmentos duplicados ou soltos.
5. Exporte novamente com precisão suficiente de coordenadas.
6. Reabra e repita os quatro testes.

Evite usar uma forma branca para cobrir o espaço. Ela esconde o sintoma apenas sobre fundo branco e continua sendo um objeto extra.

Se os espaços vieram de vetorizar um raster com ruído, pode haver muitas tiras estreitas e encontros incompletos pelo desenho. Reparar cada um pode levar mais tempo que vetorizar novamente um original mais limpo.

O destino muda a solução correta

Uma fissura que permanece em uma face CAD ou malha posterior é materialmente diferente de uma emenda de um pixel no navegador. Se a geometria posterior se separa, repare os traçados originais ou a tolerância da conversão. Se só uma miniatura no navegador mostra a linha, a geometria de produção talvez já esteja correta.

A lista de SVG antes do corte cobre a revisão específica da máquina. Para falta de nitidez na tela ou pixels ocultos, em vez de emendas, use o diagnóstico de SVG pixelado.

Onde o PerfectVector se encaixa

Quando espaços estão espalhados em uma vetorização de PNG ou JPG, volte ao raster original antes de remendar dezenas de traçados. Limpe blocos evidentes de compressão, remova fundo indesejado e mantenha as bordas originais mais fortes. Depois use o fluxo de imagem em vetor para reconstruir regiões visíveis como traçados editáveis e inspecione a prévia.

O PerfectVector não sabe se duas regiões da mesma cor precisam continuar separadas para animação, corte ou montagem. Use a prévia para conferir silhuetas e espaço negativo e teste o SVG baixado no destino real. Vetorizar novamente é útil quando a fragmentação do original causou espaços, não quando um navegador apenas suaviza geometria adjacente correta.

Perguntas frequentes

Por que há linhas brancas entre traçados SVG? O navegador ou aplicativo pode suavizar bordas adjacentes separadamente, deixando o fundo aparecer em certas escalas. Os traçados ainda podem se encontrar exatamente. Mude zoom, fundo, renderizador e visualização de contornos antes de editar.

Como remover emendas de suavização em um SVG? Para preenchimentos adjacentes de cores chapadas, acrescente uma pequena sobreposição controlada, um contorno finíssimo da mesma cor ou uma forma de base. Teste nos tamanhos finais de exibição. Não use essas correções cegamente em arte de corte, CAD, transparente ou animada.

Unir todos os traçados remove os espaços? Pode remover, mas também elimina estrutura separada de cores e edição. Una traçados apenas quando devem ser uma forma. Arte multicolorida geralmente precisa de objetos separados, então ajustar bordas ou sobreposição controlada é mais seguro.

Por que os espaços aparecem apenas quando o SVG é pequeno? A escala move limites vetoriais em relação à grade de pixels. Em alguns tamanhos, as duas bordas adjacentes se misturam ao fundo na mesma linha ou coluna de pixels. Uma renderização maior ou leve sobreposição pode impedir que o fundo apareça.

Pequenos espaços SVG importam para impressão 3D ou corte? Importam se permanecem na face, malha ou percurso da ferramenta. Uma emenda só na tela não prova que a geometria está errada. Inspecione a prévia posterior e repare qualquer fissura ou contorno aberto que mude o objeto produzido.

Fontes

1. W3C — modelo de renderização SVG 2 — Descreve ordem de pintura SVG, recorte, composição e suavização.
2. MDN — shape-rendering — Documenta as indicações de renderização disponíveis para formas SVG.
3. W3C — sistemas de coordenadas SVG 2 — Define o modelo de coordenadas, área de visualização e transformações por trás da renderização dependente de escala.

---

Se uma vetorização raster fragmentada contém espaços reais, reconstrua como traçados vetoriais editáveis e inspecione a prévia. Se os traçados já se encontram, preserve o arquivo e aplique apenas a menor correção de exibição específica para o destino.