Como converter SVG para PNG (e quando deve fazer isso)

O SVG é perfeito na web, mas muitos lugares não o aceitam: plataformas sociais, clientes de e-mail e diversos serviços de impressão preferem uma imagem raster. Converter SVG para PNG leva apenas um minuto e, se você escolher o tamanho de exportação certo, ele ficará tão nítido quanto o original. Um aviso importante: o PNG não volta para SVG sem perda, então mantenha seu arquivo original. Se você já sabe o que precisa, vá direto para o conversor de SVG para PNG; caso contrário, este guia explica quando converter, qual tamanho em pixels exportar para web, retina e impressão, e como manter seu fundo transparente intacto.

SVG vs. PNG em um minuto

SVG é um formato vetorial: um conjunto de instruções de desenho (caminhos e formas) que renderiza com nitidez em qualquer tamanho, seja 16px ou 16.000px, mantendo o arquivo pequeno para logotipos, ícones e arte geométrica. É editável em um editor de texto e até suporta animação.

PNG é um formato raster: uma grade fixa de pixels. Nítido no tamanho nativo, borrado quando ampliado. Destaca-se em gradientes, sombras e detalhes fotográficos, além de renderizar de forma previsível em todos os dispositivos.

O principal equívoco das pessoas: converter SVG para PNG não "perde" qualidade no momento da exportação. Os pixels são gerados pela matemática vetorial, portanto, uma exportação do tamanho correto é perfeita pixel a pixel. O custo real é que o PNG fica travado em uma resolução para sempre.

Regra prática: mantenha o SVG como sua fonte de verdade e exporte um PNG sempre que o destino exigir esse formato.

Quando você deve converter SVG para PNG

Você converte quando o destino não consegue lidar com SVG, não porque o PNG seja de alguma forma melhor. Na prática, essas situações surgem constantemente:

• Redes sociais. Instagram, X/Twitter, Facebook e LinkedIn não aceitam uploads de SVG. Converta para PNG ou JPG antes de postar.
• E-mail. A maioria dos clientes de e-mail tem suporte limitado ou nenhum suporte para SVG. Use PNG para imagens de newsletters e assinaturas de e-mail.
• Favicons e ícones de aplicativos. Navegadores modernos aceitam favicons em SVG, mas os ícones de toque da Apple e navegadores mais antigos ainda precisam de versões em PNG. Nosso guia sobre como criar um favicon a partir de um logotipo mostra o processo completo.
• Serviços de impressão. Muitos serviços de impressão de produtos fotográficos (adesivos, cartões de visita, produtos de merchandising) aceitam PNG, mas não SVG.
• Software legado e alguns CMSs. Ferramentas mais antigas e fluxos de trabalho de documentos podem renderizar SVG incorretamente ou não renderizá-lo de todo; o PNG é a opção segura. Algumas versões do Office e fluxos de trabalho de documentos mais antigos lidam com SVG de maneira inconsistente.

E quando não converter: em sites. Lá, o SVG permanece nítido em todos os tamanhos, pode ser estilizado e animado com CSS e, muitas vezes, pesa menos que um PNG grande. Se o único destino for o seu próprio site, pule a conversão inteiramente.

Fonte para os pontos sobre suporte de plataforma acima: ConverterUp.

Como converter SVG para PNG no Tool Cloud (passo a passo)

1. Abra a página do conversor de SVG para PNG.
2. Faça upload do seu SVG. Você pode carregar vários arquivos de uma vez se estiver convertendo um conjunto.
3. Converta e baixe o PNG. Para obter um tamanho exato em pixels, defina os campos de largura e altura (ou use a opção de resolução, que varia de 72 a 1200) antes de converter; há também uma alternância para manter a proporção. Os arquivos enviados são excluídos automaticamente após o processamento.

Como o conversor aceita uma largura e altura explícitas, você não precisa alterar o viewport do seu SVG nem redimensionar nada em um editor de design: basta decidir o tamanho de saída (próxima seção) e digitar os valores.

Converter SVG para PNG sem uma ferramenta web

Você não precisa de um conversor online para isso. Todas as ferramentas de design exportam PNG diretamente:

• Figma, Illustrator, Affinity, Inkscape: use a caixa de diálogo de exportação, escolha PNG e defina o tamanho da exportação em pixels (é aqui que você aplica o fator de escala abaixo). Esta é a melhor opção se você tiver o arquivo fonte, pois pode converter texto em contornos e remover retângulos de fundo indesejados na mesma etapa.
• De um site: clique com o botão direito no SVG (ou no arquivo SVG em si, depois de aberto em uma aba do navegador) e use "Salvar imagem como" — geralmente você receberá o SVG, então exporte ou converta a partir daí.
• Último recurso, sem nenhuma ferramenta: abra o SVG em um navegador, dê zoom até o máximo possível enquanto ele permanecer nítido e tire uma captura de tela. Você perderá a transparência, a menos que use uma ferramenta de captura que a suporte, e as bordas não ficarão tão limpas quanto em uma exportação real. Bom para um mockup rápido, mas não para produção.

Qual tamanho em pixels você deve exportar? (Guia de fator de escala)

Escolha o tamanho de exportação multiplicando as dimensões do viewport do SVG por um fator de escala: um SVG com viewport de 200×200 exportado em 1x resulta em um PNG de 200×200px, em 2x resulta em 400×400px e em 3x resulta em 600×600px. No conversor, essa mesma matemática se resume à largura e altura que você digita. Em seguida, ajuste a escala ao destino:

Para ícones e logotipos comuns na web, 2x é o ponto ideal na prática: um arquivo em 2x cobre tanto telas padrão quanto retina, já que reduz o tamanho suavemente em displays padrão. Se uma especificação exigir literalmente um tamanho fixo, 1x correspondente ao viewport é a resposta. Para impressão, vá de 3x a 4x; isso fornece pixels suficientes para itens impressos pequenos, como adesivos ou cartões de visita, enquanto impressões grandes precisam de proporcionalmente mais.

Não há penalidade de qualidade ao exportar maior do que o necessário, porque os pixels vêm da matemática vetorial, não de esticar. O único inconveniente é o tamanho do arquivo, que cresce ao quadrado da escala: um PNG em 4x tem dezesseis vezes mais pixels que um em 1x. Portanto, escolha seu tamanho com base no destino do arquivo, não na ideia de que "quanto maior, mais seguro".

Mantendo a transparência (e quando usar um fundo branco)

O canal alfa do PNG preserva nativamente a transparência do SVG, que é exatamente o que você deseja para logotipos e ícones que precisam ficar sobre diferentes fundos. Exporte em qualquer escala e a transparência será preservada intacta.

Há uma pegadinha clássica aqui, no entanto. Um SVG pode parecer ter um fundo branco em um navegador quando, na verdade, você está vendo a página atrás dele. Antes de converter, teste-o em um fundo escuro. Se a forma ainda for legível corretamente, você tem transparência real; se vir uma caixa branca, seu SVG tem um retângulo de fundo embutido.

Quando preencher um fundo em vez disso: algumas plataformas e ferramentas mais antigas não lidam bem com transparência. Para esses uploads, um fundo sólido (geralmente branco) é a escolha mais segura.

E se o seu SVG contiver um retângulo de fundo que você não quer, remova-o no seu arquivo de design antes de exportar. Isso é uma correção no arquivo de design, não uma configuração de conversão.

Pegadinhas que quebram exportações de SVG

A maioria das conversões de SVG para PNG funciona bem. As que não funcionam geralmente falham de uma destas três formas:

• Fontes. O texto em SVG é renderizado usando as fontes disponíveis na máquina de renderização, conforme a Especificação SVG 1.1. Se o rasterizador não tiver sua fonte, você terá substituição de texto ou layout quebrado. A solução é simples: converta o texto em caminhos/contornos na sua ferramenta de design antes de exportar o SVG. Esta é a causa mais comum da pergunta "por que meu logo está errado no PNG?".
• Corte. Alguns conversores cortam a saída com base na viewport declarada do SVG, e o conteúdo do SVG pode se estender além dela, então tudo fora disso pode ser perdido. Verifique se nada importante fica fora do canvas antes de exportar.
• Filtros avançados. A renderização de filtros e gradientes SVG pode variar entre os renderizadores. Rasterizadores no servidor os tratam de forma diferente dos navegadores; por exemplo, o ImageMagick usa o librsvg quando disponível e recorre a um renderizador interno menos potente caso contrário. Os próprios gradientes são rasterizados de forma limpa em qualquer escala (MDN), mas cadeias complexas de filtros podem parecer diferentes da sua pré-visualização no navegador. Se isso acontecer, simplifique os efeitos ou pré-rasterize-os na sua ferramenta de design.

Conversão em lote de um conjunto de ícones

Conjuntos de ícones vivem ou morrem pela consistência. Uma mistura de tamanhos, ou alguns ícones com fundo transparente e outros com fundo branco, parece quebrado na interface de um produto ou aplicativo, mesmo que cada arquivo individual esteja ok.

Então decida duas coisas desde o início:

1. Uma escala. 2x para web é a escolha usual.
2. Uma política de fundo. Geralmente transparente, a menos que o destino não suporte alfa.

Depois aplique ambos a todos os arquivos. A maneira prática: faça upload de vários SVGs de uma vez no conversor e exporte todo o lote com a mesma largura e altura, em vez de converter arquivos um por um e perder a consistência.

Se você precisar de vários tamanhos a partir de um único SVG original depois (digamos, 16, 32 e 512px), reexporte do SVG em cada tamanho, ou passe o PNG por um redimensionador de imagens — não aumente a resolução de um PNG pequeno, pois isso apenas o deixa borrado.

Perguntas frequentes, respondidas em um só lugar

A conversão de SVG para PNG perde qualidade?

Não, se você exportar no tamanho certo. Os pixels do PNG são gerados a partir da matemática vetorial, então o resultado é exatamente tão nítido quanto o SVG naquela resolução. A única perda real é a flexibilidade: o PNG fica fixo em um tamanho de pixel para sempre.

Posso converter PNG de volta para SVG?

Não de forma limpa. O rastreamento aproxima a grade de pixels em vez de restaurar os caminhos originais, então o resultado nunca é sem perdas — logotipos de cores sólidas são rastreados de forma aceitável, enquanto fotos e gradientes ficam mal. Mantenha seu SVG original como arquivo mestre e você não precisará de rastreamento em primeiro lugar.

Qual fundo devo usar?

Transparente para qualquer coisa que fique sobre fundos variados, algo que o canal alfa do PNG lida nativamente. Use apenas um fundo sólido (geralmente branco) quando o destino não suportar transparência.