Contornos SVG somem após exportar: encontre a causa

Quando um contorno SVG desaparece após exportar, primeiro determine se a geometria do traçado ainda existe. Uma linha aparentemente ausente pode estar sem cor de contorno, ter a mesma cor do fundo, ficar fina demais na nova escala, estar fora do viewBox ou ser recortada na borda da página. Também pode usar pincel, perfil de largura variável, filtro ou regra CSS que o aplicativo de destino não entende.

Não vetorize novamente a arte nem expanda todos os objetos de imediato. Preserve o original editável, faça uma cópia de teste e isole uma linha problemática. A menor correção geralmente mantém mais da estrutura original intacta.

O diagnóstico rápido

1. Abra o mesmo SVG em um navegador atual e em um editor vetorial.
2. Selecione a linha ausente e confirme que seu traçado e nós ainda existem.
3. Dê à cópia de teste uma cor forte de contorno, opacidade total e uma largura temporariamente maior.
4. Afaste da borda da página e desative recortes, máscaras e filtros um por vez.
5. Remova transformações ou inspecione seu efeito na largura do contorno.
6. Se apenas um destino falha, substitua a aparência incompatível em uma cópia de entrega.

Quatro resultados de contorno

Primeiro, confira se o traçado ainda está lá

Abra uma cópia do SVG em um editor de texto e procure elementos comuns de formas como <path>, <line>, <polyline>, <circle> ou <rect>. Depois selecione o objeto ausente em um editor vetorial e mude para a visualização de contornos ou aramado.

• Se nós e traçado aparecem nessa visualização, a geometria sobreviveu. Investigue pintura, recorte, transformações e suporte do aplicativo.
• Se o objeto existe, mas seus limites estão longe da página, mova de volta ou corrija o viewBox.
• Se a linha pretendida virou uma forma fechada preenchida, talvez já tenha sido expandida em contornos.
• Se não há geometria correspondente, inspecione o documento original e as configurações de exportação. O exportador pode ter omitido um objeto incompatível.

Compare dois renderizadores antes de editar. Um contorno visível no Chrome, mas ausente em um editor desktop, aponta para uma limitação de importação ou dependência de CSS. Uma linha ausente em todo lugar provavelmente tem pintura inválida, recorte, limites errados ou geometria ausente. Se o documento inteiro está vazio, e não apenas as linhas, siga o diagnóstico mais amplo de SVG em branco.

Se o contorno desaparece especificamente no Penpot, use as verificações de importação SVG no Penpot para isolar a transferência.

Causa 1: o contorno não tem pintura visível

SVG trata preenchimento e contorno como propriedades de pintura separadas. Um traçado pode existir sem mostrar uma linha. O guia de preenchimentos e contornos da MDN cobre as propriedades principais, incluindo stroke, stroke-width e opacidade.

Inspecione o objeto selecionado e seus estilos herdados em busca de:

• stroke="none";
• ausência de stroke combinada com fill="none";
• stroke-width="0" ou largura extremamente pequena;
• opacity="0" ou stroke-opacity="0";
• cor de contorno igual à página ou forma ao redor;
• display="none" ou visibility="hidden" no objeto ou grupo pai;
• uma classe CSS que sobrescreve atributos de apresentação.

Em uma cópia de teste, atribua uma cor saturada, defina opacidade em 100% e aumente várias vezes a largura. Se um contorno grosso cobrir a face de letras preenchidas, compare a ordem de pintura de contorno e preenchimento SVG antes de mudar os traçados. Coloque um retângulo contrastante atrás. Se a linha aparecer, restaure a cor pretendida e escolha uma largura legível no tamanho de entrega.

Lembre que um estilo declarado no elemento ainda pode ser sobrescrito por uma regra mais específica da folha de estilos. Inspecione o estilo computado nas ferramentas de desenvolvedor quando a marcação diz uma coisa e o navegador desenha outra.

Causa 2: a linha é recortada na borda da página ou quadro

Um contorno se estende para os dois lados do traçado central. Se esse centro estiver no limite do viewBox, metade pode ficar fora da área de visualização. Uma linha grossa, terminação quadrada, junção em ponta, desfoque ou sombra precisa de mais espaço que as coordenadas básicas sugerem; a especificação de pintura SVG define como largura, terminações, junções e limites de ponta estendem o resultado pintado ao redor do traçado. Se uma forma fechada precisa da linha totalmente dentro ou fora do traçado, use o guia de alinhamento interno ou externo de contorno para comparar a área pintada antes de redimensionar a prancheta.

Teste movendo o objeto para dentro ou ampliando temporariamente o viewBox. Se a parte ausente voltar, acrescente uma margem deliberada ao redor da arte visível. Não continue expandindo a tela cegamente; calcule espaço suficiente para a largura máxima, terminações, junções e efeitos.

Inspecione também referências clipPath e mask. Um recorte dimensionado pelos limites do preenchimento pode cortar um contorno que se estende além deles. Elementos SVG aninhados podem criar suas próprias áreas de visualização, e o comportamento de overflow pode diferir entre navegador e importador de ferramenta de design.

Quando só um canto desaparece, procure uma interação com stroke-miterlimit alto. Uma junção aguda pode se estender muito além do traçado. Mudar a junção para arredondada ou chanfrada pode ser mais adequado que ampliar a área de visualização, mas apenas se preservar o desenho pretendido.

Causa 3: escala ou transformações tornaram o contorno enganoso

Uma transformação pode mudar a geometria e o contorno aparente de um objeto. Uma linha adequada no tamanho de criação pode ficar extremamente fina depois de importar, especialmente quando o aplicativo interpreta unidades ou transformações aninhadas de modo diferente.

Procure transform="scale(...)" no traçado e nos grupos pais. Compare viewBox, width e height do documento e teste a 100% de zoom e no tamanho físico final. Se todo o desenho é importado nas dimensões erradas, corrija o mapeamento do documento com o teste de escala SVG de tamanho conhecido, em vez de compensar com larguras arbitrárias.

SVG também oferece vector-effect="non-scaling-stroke". Como explica a referência de vector-effect da MDN, o valor comum non-scaling-stroke impede que a largura renderizada acompanhe as transformações do elemento. Isso pode ser útil para diagramas de interface e mapas; confira no importador pretendido, porque o suporte fora dos navegadores varia conforme o aplicativo.

Não acrescente non-scaling-stroke como solução universal. Decida se a linha deve mudar de tamanho junto da arte. Se um logotipo é ampliado para imprimir, seus contornos geralmente devem crescer junto. Se uma linha de mapa precisa continuar com um pixel de tela durante o zoom, um contorno que não muda de largura pode ser intencional.

Causa 4: o destino não reproduz a aparência

Nem toda linha mostrada em um aplicativo de design é um contorno SVG simples. Pode ser um pincel sensível à pressão, perfil de largura variável, pincel de padrão, efeito ativo, mesclagem, filtro ou conjunto proprietário de aparências. Um exportador pode aproximar essa construção, e um segundo aplicativo pode ignorar a aproximação.

Faça um teste de redução em uma cópia:

1. remova o filtro mantendo o contorno básico;
2. substitua padrão ou pincel por um contorno sólido simples;
3. remova largura variável;
4. achate transformações aninhadas;
5. exporte o objeto único como SVG mínimo;
6. abra no destino.

A primeira simplificação que restaura a linha identifica o recurso incompatível. Você pode então escolher uma substituição portátil em vez de achatar todo o documento.

CSS e recursos externos são outro risco de portabilidade. Um SVG incorporado a um site pode herdar uma regra de classe ou propriedade personalizada da página, enquanto o mesmo arquivo aberto sozinho não. Por outro lado, um editor desktop pode descartar seletores que não mapeia ao seu modelo de objetos. Para uma entrega independente, use estilos autossuficientes que o aplicativo de destino comprovadamente importa.

Contorno editável ou traçado convertido em forma?

Um contorno editável mantém um traçado central mais configurações de largura, terminação, junção, tracejado e pintura. É compacto e fácil de ajustar. Um contorno expandido converte a faixa visível em geometria de traçado preenchida. Isso fixa a aparência, mas sacrifica a linha central e os controles originais.

Expanda uma cópia de entrega quando o destino não preservar uma aparência essencial de pincel ou largura variável, ou quando um fornecedor exigir geometria preenchida. A documentação de expansão de objetos da Adobe descreve expandir contornos em seus objetos componentes.

Mantenha o arquivo mestre com contornos editáveis porque a expansão pode:

• aumentar a quantidade de nós e o tamanho do arquivo;
• tornar mudanças de largura mais lentas;
• transformar sobreposições em geometria complexa;
• criar peças separadas que precisam ser unidas;
• mudar o significado de traçados abertos para plotagem, gravação ou animação.

Expandir é especialmente perigoso quando um plotter com caneta ou fluxo de gravação espera que a ferramenta siga o traçado central uma vez. Um contorno expandido dá à máquina dois limites. Para esse fluxo, use o guia de SVG de linha única.

Escolha a solução para o destino

Teste o destino exato, não apenas outro editor do mesmo fornecedor. Navegador, tela de design, fluxo de impressão, máquina de corte e importador CAD podem oferecer subconjuntos diferentes de SVG.

Uma ordem segura de correção

Vá de verificações reversíveis à conversão estrutural:

1. preserve o original editável e crie uma cópia;
2. confirme que a geometria existe;
3. compare dois renderizadores;
4. teste cor, largura e opacidade explícitas do contorno;
5. confira contraste do fundo e CSS herdado;
6. inspecione limites da página, recortes, máscaras e áreas de visualização aninhadas;
7. inspecione transformações e renderização no tamanho final;
8. simplifique uma aparência incompatível por vez;
9. expanda apenas os contornos necessários em uma cópia de entrega;
10. reabra o SVG entregue e compare com o original.

Não use rasterização como correção intermediária quando bons traçados sobrevivem. Ela remove a geometria que você tenta preservar e acrescenta uma vetorização que pode suavizar cantos, mudar curvas e criar nós desnecessários.

Onde o PerfectVector se encaixa

O PerfectVector só é útil quando a geometria vetorial original se perdeu ou é inutilizável e a melhor imagem original restante é uma imagem raster. Pode reconstruir um logotipo, ícone ou ilustração adequada de cores chapadas como formas vetoriais editáveis.

Não repara CSS, não restaura um contorno editável omitido nem converte um pincel incompatível preservando sua linha central editável. Se o traçado ainda existe, corrija pintura, limites, transformações ou aparência no editor vetorial. Isso preserva mais informação que vetorizar uma captura de tela.

Perguntas frequentes

Por que contornos SVG desaparecem depois de exportar? O traçado pode continuar existindo, mas sem contorno visível, com opacidade zero, cor igual ao fundo, largura extremamente fina, recorte, problema de escala ou aparência que o destino não importa. Confirme a geometria primeiro e isole pintura, limites, transformações e suporte.

Como saber se o traçado ainda existe? Selecione o objeto ausente em um editor vetorial e mude para a visualização de contornos ou aramado. Você também pode abrir o SVG como texto e procurar o elemento correspondente de traçado ou forma. Nós existentes sem linha visível apontam para um problema de renderização ou estilo, não geometria ausente.

Por que um contorno é cortado na borda de um SVG? Um contorno se estende além do traçado central, então um traçado no limite do viewBox pode perder metade da largura. Terminações, junções, filtros, recortes e máscaras também podem precisar de margem adicional. Mova o traçado para dentro ou dimensione deliberadamente área de visualização e recorte ao redor da aparência completa.

Devo expandir contornos SVG antes de exportar? Só quando o destino não preservar uma aparência essencial ou exigir explicitamente geometria preenchida. Expanda uma cópia de entrega e mantenha o arquivo mestre editável com contorno editável. A expansão acrescenta geometria e não é adequada quando um plotter ou ferramenta de gravação deve seguir uma linha central.

O PerfectVector restaura um contorno SVG ausente? Não a partir de um SVG cujo traçado ou estilo apenas precise de reparo. O PerfectVector pode reconstruir arte visível a partir do melhor raster restante quando a geometria vetorial original não está disponível, mas não recupera CSS, configurações de pincel ou o traçado central editável original.

Fontes

1. W3C — pintura SVG 2 — Define preenchimento, contorno, largura, terminações, junções e efeitos vetoriais.
2. W3C — sistemas de coordenadas SVG 2 — Documenta áreas de visualização, viewBox, unidades e transformações.
3. MDN — vector-effect — Explica o comportamento de non-scaling-stroke.
4. Adobe Illustrator — agrupar e expandir objetos — Documenta a expansão de contornos em objetos componentes editáveis.

---

Quando a geometria vetorial original se perdeu e o melhor original restante é raster, reconstrua a arte como traçados vetoriais limpos com o PerfectVector e confira no aplicativo de destino. Se os traçados ainda existem, repare o SVG em vez de vetorizar novamente.