Por que seu SVG parece pixelado e como corrigir

Um SVG deveria redimensionar de forma limpa; quando mostra bordas em blocos, comece por três causas comuns. O arquivo pode conter pixels reais, um aplicativo pode estar rasterizando sua prévia ou importação, ou um vetor verdadeiro pode apenas ficar desfocado em uma grade minúscula de pixels. Cada causa tem uma correção diferente, e um diagnóstico curto revela qual você está vendo. Este artigo não aborda um logotipo PNG ou JPG que fica pixelado quando ampliado. Esse arquivo nunca foi SVG, e esse problema tem sua própria solução.

Diagnóstico em 30 segundos

• Amplie bastante (500%+) em dois visualizadores. Blocos em todos apontam para conteúdo raster. Se apenas um aplicativo mostra blocos, provavelmente está rasterizando a prévia.
• Abra o SVG em um editor de texto. Uma tag <image> com um longo bloco data:image/png;base64,… significa que seu “vetor” é um bitmap disfarçado.
• Use a verificação do arquivo para decidir. O zoom levanta a suspeita; um elemento <image> ou objeto retangular de imagem confirma pixels incorporados.

Causa 1: há pixels dentro do seu SVG

Essa é a armadilha da imagem incorporada. SVG é um formato contêiner, e a especificação SVG 2 permite que um elemento <image> incorpore ou referencie conteúdo raster. Se precisar distinguir PNG vinculado, dados incorporados ou SVG aninhado, use a conferência de SVG de conteúdo misto. Ferramentas podem usar essa capacidade de várias formas:

• Conversões falsas. Algumas ferramentas de “PNG para SVG” não traçam nada. Colocam seu bitmap em uma tag <image> e devolvem com extensão .svg. Ele redimensiona tão mal quanto o PNG original porque é o PNG original.
• Exportações que rasterizam as partes difíceis. Aplicativos de design exportam o possível como traçados e rasterizam silenciosamente o restante: sombras, desfoques, malhas de gradiente, preenchimentos de imagem. Assim um logotipo fica nítido em toda parte menos em uma curva ou efeito, o mistério “parcialmente pixelado” que enche fóruns de design.
• Conteúdo fotográfico. Uma fotografia não vira traçados limpos, então ferramentas que “convertem” fotos em SVG frequentemente as incorporam ou produzem uma aproximação posterizada. Ferramentas de mapas fazem isso deliberadamente em camadas de sombreamento, o que é legítimo porque sombreamento é de tons contínuos por natureza.
• Contêineres de formato. Um arquivo pode carregar dados vetoriais que um aplicativo lê e outro não. Quando um aplicativo encontra conteúdo que não entende, recorre à prévia raster incorporada, e você vê pixels em um programa enquanto outro mostra vetores limpos.

Como confirmar: abra o .svg em qualquer editor de texto e procure por <image. Um bloco base64 é o culpado. No Inkscape ou Illustrator, clique na região desfocada: se a seleção é um objeto retangular “image”, em vez de traçados, a resposta é a mesma. Essa verificação também identifica SVGs falsos de ferramentas de IA e exportadores e leva menos de um minuto.

A solução: os pixels precisam virar traçados, o que significa realmente vetorizar o conteúdo raster. Passe a imagem original (ou a incorporada) por uma conversão real de imagem para vetor e substitua <image> pelo resultado traçado. Se o conteúdo incorporado é uma fotografia, vetorizar tem seus próprios limites; às vezes a solução honesta é aceitar raster onde raster é adequado.

O sinal está no próprio arquivo

Causa 2: o arquivo está bom, o visualizador está rasterizando

Se um navegador ou Inkscape mostra traçados nítidos enquanto um aplicativo mostra blocos, pare de editar o arquivo. O problema está no pipeline de importação ou prévia desse aplicativo:

• Alguns pipelines de importação rasterizam um SVG no tamanho de importação ou prévia. Ampliar depois essa imagem em cache significa ampliar um bitmap. A correção no aplicativo é importar ou renderizar na resolução de destino.
• After Effects pode rasterizar continuamente camadas vetoriais conforme elas são transformadas; a Adobe documenta a opção Continuously Rasterize para camadas vetoriais. Se apenas a prévia da composição parece ruim, examine a resolução da prévia e essa opção antes de mudar o SVG.
• Illustrator pode mostrar deliberadamente a arte por Pixel Preview. Desative View > Pixel Preview antes de concluir que o próprio traçado está pixelado.
• Miniaturas e prévias. Miniaturas de gerenciadores de arquivos e prévias rápidas são rasterizações de baixa resolução. Não dizem nada sobre o arquivo.

O teste universal: abra o mesmo arquivo em navegador ou Inkscape. Se estiver nítido ali, o SVG está saudável e a solução está nas configurações de importação ou prévia do outro aplicativo.

Para recursos de jogos, confira o fluxo de importação e rasterização SVG do Godot ou o caminho de importação SVG do Unity para seu editor e sistema de interface antes de presumir que o arquivo original não tem traçados vetoriais.

Causa 3: vetor real desfocado em tamanhos pequenos

Ícones vivem em 16 a 24 pixels, e nesse tamanho uma curva matematicamente perfeita precisa cair em uma grade grosseira de pixels. O antisserrilhamento divide os pixels das bordas em tons cinzentos, e o resultado parece “um pouco desfocado”, especialmente em contornos finos e posições de meio pixel. Ampliar mostra bordas vetoriais perfeitamente nítidas, o que confirma que não é a armadilha da imagem incorporada.

As correções são de design: alinhe bordas horizontais e verticais a pixels inteiros no tamanho de destino, mantenha espessuras de contorno em valores de pixels inteiros e prefira conjuntos de ícones desenhados para o tamanho usado. Dados de traçado muito precisos de exportações de ferramentas de design podem piorar o desfoque em tamanhos minúsculos; traçados simplificados renderizam de forma mais previsível.

Causa e solução em resumo

Como manter pixels fora dos SVGs

A prevenção depende principalmente do momento de conversão ou exportação. Antes de confiar em qualquer SVG, faça uma vez a verificação no editor de texto: elementos <path>, bom; blocos <image>, não são vetor. Ao converter, use um conversor que trace em vez de apenas colocar em contêiner e confirme selecionando formas individuais. Ao exportar de uma ferramenta de design, achate ou expanda efeitos como traçados primeiro, pois o que o exportador não consegue expressar como vetor será entregue como pixels. E lembre o que um SVG realmente é: a extensão promete o formato, não o conteúdo.

Como isso funciona com o PerfectVector

O PerfectVector existe no lado certo dessa armadilha: traça sua imagem como traçados genuínos, nunca apenas a coloca em um contêiner. Envie PNG ou JPG, e o resultado são formas que você pode selecionar, recolorir e ampliar continuamente, cada cor em seu próprio objeto editável e nenhum elemento <image> no arquivo. Se acabou de descobrir que seu “SVG” era um bitmap disfarçado, converta corretamente a imagem original e faça a mesma verificação no editor de texto na saída. Ver a diferença uma vez é a forma mais rápida de nunca cair nisso de novo. As primeiras conversões são gratuitas, sem cartão de crédito.

Perguntas frequentes

Por que meu SVG parece pixelado quando amplio? O zoom sozinho não prova que o SVG contém pixels, pois alguns aplicativos rasterizam as prévias. Abra em navegador ou Inkscape e examine o código em busca de <image>, ou selecione a área desfocada e confira se é um objeto de imagem retangular. Se as verificações confirmarem raster incorporado, vetorize esse conteúdo e substitua o elemento de imagem.

Como saber se meu SVG tem uma imagem incorporada? Abra em qualquer editor de texto e procure por <image. Uma longa sequência data:image/png;base64 é um bitmap incorporado ao arquivo. Você também pode clicar na área desfocada no Inkscape ou Illustrator: se ela é selecionada como um objeto retangular de imagem em vez de traçados, está incorporada.

Por que meu SVG fica pixelado em um aplicativo, mas bom no navegador? O aplicativo está rasterizando. Engines de jogos rasterizam SVG no tamanho de importação, prévias do After Effects rasterizam na resolução da composição e alguns aplicativos renderizam imagens incorporadas com interpolação em blocos por padrão. Se navegador ou Inkscape mostra nitidez, o arquivo está bom; ajuste o aplicativo.

Posso corrigir um SVG com imagem incorporada? Sim. Pegue o raster original (ou extraia o incorporado), passe por um vetorizador real e use o resultado traçado no lugar do elemento de imagem. Se o conteúdo incorporado é foto, espere uma aproximação vetorial estilizada, não uma cópia fiel, pois fotos não se reduzem a traçados limpos.

Por que meus ícones SVG ficam desfocados em tamanhos pequenos? Normalmente é desfoque causado pela grade de pixels, não imagem incorporada. Em 16 a 24 pixels, o antisserrilhamento transforma bordas desalinhadas em pixels cinzentos. Alinhe bordas e espessuras de contorno a pixels inteiros no tamanho de destino, e os ícones ficam mais nítidos. Amplie para confirmar que os próprios traçados estão nítidos.

Converter PNG em SVG sempre produz vetores reais? Não. Algumas ferramentas realmente traçam a imagem como traçados; outras apenas colocam o PNG em um contêiner SVG. A saída redimensiona de forma limpa apenas no primeiro caso. Confira tags de imagem em qualquer arquivo convertido e prefira um conversor que mostre formas editáveis no resultado.

Fontes

1. W3C: conteúdo incorporado do SVG 2 — Define o elemento SVG <image> e conteúdo raster em documentos SVG.
2. Adobe Illustrator: visualização de arte — Documenta Pixel Preview e outros modos de exibição.
3. Adobe After Effects: camadas — Documenta a opção Continuously Rasterize para camadas vetoriais.
4. Adobe Illustrator: crie arte perfeita em pixels — Explica alinhamento à grade de pixels para arte de tamanho pequeno.

---

Desconfia de um arquivo com que está trabalhando? Faça o teste de zoom, depois converta a imagem original em SVG real baseado em traçados e compare. Pixels se escondem; traçados não.