Como Converter SVG para PNG (Navegador, Linha de Comando e Código)

SVG é um formato vetorial — escala perfeitamente para qualquer tamanho. PNG é um formato raster — uma grade fixa de pixels, mas é o que a maioria dos aplicativos, clientes de e-mail e redes sociais aceita. A conversão parece simples, mas há escolhas importantes: em que resolução exportar, como lidar com transparência e o que fazer com fontes externas.

No navegador

Arraste ou cole um arquivo SVG no conversor, defina a largura alvo e baixe o PNG. A ferramenta renderiza o SVG usando o próprio motor do navegador — o mesmo caminho de renderização de quando você vê um SVG em uma página web — e depois exporta para uma tela PNG.

É a opção mais rápida para conversões avulsas e lida corretamente com a maioria dos SVGs do mundo real.

Linha de comando: Inkscape

Inkscape é o renderizador SVG mais preciso fora de um navegador — usa o mesmo motor de renderização (cairo) e trata corretamente recursos SVG como filtros, máscaras e texto em caminho.

# Instalar
brew install inkscape           # macOS
sudo apt install inkscape       # Ubuntu

# Converter para PNG a 96 DPI (resolução de tela padrão)
inkscape input.svg --export-filename=output.png

# Exportar em uma largura específica em pixels
inkscape input.svg --export-filename=output.png --export-width=512

# Exportar em 2× (high-DPI / retina)
inkscape input.svg --export-filename=output.png --export-width=512 --export-dpi=192

# Exportar uma área específica (x:y:largura:altura em unidades SVG)
inkscape input.svg --export-filename=output.png --export-area=0:0:100:100

Para servidores sem interface, adicione --export-type=png:

inkscape input.svg --export-type=png --export-filename=output.png --export-width=1024

Linha de comando: ImageMagick

O suporte SVG do ImageMagick depende do librsvg ou Inkscape por baixo (dependendo da instalação). É conveniente para processamento em lote.

# Instalar
brew install imagemagick        # macOS
sudo apt install imagemagick    # Ubuntu

# Conversão básica
convert input.svg output.png

# Converter em uma densidade específica (maior = saída maior)
convert -density 150 input.svg output.png

# Redimensionar para largura específica
convert input.svg -resize 512x output.png

# Converter em lote todos os SVGs de uma pasta
for f in *.svg; do convert "$f" "${f%.svg}.png"; done

Atenção: O renderizador SVG interno do ImageMagick é básico e pode não renderizar SVGs complexos (filtros, gradientes, máscaras) corretamente. Para arquivos complexos, use o Inkscape:

inkscape "$f" --export-filename="${f%.svg}.png" --export-width=512

Linha de comando: rsvg-convert (librsvg)

rsvg-convert é leve e rápido, adequado para SVGs simples sem filtros complexos.

# Instalar
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Ubuntu

# Converter a 96 DPI
rsvg-convert input.svg -o output.png

# Converter em 2× resolução (192 DPI para retina)
rsvg-convert -d 192 -p 192 input.svg -o output.png

# Converter para uma largura específica
rsvg-convert -w 512 input.svg -o output.png

Node.js: sharp

sharp pode rasterizar arquivos SVG usando libvips.

npm install sharp

const sharp = require('sharp');

// Converter SVG para PNG com 512px de largura
sharp('input.svg')
    .resize(512)
    .png()
    .toFile('output.png')
    .then(info => console.log(`Saída: ${info.width}×${info.height}`));

Conversão em lote em múltiplos tamanhos:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './icons/svg';
const outputDir = './icons/png';

fs.readdirSync(inputDir)
    .filter(f => f.endsWith('.svg'))
    .forEach(file => {
        const name = path.basename(file, '.svg');
        for (const size of [16, 32, 64, 128, 256, 512]) {
            sharp(path.join(inputDir, file))
                .resize(size)
                .png()
                .toFile(path.join(outputDir, `${name}-${size}.png`));
        }
    });

Python: cairosvg

cairosvg usa o mesmo motor de renderização cairo que o Inkscape.

pip install cairosvg

import cairosvg

# Converter para PNG na resolução padrão
cairosvg.svg2png(url='input.svg', write_to='output.png')

# Converter em uma largura específica
cairosvg.svg2png(url='input.svg', write_to='output.png', output_width=512)

# Converter a partir de uma string
svg_content = open('input.svg').read()
cairosvg.svg2png(bytestring=svg_content.encode(), write_to='output.png', output_width=512)

Guia de resolução

SVG é independente de resolução. Ao exportar para PNG, você deve escolher um tamanho em pixels:

Para uso web, exporte no dobro do tamanho CSS de exibição e sirva o PNG com srcset usando 2x.

Lidando com transparência

SVGs suportam transparência nativamente. PNGs suportam canal alpha completo. A conversão preserva a transparência — você obtém um PNG com fundo transparente, não branco, desde que o SVG não tenha um retângulo de fundo explícito.

Para forçar fundo branco:

# ImageMagick: achatar para branco antes de converter
convert -background white -alpha remove input.svg output.png

// sharp: achatar com fundo branco
sharp('input.svg')
    .flatten({ background: { r: 255, g: 255, b: 255 } })
    .png()
    .toFile('output-white-bg.png');

Pontos principais

• Para conversões avulsas, a ferramenta no navegador é a mais rápida.
• Para uso na linha de comando, Inkscape dá a renderização mais precisa de SVGs complexos.
• Para processamento em lote no Node.js, sharp é rápido e lida bem com a maioria dos SVGs.
• Para processamento em lote no Python, cairosvg usa o mesmo renderizador que o Inkscape.
• Exporte em 2× o tamanho CSS de exibição para telas retina/high-DPI.
• PNG preserva transparência — não é necessário adicionar fundo branco a menos que você queira.