SVG para PNG

SVG para PNG

PNG é o formato certo quando um SVG precisa ser entregue como bitmap: capturas para lojas de apps, banners README, imagens OG, mockups de UI ou gráficos de email. Este conversor renderiza o SVG no seu navegador, aplica o fator de escala escolhido e preserva o canal alfa para que ícones transparentes e avatares redondos não ganhem um bloco branco.

Como exportar um SVG como PNG

  1. 1

    Carregue seu SVG

    Envie um arquivo ou cole diretamente a marcação SVG. CSS inline e blocos <style> são renderizados pelo navegador.

  2. 2

    Defina a escala

    Escolha um fator de escala de 1x a 10x. O tamanho de saída vem da width, height ou viewBox do SVG antes da escala.

  3. 3

    Confira a prévia transparente

    A prévia mantém a transparência alfa. Se precisar de fundo sólido, adicione essa forma de fundo dentro do SVG antes de exportar.

  4. 4

    Baixe o PNG

    Salve image.png a partir do canvas no navegador. Sua marcação SVG não é enviada a um servidor.

Tamanhos de saída comuns e onde usar

Destino Tamanho PNG típico Observações
Ícone mestre de app (iOS/Android) 1024 × 1024 Use um SVG quadrado; as lojas geralmente exigem fundo opaco
Cartão OG/social 1200 × 630 Coloque o fundo da marca no SVG antes de exportar
Cabeçalho README ou documentação 1280-1600 de largura Mantenha a transparência para funcionar nos temas claro e escuro do GitHub
Recurso para slide ou apresentação 1920 de largura Exporte em 2x se for projetado ou ampliado
Cabeçalho de email ou imagem hero 600-1200 de largura Comprima o resultado e mantenha abaixo de 200 KB quando possível

Por que um SVG pode parecer diferente depois da exportação

  • Dimensões fracionárias. Exportar em 33.5 px força arredondamento subpixel. Use números inteiros, de preferência múltiplos de 8.
  • Fontes ausentes. Se o SVG referencia uma fonte indisponível no navegador, o navegador substitui a fonte e o kerning pode mudar. Converta texto em caminhos para a exportação mais confiável.
  • Referências externas. Um <image href="..."> apontando para uma URL remota pode ser bloqueado ou contaminar o canvas. Incorpore o recurso como base64 antes de converter.
  • Filtros e sombras. Desfoques e sombras projetadas são calculados em unidades de usuário, então uma exportação em 3x pode deixar as sombras mais suaves. Ajuste os valores de filtro no SVG de origem se necessário.
  • Sem tamanho explícito. Se um SVG não tem width, height nem viewBox, a ferramenta usa 300 × 150 px antes de aplicar o fator de escala.

Dicas rápidas

  • Exporte em 2x ou 3x para telas high-DPI e deixe o CSS ou o layout reduzir o PNG.
  • Mantenha transparência em ícones e logos; adicione primeiro um retângulo ao SVG se o destino exigir uma cor sólida.
  • Passe o PNG por um compressor de imagens para remover metadados e reempacotar a paleta.
  • Para artes muito grandes, reduza o fator de escala antes de baixar, pois PNG armazena cada pixel.

Perguntas frequentes

A ferramenta usa um fator de escala. Defina primeiro width, height ou viewBox no SVG e depois escolha a escala que produz o tamanho PNG desejado.

Sim, ela usa o renderizador SVG do navegador. Para um resultado mais consistente, incorpore imagens externas e converta textos importantes em caminhos antes de exportar.

SVG são instruções de desenho; PNG é uma grade de pixels. Uma exportação de 4000 × 4000 px armazena 16 milhões de pixels com dados RGBA, então reduzir a escala pode diminuir muito o arquivo.

Não. O arquivo ou a marcação colada é lido e renderizado localmente pelo HTML canvas no seu navegador.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas