Conversor gratuito de SVG para PNG

SVG vs PNG

SVG (Scalable Vector Graphics) é um formato vetorial, marcação XML que descreve formas matematicamente. Um círculo em SVG é «desenhe um círculo de raio R em (x, y) com cor de preenchimento F», instruções, não pixels. O navegador renderiza as instruções no tamanho em que exibe o SVG, então ele permanece nítido em 1x, 2x, 3x e além. PNG (Portable Network Graphics) é um formato raster, uma grade fixa de pixels com valores de cor fixos. PNG é o que você obtém quando «congela» um SVG em uma resolução específica. Converter SVG para PNG chama-se rasterização: escolher uma grade de pixels alvo e renderizar as instruções vetoriais nesse tamanho fixo, após o que o resultado é uma imagem raster normal com todas as restrições de tamanho que isso implica.

SVG foi desenvolvido pelo Grupo de Trabalho SVG do W3C fundado em 1998; SVG 1.0 tornou-se Recomendação W3C em 4 de setembro de 2001; SVG 1.1 seguiu em 14 de janeiro de 2003 e foi a versão dominante durante a década seguinte; SVG 1.1 Segunda Edição chegou em 16 de agosto de 2011; SVG 2 alcançou Candidate Recommendation em 4 de outubro de 2018 mas estagnou, permanece CR em vez de Recomendação completa em 2026. PNG tornou-se Recomendação W3C em 1 de outubro de 1996 e IETF RFC 2083 em março de 1997; o formato está estável desde então.

Por que converter SVG para PNG?

• Clientes de e-mail abandonando o suporte SVG. A Microsoft começou a aposentar o suporte SVG inline no Outlook para web e no novo Outlook para Windows a partir de setembro de 2025, com a implementação concluída em outubro de 2025, os SVG inline agora renderizam como espaço em branco. Anexos SVG ainda funcionam, mas templates de e-mail com estilo inline que anteriormente embutiam logos SVG precisam de fallbacks PNG. A interface web do Gmail renderiza SVG bem; o Apple Mail também; a quebra principal está do lado da Microsoft.
• Plataformas de mídias sociais. Twitter/X, Instagram, Facebook, LinkedIn rejeitam uploads SVG diretamente ou os comprimem e recodificam para PNG/JPEG antes da exibição. Pré-rasterizar nas dimensões preferidas da plataforma (1200x630 para Open Graph, 1080x1080 para Instagram) contorna a conversão automática com perdas deles.
• Geração de ícones de app. Ícones de app iOS devem ser PNG 1024x1024 (listagem App Store) mais vários tamanhos específicos de dispositivo; ícones adaptativos Android renderizam no launcher a 432x432 (108dp em xxxhdpi) com 512x512 para a listagem Play Store; ícones de manifesto PWA tipicamente precisam de 192x192 e 512x512. SVG não é aceito por nenhum desses.
• Impressão sob demanda e prepress. Printful, Redbubble, Society6, RedPrint e a maioria dos serviços de impressão sob demanda requerem PNG (ou PDF) em resoluções específicas, geralmente 300 DPI para o tamanho físico alvo. SVG não é aceito em seus fluxos de upload.
• CMS e apps antigos. Instalações WordPress antigas, ferramentas admin legadas, editores de documentos anteriores ao suporte SVG do navegador, onde quer que «deve ser PNG» seja um requisito rígido.
• Emojis do Discord e similares. O upload de emojis personalizados do Discord requer PNG (ou GIF animado para emojis animados); tamanho recomendado 128x128 com limite de tamanho de arquivo de 256 KB. SVG não é aceito.

Como a conversão funciona no seu navegador

A técnica de rasterização via API Canvas é direta mas tem sutilezas. O pipeline padrão: carregar o SVG como elemento Image via URL Blob (URL.createObjectURL(svgBlob)) ou diretamente como data URI (data:image/svg+xml;base64,...); aguardar o evento onload; criar um canvas nas dimensões de saída desejadas; chamar ctx.drawImage(image, 0, 0, width, height) para rasterizar o SVG no tamanho escolhido; exportar via canvas.toBlob('image/png'). Os renderizadores SVG dos navegadores lidam corretamente com gradientes, máscaras, filtros, texto e a maior parte do conjunto de recursos SVG durante essa rasterização. Três ressalvas importam. Recursos externos falham sob CORS: SVGs que referenciam imagens externas (<image href="https://other-domain.com/photo.jpg">) ou fontes externas podem não carregar se o servidor cross-origin não retornar cabeçalhos CORS apropriados, o canvas torna-se «tainted» e toBlob lança um SecurityError. Embuta imagens como data URI e fontes como @font-face com src em data URI para evitar isso. SVGs contendo tags <script> não executam quando carregados como Image, o decodificador de imagem do navegador retira o contexto de scripting por segurança. Animações SMIL são achatadas em um único quadro em time=0; se o SVG depende de animação para seu estado visual, o PNG rasterizado não o capturará. Diferenças de pixels entre navegadores: Chrome, Firefox e Safari produzem saídas rasterizadas sutilmente diferentes para o mesmo SVG devido a diferenças em seus respectivos renderizadores vetoriais; para ícones de produção, renderize uma vez e entregue o PNG em vez de depender da conversão por navegador em tempo de execução.

Escolhendo a resolução de saída correta

SVG não tem resolução inerente, a escolha é sua. Alvos comuns: ícone de listagem iOS App Store 1024x1024; ícone de listagem Android Play Store 512x512 (com o ícone adaptativo no launcher a 432x432, projetado dentro de uma zona segura 264x264); ícones de manifesto PWA 192x192 e 512x512; favicon historicamente 16x16, 32x32, 48x48 (o favicon.ico moderno agrupa os três tamanhos; a melhor prática moderna entrega icon.svg para navegadores que o suportam mais um fallback apple-touch-icon.png 192x192); card social Open Graph 1200x630; card Twitter 1200x675; quadrado Instagram 1080x1080; emoji Discord 128x128; emoji Slack 128x128; impressão a 300 DPI requer 3x a dimensão em polegadas em pixels (uma impressão de logo de 4 polegadas precisa de 1200x1200). Para renderização de tela com qualidade Retina, mire em 2x o tamanho exibido, um ícone exibido 100x100 deve ser exportado em 200x200 para permanecer nítido em telas Retina.

Como usar este conversor

1. Forneça o SVG. Solte um arquivo .svg na zona de upload, ou cole a marcação SVG bruta na área de texto. Ambos os caminhos funcionam da mesma maneira.
2. Defina as dimensões de saída. Largura e altura em pixels; o toggle de bloqueio de proporção mantém as proporções quando você muda uma dimensão. Máximo 8192x8192 (o limite de tamanho canvas na maioria dos navegadores modernos; algum hardware se limita a 4096 ou 8192).
3. Escolha um fundo. Transparente (padrão, preserva o canal alfa do SVG), branco sólido, preto sólido, ou qualquer cor personalizada. Útil quando o destino não suporta transparência (alguns contextos de impressão legados).
4. Converta e baixe. O botão Converter rasteriza o SVG no tamanho escolhido e mostra a pré-visualização; Baixar salva o PNG no seu dispositivo.

Escopo honesto: o que esta ferramenta faz e não faz

Esta ferramenta rasteriza um único SVG em um único PNG no tamanho escolhido. Ela não gera o conjunto completo de ícones multitamanho que as lojas de apps requerem (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 apenas para iOS), para isso, use uma ferramenta dedicada como RealFaviconGenerator ou App Icon Generator. Não otimiza o PNG resultante (use a ferramenta SVG Optimizer para limpar primeiro o SVG fonte; para otimização PNG use um compressor separado). Não agrupa a saída favicon.ico multitamanho. Não anima, os PNG exportados são de quadro único, mesmo se o SVG tinha animação SMIL. Para geração em lote de muitos tamanhos a partir de um SVG, use uma CLI como sharp-cli (Node.js) ou resvg-cli (Rust); a conversão por tamanho que fazem é a mesma desta ferramenta, apenas scriptável.

Privacidade: por que somente-navegador importa aqui

Arquivos SVG frequentemente contêm ativos de marca proprietários, logos em andamento, ícones de produtos internos ou arquivos fonte fornecidos por designer sob NDA. Serviços de conversão do lado servidor (CloudConvert, Online-Convert, Convertio) sobem seu SVG para a infraestrutura deles onde fica em logs. Esta ferramenta executa todo o pipeline de rasterização no seu navegador via API Canvas, verifique na aba Rede do DevTools enquanto clica em Converter, ou tire a página do ar (modo avião) após carregar e o conversor ainda funciona. Seguro para trabalho de marca não lançado, ícones de produtos internos, arquivos de designer sob NDA ou qualquer SVG que você não queira ver copiado no disco rígido de um estranho.

Perguntas frequentes

Por que converter SVG para PNG em vez de usar SVG diretamente?

Para a maioria dos navegadores modernos, você não precisa. SVG renderiza nativamente em Chrome, Firefox, Safari, Edge e Opera, e é o formato certo para a maioria dos usos na web. Conversão é necessária quando o destino não suporta SVG: a Microsoft aposentou o SVG inline no Outlook web e no novo Outlook para Windows em setembro-outubro de 2025; ícones de app iOS / Android devem ser PNG; serviços de impressão sob demanda requerem PNG; upload de emojis personalizados Discord e Slack em PNG; alguns CMS legados ainda rejeitam uploads SVG. Para esses contextos, você rasteriza uma vez e entrega o PNG.

Em que resolução devo exportar?

Combine com o destino. Listagem iOS App Store: 1024x1024. Play Store Android: 512x512 (ícone adaptativo no launcher: 432x432). Manifesto PWA: 192 e 512. Card social Open Graph: 1200x630. Quadrado Instagram: 1080x1080. Para telas Retina, exporte em 2x o tamanho CSS exibido, um ícone 100x100 deve ser PNG 200x200 para permanecer nítido. Para impressão, 300 DPI significa 300 pixels por polegada exibida (uma impressão de logo de 4 polegadas = PNG 1200x1200). O máximo aqui é 8192x8192, que é o limite canvas do navegador moderno.

Por que meu SVG está faltando partes após a conversão?

Três causas comuns. Recursos externos bloqueados por CORS: se o SVG referencia imagens ou fontes em outro domínio que não retorna cabeçalhos CORS apropriados, o canvas torna-se «tainted» e a exportação as descarta silenciosamente. Embuta imagens como data URI e fontes como @font-face com src em data URI. Scripts dentro do SVG não executam: tags <script> são retiradas pelo modelo de segurança do decodificador de imagem do navegador, o que o script gerar não aparecerá. Animações SMIL renderizam em time=0 (o quadro inicial); o estado visual animado não é capturado. Para SVGs que dependem de JavaScript ou animação, renderize primeiro em um navegador real e tire uma captura de tela, ou use Puppeteer em headless.

Preserva transparência?

Sim quando «Transparente» é selecionado como fundo, o PNG retém o canal alfa do SVG, com pixels semitransparentes totalmente preservados. Escolha uma cor sólida (branco, preto, personalizada) quando o destino não suporta transparência ou quando você precisa de uma cor de fundo específica embutida (alguns contextos de impressão legados).

Posso gerar vários tamanhos a partir de um SVG?

Não em um clique, esta ferramenta produz um único PNG por conversão. Para geração de conjuntos de ícones para app stores (a dúzia de tamanhos que iOS e Android requerem), use uma ferramenta dedicada como RealFaviconGenerator (web), App Icon Generator (web), ou uma CLI como sharp-cli (Node.js) ou resvg-cli (Rust), a conversão por tamanho que realizam é a mesma rasterização estilo Canvas, apenas scriptada em muitos tamanhos.

Meus arquivos SVG são enviados?

Não. A rasterização roda inteiramente no seu navegador via API Canvas. Seu SVG e o PNG resultante nunca cruzam a rede, verifique na aba Rede do DevTools enquanto clica em Converter, ou tire a página do ar (modo avião) após carregar e o conversor ainda funciona. Seguro para trabalho de marca não lançado, ícones de produtos internos, arquivos fonte de designer sob NDA ou qualquer SVG que você não queira ver copiado no disco rígido de um estranho.

Ferramentas relacionadas