Skip to content

Conversor de SVG para PNG

Solte um SVG ou cole o código, escolha um tamanho, baixe um PNG. Nada sai do seu navegador.

O SVG é independente de resolução — o mesmo arquivo renderiza nítido em 16 pixels ou em 16.000 — mas boa parte da web ainda não sabe lidar com ele. Clientes de e-mail o removem, CMSes mais antigos recusam o upload, pipelines de favicon querem bitmaps de tamanho fixo, e um designer entregando materiais a uma equipe fora do design muitas vezes precisa de algo que simplesmente abre em qualquer lugar. É aí que você achata um vetor em raster, e como a origem não tem resolução fixa, é você quem escolhe as dimensões de saída. Esta ferramenta renderiza seu SVG com o rasterizador do próprio navegador em um canvas exatamente do tamanho que você especificar e então codifica um PNG — com a transparência preservada — sem que o arquivo saia da sua máquina.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. Carregue seu SVG

    Arraste um arquivo .svg (até 8 MB) para a área de soltar, clique para escolher um ou cole o código SVG bruto na caixa de texto. Em qualquer caso, a ferramenta lê os atributos width, height e viewBox para detectar o tamanho intrínseco.

  2. Defina o tamanho de saída

    Digite uma largura ou altura exata em pixels — com a proporção travada, a outra dimensão acompanha automaticamente — ou use os botões 1x, 2x ou 4x para multiplicar o tamanho intrínseco. Para telas retina, 2x é a escolha usual.

  3. Escolha um fundo

    Transparente (o padrão) mantém o canal alfa do SVG intacto no PNG. Escolha Branco ou uma cor personalizada se a imagem vai ficar em algum lugar que não lida com transparência, como um fluxo só de JPEG ou certos clientes de e-mail.

  4. Pré-visualize e baixe

    O resultado renderiza ao vivo sobre um fundo quadriculado, para você ver exatamente quais áreas permanecem transparentes. Clique em Download PNG — o arquivo é gerado localmente pelo codificador de canvas do seu navegador e nunca é enviado a lugar nenhum.

Frequently asked questions

Meu SVG é enviado para um servidor?
Não. O SVG é transformado em uma URL de blob local, renderizado pelo motor de SVG do próprio navegador em uma imagem fora da tela, desenhado em um canvas e codificado em PNG com canvas.toBlob() — tudo em JavaScript na sua máquina. Não há nenhuma requisição de upload.
Por que meu SVG está renderizando em um tamanho estranho?
Muitos SVGs — especialmente exportações de ícones — carregam apenas um viewBox e nenhum atributo width/height. Navegadores exibindo esse arquivo em um <img> recaem em um tamanho padrão (geralmente 300×150, às vezes 0×0), e é por isso que conversores podem produzir saídas com tamanhos esquisitos. Esta ferramenta analisa a fonte do SVG diretamente: se width e height estão presentes, ela os usa; se existe apenas um viewBox, ela adota a proporção do viewBox com uma largura padrão de 512px; na falta de ambos, recai em 512×512. Você sempre pode sobrescrever o tamanho detectado antes de exportar.
Por que o texto do meu SVG fica diferente no PNG?
Elementos <text> do SVG são renderizados com as fontes que o navegador rasterizador tiver, e no contexto de <img> referências a webfonts externas não são buscadas — então a tipografia cuidadosamente escolhida recai em uma fonte genérica do navegador. Se a tipografia exata importa, converta o texto em contornos (texto em caminhos) na sua ferramenta de design antes de exportar o SVG; caminhos rasterizam de forma idêntica em qualquer lugar.
Por que imagens embutidas ou CSS externo não aparecem?
Quando um navegador rasteriza um SVG dentro de um elemento <img>, ele trata o arquivo como um documento independente: referências externas — folhas de estilo vinculadas, webfonts e tags <image> apontando para outras URLs — não são buscadas, e conteúdo de outra origem pode contaminar o canvas e bloquear a exportação por completo. A solução é tornar o SVG autocontido: embuta o CSS e as imagens raster como URIs data:.
A transparência é preservada?
Sim. O PNG tem um canal alfa completo, e com o fundo definido como Transparente, toda área que seu SVG deixa sem pintura permanece transparente na saída. A pré-visualização quadriculada mostra exatamente onde. Escolha Branco ou uma cor personalizada apenas quando quiser deliberadamente achatar o fundo.
Que escala devo usar para telas retina / de alta densidade?
Exporte em 2x o tamanho em que a imagem será exibida — um logotipo mostrado em 200×80 pixels CSS deve ser um PNG de 400×160. Telas de alta densidade concentram cerca de quatro pixels físicos em cada pixel CSS, então uma exportação em 1x fica borrada nelas. 4x só vale a pena para usos próximos de impressão; para exibição normal na web, isso só quadruplica o tamanho do arquivo de novo.

About

Como os navegadores rasterizam SVG em contexto de imagem

Carregar um SVG através de um elemento <img> (ou desenhá-lo em um canvas) coloca o motor de SVG do navegador em um modo restrito: scripts dentro do arquivo nunca executam, manipuladores de eventos são ignorados e recursos externos — fontes, folhas de estilo, imagens referenciadas — não são buscados. O documento é renderizado como uma imagem pura e autocontida. Essa restrição é exatamente o que torna um conversor no lado do cliente como este seguro para usar com qualquer SVG que você encontrar: até um arquivo malicioso é tratado apenas como pixels, nunca como código. É também a origem da principal limitação da ferramenta — qualquer coisa que o SVG puxe de fora dele simplesmente não vai aparecer.

Escolhendo dimensões: rasterize grande, reduza depois

Ampliar um vetor não custa nada, mas ampliar um raster sempre o degrada. Então o fluxo de trabalho sensato é rasterizar uma vez no maior tamanho que qualquer consumidor vai precisar — digamos, 4x o tamanho nominal do design — e produzir variantes menores reduzindo esse PNG mestre, que é uma operação quase sem perdas. Fazer o caminho inverso (exportar pequeno e depois ampliar) joga fora detalhes que o SVG teria fornecido de graça. Como o PNG usa compressão sem perdas, o único custo real de um tamanho de exportação generoso são bytes em disco.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.