SVG abre em branco: sete verificações antes de refazer

Se um SVG abre em branco, duplique o arquivo antes de salvar ou exportar qualquer coisa. A arte ainda pode estar presente, mas fora do viewBox visível, pintada de transparente ou branco, oculta por recorte ou máscara ou construída com um recurso que um aplicativo não aceita. Salvar novamente um documento em branco pode transformar um arquivo recuperável em um realmente vazio.

Abra a cópia em um navegador e editor vetorial. Essa comparação é a primeira divisão: visível em um, mas vazio no outro, geralmente significa suporte do aplicativo ou estrutura do documento; vazio em todo lugar aponta mais para área de visualização, pintura, recorte, marcação inválida ou conteúdo ausente.

As verificações são um mapa de diagnóstico, não sete reparos desconexos. Confirme que existe geometria e teste limites, escala, pintura, recorte, efeitos compatíveis e dependências antes de substituir qualquer coisa.

1. Preserve o arquivo e confira se contém dados

Faça uma cópia com outro nome. Confira o tamanho e abra em um editor de texto simples.

Um arquivo de zero bytes ou um documento com apenas um elemento raiz <svg> vazio tem pouco a recuperar dessa cópia. Um arquivo com traçados, grupos, estilos ou um grande bloco de dados codificados não está vazio só porque a tela parece vazia.

Não deduza demais de um tamanho grande. O arquivo pode conter imagem incorporada de alta resolução, estilos repetidos ou dados malformados. O tamanho só indica que vale inspecionar mais.

2. Compare navegador e editor vetorial

Arraste o SVG para um navegador atual e abra a mesma cópia no Inkscape, Illustrator, Figma ou outro editor vetorial.

Um navegador exibir o arquivo não prova que contém traçados vetoriais portáteis. Navegadores renderizam imagens raster incorporadas e conteúdo web que CAD ou editores vetoriais ignoram.

3. Selecione tudo e inspecione os limites

No editor vetorial, use Select All. Procure uma caixa de seleção, coordenadas, largura e altura.

• Uma caixa muito fora da página significa que a arte está fora da tela.
• Uma seleção enorme pode indicar ponto solto, objeto de recorte ou retângulo de fundo.
• Uma caixa normal com arte invisível aponta para pintura, opacidade ou recorte.
• Nenhum objeto selecionável sugere conteúdo incompatível, documento vazio ou falha de importação.

Se os objetos estão fora da tela, mova a seleção para a página ou ajuste a página ao desenho. Evite redimensionar os traçados, a menos que suas dimensões reais também estejam erradas.

4. Compare a arte com o viewBox

Abra o SVG como texto e inspecione o elemento raiz:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

Os quatro números de viewBox são x mínimo, y mínimo, largura e altura, conforme a especificação do sistema de coordenadas SVG. Arte em coordenadas próximas de 10000,10000 não aparece dentro de viewBox="0 0 800 600". Uma dimensão zero ou negativa de viewBox desativa a renderização desse elemento.

Corrija os limites visíveis com base na geometria real. Não cole um viewBox aleatório de outro arquivo. O guia de SVG no tamanho errado explica como viewBox e dimensões da área de visualização interagem quando a arte aparece, mas na escala errada.

5. Confira pintura e visibilidade

Selecione um objeto e inspecione preenchimento e contorno. Estados invisíveis comuns incluem:

• fill="none" sem contorno;
• preenchimento branco sobre tela branca;
• opacity="0", fill-opacity="0" ou stroke-opacity="0";
• display="none" ou visibility="hidden";
• uma classe cuja folha de estilos aplica um desses valores;
• contorno extremamente fino na escala atual.

Coloque temporariamente um retângulo colorido atrás da arte ou atribua um preenchimento forte de teste à cópia de um traçado. Se aparecer, restaure os estilos pretendidos, em vez de deixar a cor de diagnóstico no arquivo final.

Se os preenchimentos continuam visíveis, mas linhas individuais somem após exportar, use o guia de contornos SVG que desaparecem para testar pintura, recorte, escala e aparências incompatíveis sem vetorizar novamente uma boa geometria.

6. Inspecione recursos que o destino pode não aceitar

Procure clipPath, mask, pattern, filter, <image> e <foreignObject> na marcação.

Recortes e máscaras podem ocultar tudo quando seus sistemas de coordenadas ou referências falham; o modelo de renderização SVG coloca recorte, mascaramento, filtragem e composição no fluxo de renderização. Padrões e filtros podem renderizar de maneiras diferentes entre importadores. Um elemento <image> incorpora conteúdo de imagem no contêiner SVG, enquanto <foreignObject> pode conter conteúdo de outro namespace XML, conforme a especificação de conteúdo incorporado SVG.

Se as formas sobrevivem, mas rótulos HTML desaparecem, compare foreignObject com texto SVG nativo e substitua apenas o rótulo que falha.

Se os traçados estão visíveis, mas uma sombra é cortada, diagnostique uma sombra SVG recortada testando separadamente a região do filtro e a área externa de visualização.

Referências também podem falhar. Confira se IDs usados por url(#name) realmente existem e são únicos. Se o SVG depende de imagem, fonte, folha de estilos ou arquivo vinculado externo, movê-lo pode ter quebrado esse recurso.

Para um aplicativo Qt, o guia de renderização SVG no Qt separa verificações de módulos e carregamento de limites de recursos compatíveis. Compare primeiro um pequeno arquivo original e depois inspecione a arte no caminho escolhido de renderização.

Quando um navegador mostra o desenho, mas o CAD não importa nada, procure geometria vetorial comum como <path>, <rect> e <circle>. Um PNG incorporado visível não tem curvas para o CAD usar.

7. Valide ou exporte novamente o arquivo

XML malformado, atributos inválidos e estruturas específicas do exportador podem ser tolerados por um renderizador e rejeitados por outro. Se você tem o desenho original, reabra no aplicativo criador e exporte uma cópia SVG simples ou simplificada. Expanda apenas recursos que o destino não trata e compare o novo arquivo com o original.

Se não tem o original, use um validador SVG/XML ou editor de texto que relate erros de sintaxe. Trabalhe em uma cópia e corrija primeiro o primeiro erro estrutural, porque mensagens posteriores podem ser consequências dele.

Não execute um otimizador na única cópia. A otimização reescreve a estrutura e pode dificultar a recuperação quando o problema ainda não foi entendido.

Quando reconstruir ou vetorizar novamente

Vetorizar novamente é adequado quando o arquivo contém só uma imagem raster incorporada, a estrutura SVG gerada é inutilizável fora de um navegador ou nenhum original editável sobreviveu. Extraia ou localize o raster de maior qualidade e vetorize em traçados reais.

Não é a solução correta para traçados fora da tela, viewBox errado, preenchimentos brancos ou uma máscara incompatível. Esses arquivos já têm geometria, e preservá-la evita perda desnecessária de qualidade.

Se o desenho inteiro é selecionado como uma imagem de pixels ou fica quadriculado em zoom alto, use o diagnóstico de pixels ocultos antes de reconstruir.

Onde o PerfectVector se encaixa

O fluxo de imagem em vetor do PerfectVector serve para o caso apenas raster. Envie o melhor PNG, JPG ou outra imagem compatível e inspecione a prévia vetorial em busca de formas reais, bordas limpas, espaço negativo e traçados manejáveis.

Não repara marcação SVG arbitrária nem recupera recursos externos. Se o arquivo já contém bons traçados, corrija área de visualização, estilos ou recurso incompatível no editor vetorial. Se é apenas raster dentro de um arquivo SVG, reconstruir a arte visível como traçados oferece um vetor portátil, em vez de outro invólucro.

Perguntas frequentes

Por que meu SVG fica em branco no Illustrator, mas aparece no Chrome? O arquivo pode usar um recurso que o navegador aceita, mas o Illustrator não importa, como conteúdo web incorporado, padrão complexo, filtro, máscara ou raster encapsulado. Inspecione a marcação e confira se contém traçados vetoriais comuns antes de exportar novamente uma cópia SVG mais simples.

Como encontrar arte SVG fora da tela? Use Select All e inspecione os limites ou coordenadas da seleção. Se uma caixa aparece longe da página, mova para a página ou ajuste a página ao desenho. Depois atualize o viewBox para corresponder à geometria visível pretendida.

Um SVG pode ser branco e parecer vazio? Sim. Preenchimentos ou contornos brancos somem sobre tela branca. O arquivo também pode usar opacidade zero, display="none" ou visibility="hidden". Teste sobre fundo colorido e inspecione estilos computados.

Por que meu SVG é importado em branco no Fusion ou outro CAD? O arquivo pode conter um bitmap incorporado ou conteúdo web incompatível, em vez de curvas vetoriais. CAD precisa de geometria de traçados que possa importar. Procure <path> e formas relacionadas e confira se o conteúdo visível está dentro de <image> ou <foreignObject>.

Devo converter um SVG em branco para PNG e de volta para SVG? Só se o SVG não tiver geometria vetorial recuperável e a aparência raster for o melhor material original restante. A passagem por PNG destrói a estrutura existente de traçados. Diagnostique primeiro problemas de área de visualização, visibilidade, recorte e suporte.

Fontes

1. W3C — sistemas de coordenadas SVG 2 — Define áreas de visualização, viewBox, unidades e transformações.
2. W3C — modelo de renderização SVG 2 — Documenta recorte, mascaramento, filtragem, composição e ordem de renderização.
3. W3C — conteúdo incorporado em SVG 2 — Define imagens incorporadas e conteúdo externo em SVG.
4. W3C — serviço de validação de marcação — Oferece validação de documentos baseada em padrões para depurar marcação.

Quando o arquivo restante é só pixels dentro de um contêiner SVG, reconstrua a arte como traçados vetoriais editáveis e inspecione a prévia. Quando bons traçados já existem, preserve-os e repare a menor parte problemática do documento.