O SVG é um formato vetorial muito usado em logotipos, ícones, diagramas, ilustrações e elementos de páginas da internet. Diferentemente de uma imagem rasterizada, como JPEG ou PNG, ele não guarda apenas uma grade de pixels. O arquivo descreve formas, linhas, cores e outros elementos usando texto e instruções matemáticas.
Essa característica permite ampliar a imagem sem a mesma perda de nitidez que ocorre em uma fotografia. Porém, também cria situações específicas de incompatibilidade. Um SVG pode não abrir, aparecer vazio, perder fontes, trocar cores, mostrar apenas parte do desenho ou apresentar um resultado diferente em cada aplicativo.
Na maioria dos casos, o problema não está na ideia do formato vetorial, mas em uma falha no arquivo, em um recurso não suportado ou na forma como o SVG foi exportado. Este guia mostra como investigar essas situações sem depender de tentativas aleatórias.
Como o SVG funciona na prática
SVG é a sigla de Scalable Vector Graphics, ou gráficos vetoriais escaláveis. Seu conteúdo costuma ser escrito em XML, uma linguagem estruturada por elementos e atributos. Um elemento pode representar um círculo, um caminho, um retângulo, um texto ou um grupo de objetos.
Um caminho, conhecido como path, é uma sequência de instruções que define linhas e curvas. O atributo fill controla o preenchimento, enquanto stroke define o contorno. Também podem existir gradientes, máscaras, filtros, transparência, estilos incorporados e referências a outros arquivos.
O navegador ou editor precisa interpretar todas essas instruções para montar a imagem. Se uma tag estiver incompleta, uma referência estiver quebrada ou um recurso não for compatível, o resultado pode ser parcial ou completamente diferente do esperado.
Principais sintomas de um SVG problemático
Observar o sintoma ajuda a limitar as possíveis causas. Um arquivo que não abre apresenta um tipo de falha diferente de uma imagem que abre, mas perde uma sombra ou uma fonte.
| Sintoma | Causas comuns | Primeiro teste |
|---|---|---|
| O arquivo não abre | Extensão incorreta, XML inválido, arquivo incompleto ou conteúdo que não é realmente SVG | Abrir uma cópia em um navegador e conferir o conteúdo como texto |
| A imagem aparece vazia | Dimensões inadequadas, viewBox ausente, conteúdo fora da área visível ou elementos transparentes | Verificar as dimensões e o atributo viewBox |
| Cores ou efeitos mudam | Filtros, modos de mesclagem, perfis de cor ou recursos não suportados | Testar o arquivo em outro navegador ou editor |
| Texto troca de aparência | Fonte ausente, fonte não incorporada ou substituição automática | Converter o texto em contornos quando a edição não for mais necessária |
| Apenas parte do desenho aparece | Máscara, recorte, grupo, referência externa ou camada com problema | Desagrupar uma cópia e remover efeitos por etapas |
Quando o arquivo SVG não abre
Confirme se o arquivo é realmente um SVG
A extensão .svg não garante que o conteúdo esteja correto. Um arquivo pode ter sido renomeado por engano, baixado de forma incompleta ou salvo com outra extensão. Em alguns casos, o sistema mostra uma extensão conhecida, mas o conteúdo é uma página HTML, uma mensagem de erro ou um arquivo compactado.
Faça uma cópia e abra o arquivo em um editor de texto simples. Um SVG normalmente começa com uma declaração XML ou com a tag <svg. Não é necessário que todos os arquivos tenham exatamente o mesmo início, mas o conteúdo deve apresentar uma estrutura coerente de elementos SVG.
Se aparecerem mensagens de erro, código HTML ou texto ilegível de um formato binário, talvez o download esteja errado. Baixe o arquivo novamente ou peça ao remetente uma nova exportação.
Verifique se o XML está bem formado
XML bem formado é um documento com tags abertas e fechadas corretamente, aspas completas nos atributos e uma hierarquia válida. Por exemplo, um elemento aberto dentro de outro precisa ser fechado antes do elemento externo. Um caractere especial inserido sem a codificação adequada também pode interromper a leitura.
Uma edição manual aparentemente pequena pode causar o problema. Apagar uma aspas, alterar um sinal de menor ou maior ou colar um trecho de outro arquivo pode tornar o SVG inválido. Se o erro começou depois de uma edição, compare a cópia atual com a versão anterior.
Observe o tamanho e a origem do arquivo
Um SVG muito pequeno pode estar vazio ou conter apenas uma estrutura sem desenho. Já um arquivo excepcionalmente grande pode incluir imagens incorporadas, muitos filtros, milhares de pontos ou dados repetidos. Isso não significa automaticamente que esteja quebrado, mas aumenta a chance de lentidão e incompatibilidade.
Arquivos baixados de sistemas de armazenamento, aplicativos de mensagem ou formulários podem ser renomeados, comprimidos ou alterados durante o envio. Sempre que possível, compare o tamanho do arquivo original com o arquivo recebido.
Por que um SVG abre, mas fica vazio
Uma tela em branco não prova que o arquivo perdeu todo o conteúdo. O desenho pode estar fora da área de visualização ou ter dimensões que o programa não interpreta como esperado.
Dimensões e viewBox
O atributo width define uma largura e height define uma altura. O atributo viewBox estabelece o sistema de coordenadas interno que será exibido. Ele costuma ter quatro valores: posição horizontal, posição vertical, largura interna e altura interna.
Quando o viewBox não cobre os objetos desenhados, parte ou todo o conteúdo pode ficar fora da área visível. Valores muito grandes, negativos ou incompatíveis com os caminhos também podem causar uma imagem aparentemente vazia.
Uma correção comum é abrir uma cópia em um editor vetorial e ajustar a área da prancheta ao conteúdo. Outra opção é criar uma nova tela e copiar os objetos para dentro dela, preservando uma versão original para comparação.
Objetos transparentes ou escondidos
O desenho pode estar presente, mas com opacity igual a zero, preenchimento transparente ou uma máscara que elimina sua visibilidade. Também é possível que uma camada esteja oculta ou que a cor do objeto seja igual à cor do fundo.
Para testar, selecione todos os objetos em uma cópia e aplique temporariamente uma cor sólida, remova transparências e desative máscaras e filtros. Se o desenho reaparecer, reative cada recurso individualmente para localizar o causador.
Diferenças entre navegador, editor e conversor
Nem todo programa implementa o SVG da mesma forma. Navegadores costumam lidar bem com os recursos mais comuns, mas podem tratar efeitos avançados de maneira diferente. Editores vetoriais podem preservar informações próprias do aplicativo que outros programas ignoram.
Um conversor também pode interpretar o arquivo e gerar uma nova imagem com regras próprias. Ao converter para PNG, por exemplo, o desenho deixa de ser vetorial e passa a depender da resolução escolhida. Ao converter de volta para SVG, não é possível recuperar automaticamente toda a estrutura original.
O teste mais útil é abrir o mesmo arquivo em mais de um ambiente. Se ele falha em todos, a suspeita recai sobre o próprio arquivo. Se funciona em um programa, mas não em outro, provavelmente há uma diferença de suporte ou de interpretação.
Fontes, textos e caracteres especiais
Texto em SVG pode continuar sendo texto editável ou ser convertido em contornos. Quando permanece como texto, o programa precisa encontrar a mesma fonte usada na criação. Se ela não estiver instalada, será usada uma fonte substituta, alterando largura, alinhamento, espaçamento e aparência.
Esse problema aparece com frequência em logotipos, títulos e arquivos enviados para impressão. A solução mais segura para uma arte final é converter o texto em curvas ou contornos. Isso transforma cada caractere em formas vetoriais, mas impede a edição simples do texto e pode aumentar o número de pontos do arquivo.
Caracteres especiais também merecem atenção. A codificação define como acentos, símbolos e outros caracteres serão armazenados. Um arquivo salvo com uma codificação inadequada pode exibir letras trocadas ou gerar erro em determinados programas.
Filtros, máscaras e efeitos que causam resultados inesperados
Sombras, desfoques, brilhos, máscaras e modos de mesclagem deixam a arte mais elaborada, mas são fontes frequentes de incompatibilidade. O SVG pode conter referências a um filtro definido em outra parte do documento. Se essa referência estiver quebrada, o efeito desaparece ou o objeto inteiro deixa de ser renderizado.
Uma máscara usa uma forma para controlar quais áreas de outro objeto ficam visíveis. Um recorte, também chamado de clip path, limita a área exibida. Quando a posição ou o sistema de coordenadas desses recursos não coincide com o objeto, o resultado pode parecer cortado, deslocado ou invisível.
Para preparar uma versão mais compatível, duplique o arquivo e simplifique a cópia. Remova filtros, expanda aparências quando o editor oferecer essa opção e substitua transparências complexas por formas mais simples. Preserve o original porque essas operações podem dificultar futuras alterações.
Referências externas e imagens incorporadas
Alguns SVGs não são totalmente independentes. Eles podem apontar para fontes, imagens rasterizadas, folhas de estilo ou outros arquivos. Se o caminho apontar para uma pasta local ou para um endereço que não está disponível, parte do desenho não será carregada.
Uma referência relativa depende da posição do arquivo. Mover o SVG sem mover os recursos associados pode quebrar os caminhos. Uma referência absoluta pode funcionar no computador de quem criou a arte, mas falhar em outro dispositivo por apontar para uma pasta privada.
Para compartilhar um arquivo, prefira incorporar imagens quando o programa permitir. Também é importante verificar se o SVG realmente contém a imagem, em vez de apenas apontar para ela. Quando o objetivo for uma arte leve para a web, avalie se a imagem incorporada deve ser mantida ou convertida separadamente para PNG ou WebP.
Como reduzir um SVG sem destruí-lo
Otimizar um SVG significa remover dados desnecessários e simplificar sua estrutura, não apagar recursos indiscriminadamente. Informações de edição, nomes de camadas, pontos ocultos, estilos repetidos e metadados podem aumentar o tamanho do arquivo.
Antes de otimizar, crie uma cópia do original. Depois, confira se a versão reduzida mantém dimensões, cores, textos, transparências e proporções. Um arquivo menor não é necessariamente melhor se perdeu um detalhe importante ou deixou de funcionar no navegador usado pelo público.
- Remova objetos ocultos que não serão reutilizados.
- Elimine pontos duplicados ou excessivos com cuidado.
- Prefira estilos consistentes em vez de atributos repetidos quando o editor oferecer essa opção.
- Confira se filtros e máscaras continuam apontando para os identificadores corretos.
- Teste a imagem depois da otimização em pelo menos um navegador e um editor.
Quando converter o SVG para outro formato
O SVG é adequado quando você precisa ampliar, editar ou manter formas nítidas em diferentes tamanhos. Porém, nem todo fluxo de trabalho precisa de um arquivo vetorial. Uma fotografia incorporada, uma imagem com efeitos complexos ou uma publicação que aceita apenas formatos rasterizados pode funcionar melhor como PNG ou WebP.
Ao converter para um formato rasterizado, escolha a largura e a altura de acordo com o uso final. Um arquivo para um ícone pequeno não precisa ter a mesma dimensão de uma arte destinada a uma apresentação. Se a resolução for baixa, haverá perda de nitidez ao ampliar.
Para várias imagens, o Redimensionar imagens em lote da TopWebP pode ajudar a padronizar dimensões de arquivos convertidos. Primeiro resolva eventuais falhas no SVG original. Depois, gere as versões rasterizadas e confira se o fundo, as transparências e as proporções ficaram corretos.
Um processo seguro de diagnóstico
Investigar um SVG por etapas evita alterar muitas coisas ao mesmo tempo. O procedimento abaixo funciona tanto para arquivos baixados quanto para artes exportadas por um editor.
- Faça uma cópia do arquivo original e não trabalhe diretamente sobre ela.
- Abra a cópia em um navegador para verificar se o problema é geral ou específico de um programa.
- Confira extensão, tamanho e conteúdo básico em um editor de texto.
- Verifique dimensões, viewBox, camadas, visibilidade, preenchimentos e contornos.
- Desative temporariamente fontes, filtros, máscaras e referências externas.
- Teste novamente depois de cada mudança, registrando qual ajuste alterou o resultado.
- Exporte uma versão simples e compare com a arte original antes de substituir o arquivo.
Se o arquivo for importante, peça também uma nova exportação ao criador. Muitas vezes, uma versão gerada com opções como incorporar fontes, incluir imagens e expandir efeitos resolve o problema sem exigir edição manual do código.
Cuidados ao exportar SVG
Na exportação, escolha um perfil voltado para SVG padrão ou para a web quando essa opção estiver disponível. Perfis específicos de um aplicativo podem incluir recursos que só aquele programa entende.
Defina a área de exportação com atenção. Exportar a página inteira pode incluir objetos fora da arte, enquanto exportar apenas a seleção pode cortar sombras ou elementos que ultrapassam os limites do objeto principal.
Se o arquivo será usado em vários dispositivos, priorize formas simples, fontes convertidas em contornos quando necessário e referências incorporadas. Em seguida, abra a versão exportada fora do programa de origem. O fato de a imagem funcionar no editor que a criou não garante que funcionará em todos os destinos.
Perguntas frequentes
Por que meu SVG não abre no navegador?
O arquivo pode estar incompleto, ter XML inválido, usar uma extensão incorreta ou conter recursos que o navegador não consegue interpretar. Abra uma cópia como texto e procure a estrutura <svg>. Também teste o arquivo em outro navegador para separar um problema do documento de uma limitação específica.
O que fazer quando o SVG aparece como uma tela branca?
Verifique o viewBox, as dimensões, a posição dos objetos e a visibilidade das camadas. O conteúdo pode estar fora da área exibida ou com transparência total. Em uma cópia, aplique uma cor sólida aos objetos e desative máscaras e filtros para identificar a causa.
Por que a fonte do SVG muda em outro computador?
O arquivo provavelmente usa uma fonte que não está instalada no outro computador. Instalar a mesma fonte pode resolver, mas a opção mais segura para uma arte final é converter o texto em contornos. Faça isso apenas em uma cópia, pois o texto deixará de ser facilmente editável.
Por que as cores do SVG ficam diferentes?
Diferenças podem surgir por perfis de cor, transparências, modos de mesclagem, filtros ou pela interpretação de cada programa. Compare o arquivo em um navegador e em um editor. Para uma versão compatível, simplifique efeitos e confirme as cores em uma exportação de teste.
Um SVG pode conter vírus?
Como o SVG é um arquivo baseado em texto, ele pode conter elementos ativos ou referências externas dependendo da origem e do contexto em que é aberto. Baixe arquivos apenas de fontes confiáveis, mantenha o navegador atualizado e evite abrir documentos desconhecidos em editores com permissões amplas.
É possível corrigir um SVG editando o código?
Sim, quando o problema é simples, como uma tag sem fechamento, uma aspas ausente ou um atributo incorreto. Porém, faça uma cópia antes e altere uma coisa por vez. Sem familiaridade com XML e SVG, pode ser mais seguro reexportar o desenho em um editor vetorial.
Por que o SVG fica diferente depois de convertido para PNG?
A conversão rasteriza o desenho, ou seja, transforma formas vetoriais em pixels. O tamanho escolhido, o fundo, a transparência, as fontes e o suporte aos efeitos influenciam o resultado. Compare a largura e a altura da exportação com o uso final para evitar perda de nitidez.
Quando devo usar PNG ou WebP no lugar de SVG?
Use PNG ou WebP quando o destino não aceitar SVG, quando a imagem for uma fotografia ou quando os efeitos vetoriais não forem interpretados corretamente. O SVG continua sendo mais conveniente para logotipos, ícones e ilustrações que precisam se adaptar a vários tamanhos.
O que fazer se apenas um programa apresenta o erro?
Verifique se o programa está atualizado e teste o arquivo em outro editor ou navegador. Se ele funcionar em outros ambientes, procure uma opção de exportação mais compatível ou simplifique filtros, máscaras, fontes e referências externas. O arquivo pode estar válido, mas usar um recurso não suportado pelo programa específico.
Use a ferramenta relacionada
Processe seus arquivos diretamente no navegador, de graça e sem enviá-los ao servidor do TopWebP.
