Pular para o conteúdo principal
ToolsByUs

SVG para PNG

SVG para PNG renderiza arte vetorial em bitmap em qualquer tamanho de pixel, no seu navegador. O desenho é re-rasterizado pelo próprio motor vetorial do navegador no tamanho que você pedir, então um export em 4× é genuinamente nítido em 4×, e não uma cópia ampliada de uma renderização menor.

Só local
Largura
Escala
Formato
Código SVG
249 B5 linhasLin. 1, Col. 1
Visualizar512 × 512 · original 64×64

Gerando…

Como funciona o SVG para PNG?

Um SVG não tem pixels. Tem um viewBox, um conjunto de formas e um conjunto de regras para transformar essas formas em pixels — e as regras são aplicadas por quem o renderiza, no tamanho em que for pedido. Esse é todo o valor da conversão: o navegador rasteriza os vetores na sua resolução alvo, então 1024 pixels de um desenho de 64 pixels são genuinamente 1024 pixels de detalhe, e não uma ampliação de 16× de uma renderização de 64 pixels.

A questão do tamanho, nem sempre com resposta

Um desenho pode declarar width="100%", declarar apenas um viewBox, ou não declarar nada. Os três são válidos, e nenhum diz ao renderizador que tamanho em pixel usar. Então o viewBox é lido quando não há atributos utilizáveis, a proporção é tirada dele, e quando não há nada para ler, a ferramenta diz qual valor inventou em vez de chutar em silêncio.

O que não sobrevive à viagem, e por quê

O desenho é carregado como imagem, o que o torna um documento isolado. Scripts dentro dele nunca rodam — essa é a propriedade de segurança que torna seguro oferecer isto em primeiro lugar — e nada que precise de um contexto de navegação também funciona:

  • Referências externas não carregam. <image href="photo.png">, um @import num <style>, uma web font de um CDN: tudo descartado. Um logo que depende de uma fonte remota renderiza numa fonte de fallback.
  • foreignObject renderiza de forma inconsistente. Alguns motores desenham o HTML dentro dele, outros o deixam em branco.
  • Propriedades personalizadas de CSS da página não chegam até ele. currentColor resolve para a cor inicial, que geralmente é preto.

O remédio para o primeiro é inlinar os assets no SVG antes de converter — uma mudança de uma linha na maioria dos pipelines de build, e uma edição manual nos demais casos.

Escolhendo um formato

PNG para tudo o que tem transparência ou cor chapada, que é a maior parte da arte vetorial. WebP quando o arquivo vai para um site e você quer o arquivo menor — o suporte é universal hoje. JPEG apenas quando o fundo é opaco e o desenho tem caráter fotográfico, porque não tem canal alfa e um canvas transparente codificado como JPEG sai preto.

SVG

<svg viewBox="0 0 64 64" width="64" height="64">…</svg>

PNG

drawing-512.png
512 × 512 pixels
transparent background
9.4 KB

Quais opções e casos-limite o SVG para PNG suporta?

Referência técnica e opções
ParâmetroTipoPadrãoComportamento e casos-limite
Largurapixels512A largura de saída. A altura segue a proporção do próprio desenho, tirada do viewBox — então um desenho 2:1 com 512 de largura tem 256 de altura.
Escala1× | 2× | 3× | 4×1×Multiplica a largura. Útil para um asset de retina: 512 em 2× são 1024 pixels, que é o que um nome de arquivo @2x deveria conter.
FormatoPNG | WebP | JPEGPNGPNG mantém a transparência e é sem perdas. WebP é menor na mesma qualidade. JPEG não tem canal alfa algum, então um fundo transparente é pintado de cor sólida antes da codificação.
Fundotransparente | cortransparenteTransparente para PNG e WebP. Qualquer outro valor pinta a cor primeiro — o que é exigido pelo JPEG, e útil quando o desenho assume uma página clara atrás dele.
Tamanho intrínsecodetectadoatributos, depois viewBoxLido de width/height, com fallback para o viewBox. Quando nenhum existe, a ferramenta avisa, porque o tamanho usado passa a ser uma invenção, e não o do desenho.
Assets externosnão carregadosdescartadosImagens vinculadas, web fonts e folhas de estilo importadas não resolvem dentro de um contexto de imagem. Inlino-as no SVG antes se o desenho depender delas.
Scriptsnunca executados—Script dentro do SVG não é executado. Isso é uma propriedade de segurança, e não uma limitação, e é o motivo de o desenho ser carregado como imagem em vez de injetado na página.
Teto de saídapixels4096 × 4096Acima de cerca de 16 megapixels, a alocação do canvas falha num celular em vez de ficar apenas lenta, então o export é recusado com uma mensagem em vez de produzir um arquivo em branco.

Perguntas frequentes

O PNG fica nítido em 4×?

Sim, e é essa a diferença em relação a um redimensionamento. O SVG é entregue ao navegador no tamanho alvo em pixels, então o motor vetorial rasteriza cada curva nessa resolução. Ampliar uma renderização menor interpolaria entre pixels existentes e produziria bordas moles; aqui, surge detalhe novo. A única coisa que limita é como o desenho foi escrito — um traço de exatamente uma unidade fica mais fino à medida que o canvas cresce.

Minha web font não renderizou. Por quê?

Porque o desenho é carregado como imagem, e uma imagem é um documento isolado: ela não pode buscar font, imagem nem folha de estilo de lugar nenhum. Um @font-face remoto é descartado e o texto cai numa fonte do sistema. Para manter o lettering, converta o texto em outlines no seu editor, ou incorpore a fonte como um data URI base64 dentro do SVG antes de converter.

Por que meu SVG transparente fica preto na saída JPEG?

Porque JPEG não tem canal alfa. Um canvas novo é transparente, e um pixel transparente não tem nada para codificar, então sai preto — a reclamação mais comum sobre todo conversor de SVG para JPEG. A opção de fundo aqui pinta uma cor primeiro por exatamente esse motivo. Se você precisa de transparência, use PNG ou WebP.

Em que tamanho devo exportar?

O tamanho em que será exibido, multiplicado pelo device pixel ratio das telas em que vai aparecer. Um ícone de 24 pixels mostrado numa tela 2× quer um arquivo de 48 pixels. Uma ilustração hero que ocupa 800 pixels CSS numa tela retina quer 1600. Exportar em 4096 “por segurança” custa banda em todo carregamento de página e não compra nada que um arquivo do tamanho certo já não tenha.

A ferramenta diz que inventou um tamanho. O que isso significa?

Que o SVG não tem width, nem height, nem viewBox, então não há como saber qual é a sua forma. Assume-se 512×512 para que o export produza algo em vez de falhar, e a interface diz qual valor foi usado, para que você mesmo defina a largura. Adicionar um viewBox à origem é a correção de verdade e cabe em uma linha.

Meu desenho é enviado?

Não. O SVG é codificado como data URL, renderizado pelo canvas do seu próprio navegador e codificado para PNG na aba — o painel Network não mostra requisição nenhuma. Isso importa para os desenhos que as pessoas convertem aqui, que com frequência são logos e assets de marca ainda não lançados.

Equipe ToolsByUs · Como verificamos nossas ferramentas