Problemas de transparência de SVG para PNG

Este guia trata do diagnóstico dos resultados. Para converter, veja SVG para PNG com fundo transparente.

Ver branco nem sempre significa perder transparência

Abra o PNG em um editor que mostre transparência ou coloque-o sobre um fundo colorido. O visualizador pode exibir branco atrás dos pixels transparentes. Se o branco fizer parte da imagem, procure retângulos opacos, formas preenchidas ou imagens incorporadas no SVG.

SVG para PNG não remove esses elementos. Edite o SVG original quando possível. O Criador de fundo transparente é uma operação separada de recorte rasterizado e exige revisão.

Não há interruptor de transparência

O conversor recebe um SVG e oferece largura, altura e compressão PNG. Áreas já transparentes podem ser mantidas sem opções Preserve Transparency ou Alpha Channel. Não há apagador de cor nem seletor PNG-8/PNG-24.

Confira bordas e elementos ausentes

Casos Especiais

Confira cada efeito no PNG: renderizadores SVG podem produzir pixels diferentes. Uma foto incorporada mantém seu fundo opaco até que essa imagem seja editada. A opacidade de um caminho não apaga um retângulo branco abaixo.

SVG com Imagens Raster Incorporadas

Se o SVG contiver imagens raster:

• Partes raster mantêm a transparência original
• Partes vetoriais convertem normalmente
• Verificar que as imagens incorporadas têm transparência

Efeitos de Transparência Complexos

Para SVGs com:

• Efeitos de desfoque
• Sombras projetadas
• Modos de mesclagem

Estes podem converter de forma diferente. Testar e ajustar conforme necessário.

Elementos Semi-Transparentes

SVGs com valores de opacity:

• Compare a opacidade renderizada com o SVG original.
• Pode aumentar o tamanho do arquivo
• Verificar precisão visual após conversão

Testando Transparência

Faça estas verificações no PNG baixado. Um quadriculado desenhado na origem é composto de pixels; o do visualizador é uma ajuda. Compare pelo menos dois fundos. O exemplo HTML deve ser usado na sua própria página de teste.

Método de Teste Rápido

1. Abrir o PNG em um editor de imagens
2. Procurar o fundo de tabuleiro de xadrez (transparente)
3. Adicionar uma camada colorida atrás
4. Verificar se o gráfico parece correto

Teste no Navegador

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="Teste de transparência">
</div>

Verificar que nenhuma caixa branca aparece.

Otimizando PNG Transparente

Comece pelas dimensões necessárias. A compressão PNG sem perdas muda o esforço de codificação, não quais pixels são transparentes. Reduzir a paleta em outro editor pode economizar bytes e alterar gradientes; redimensionar remove ou reamostra pixels.

Guarde uma cópia original, mude um ajuste por vez e compare as versões em fundos claros e escuros. Não há economia fixa de 20–50% ou 40–80% para todos os gráficos. Se o destino aceitar WebP, compare uma exportação WebP separada.

Altere uma coisa por vez

Guarde o SVG e mude uma propriedade ou dimensão antes de comparar em fundos claros e escuros. Os campos aceitam até 8192 px por lado. A compressão PNG muda o esforço de codificação, não a intensidade do alfa ou a qualidade.

Confira dimensões e margens separadamente do alfa

Um logo transparente pode parecer errado se o desenho ocupar pouco espaço na tela. Confira o viewBox do SVG e a posição do desenho no editor de origem. Ajuste a margem lá; os campos do conversor redimensionam dentro de um retângulo e não editam margens da tela.

Para um recurso 2×, dobre as dimensões de exibição mantendo a proporção. Exporte e confira cada tamanho. logo@2x.png é uma convenção de nomes, não uma configuração que crie detalhes.

<img src="logo.png" srcset="logo@2x.png 2x" alt="Logo da empresa">

Os dois arquivos devem existir no site. Confira tamanho e fundo reais: o código não adiciona transparência. Se houver halos nos dois tamanhos, volte a verificar as bordas da origem em vez de ampliar repetidamente.

Perguntas frequentes

Mais compressão corrige as bordas?

Não. Confira a arte original e as dimensões.

Posso corrigir uma pasta inteira aqui?

Não. É um SVG por tarefa. Corrija as fontes em um editor e converta cada arquivo separadamente.