O que faz
Esta ferramenta transforma código SVG ou um arquivo .svg em uma imagem PNG, JPG ou WebP. Cole a marcação, solte um arquivo, escolha uma escala ou uma largura exata e baixe o bitmap. A renderização acontece no seu navegador, então ícones, logos e diagramas nunca saem da sua máquina.
É útil sempre que um lugar não aceita SVG: ícones de apps, imagens para redes sociais, apresentações de slides, documentos, assinaturas de e-mail ou softwares mais antigos. Você tem uma pré-visualização ao vivo sobre um fundo quadriculado, para ver exatamente quais partes são transparentes.
Como usar
- Cole o código
<svg>no editor, clique em Enviar arquivo para abrir um arquivo ou arraste um para a página. Exemplo carrega um pequeno logo. - Escolha o Tamanho: 1× usa as dimensões do próprio SVG, 2×–4× as multiplicam. Ou digite uma Largura personalizada em pixels; a altura acompanha a proporção.
- Escolha o Formato: PNG para saída sem perdas com transparência, JPG para fotos e compatibilidade, WebP para arquivos pequenos.
- Escolha o Fundo: transparente, branco ou qualquer cor.
- Clique em Baixar. A linha abaixo da pré-visualização mostra o tamanho final em pixels, o formato e o tamanho do arquivo.
Como o tamanho é calculado
A ferramenta olha o elemento raiz <svg>. width e height em px, pt, mm, cm, in ou em são convertidos para pixels. Se estiverem ausentes ou forem porcentagens, são usadas a largura e a altura do viewBox. Em seguida, a escala ou a largura personalizada escolhida é aplicada, e o SVG é reescrito com tamanhos explícitos em pixels para que todo navegador o desenhe do mesmo jeito.
Exemplo
Um ícone com viewBox="0 0 24 24" e sem width nem height vira um PNG de 24 × 24 em 1×. Em 4×, vira 96 × 96, e com uma largura personalizada de 512 vira um PNG de 512 × 512 adequado para ícone de loja de apps, ainda perfeitamente nítido porque é renderizado a partir de vetores em vez de ser ampliado.
Dicas
- XML inválido é informado com o número da linha, para você pular direto para o problema.
- Imagens raster incorporadas (
<image href="data:...">) funcionam; links externos não. - O texto usa as fontes instaladas no seu computador. Para resultados idênticos pixel a pixel em qualquer lugar, converta o texto em contornos na sua ferramenta de design antes.
- A maior saída possível é limitada pelo tamanho de canvas do navegador, cerca de 16.000 pixels por lado.
Perguntas frequentes
› O SVG é enviado para algum lugar?
Não. O seu navegador desenha o SVG em um canvas e salva o resultado. O código e a imagem ficam no seu dispositivo.
› Como consigo um PNG mais nítido?
Escolha a escala 2×, 3× ou 4×, ou digite uma largura exata. SVG é um formato vetorial, então renderizar em tamanho maior dá bordas nítidas em telas de alta densidade. 2× é um bom padrão para telas retina.
› Por que algumas imagens ou fontes não aparecem na saída?
Por segurança, os navegadores não carregam arquivos externos (imagens vinculadas, web fonts, CSS) quando um SVG é desenhado como imagem. Incorpore as imagens como data URLs e converta o texto em caminhos, ou use fontes do sistema.
› Posso manter o fundo transparente?
Sim. Escolha Transparente com saída PNG ou WebP. O JPG não tem transparência, então as áreas transparentes são preenchidas com branco ou com a cor escolhida.
› Meu SVG não tem largura nem altura. Que tamanho é usado?
A ferramenta lê o viewBox e usa a largura e a altura dele. Se não houver nem tamanho nem viewBox, ela usa o padrão do navegador de 300 × 150 e avisa.