Conversor SVG para PNG

Sobre Conversão de SVG para PNG

Converter SVG para PNG transforma uma descrição vetorial independente de resolução em uma imagem raster de resolução fixa. SVG usa XML para armazenar primitivas geométricas — caminhos, círculos, gradientes, texto — que escalam nitidamente em qualquer tamanho; PNG armazena uma grade finita de pixels. O processo de conversão é chamado de rasterização: o navegador analisa a marcação SVG, executa qualquer CSS embutido e consulta de fontes, calcula a geometria nas dimensões de saída escolhidas e grava os dados de pixel resultantes em um contêiner PNG, JPEG ou WebP. Esta ferramenta executa todo o pipeline localmente via API Canvas, suporta fundos transparentes, dimensões personalizadas até 4096 pixels e um slider de qualidade para saídas com perda. Veja também o nosso PNG para SVG e WebP para PNG/JPG.

Por que converter SVG para PNG — SVG não é melhor?

SVG supera PNG em todos os lugares onde é suportado: escala infinitamente, o arquivo geralmente é menor para ícones e logotipos, você pode animar caminhos com CSS, e leitores de tela podem extrair texto para acessibilidade. Mas o suporte a SVG falha em muitos lugares do mundo real. Clientes de email (Outlook, Gmail em modo escuro, Apple Mail móvel) frequentemente removem anexos SVG ou bloqueiam SVG inline completamente. WebView antigo do Android, apps de leitura Kindle, área de transferência do Word/PowerPoint, uploads para redes sociais (Twitter/X, Instagram, LinkedIn), drivers de impressora e ferramentas de design de produtos como Etsy ou Printful exigem entrada raster. Converta para PNG sempre que cruzar em qualquer um desses ambientes — mantenha o SVG mestre para tudo que o suporta.

Como o PNG lida com transparência comparado ao JPEG e WebP?

PNG-24 suporta um canal alfa de 8 bits, permitindo 256 níveis de transparência por pixel — perfeito para logotipos, ícones e elementos de UI que precisam se mesclar sobre fundos arbitrários. JPEG não suporta transparência alguma; qualquer pixel SVG transparente vira a cor de fundo que você especificou, geralmente branco. WebP suporta o mesmo alfa de 8 bits do PNG mas tipicamente com tamanho de arquivo 25-50% menor graças ao seu algoritmo de compressão mais novo. Para o raster transparente menor, escolha WebP se seus espectadores usam navegadores modernos (Chrome 32+, Safari 16+, Firefox 65+); para compatibilidade máxima (incluindo clientes de email antigos e software de design), escolha PNG. Nunca use JPEG para gráficos com regiões transparentes a menos que especificamente queira um fundo colorido.

Em que resolução devo exportar meu SVG?

Corresponda à sua maior tela alvo. Para heróis web em telas Retina/HiDPI, renderize em 2x ou 3x o tamanho em pixels CSS: um herói de 600px precisa de um PNG de 1800px para se manter nítido em um iPhone 3x. Para ícones de app, siga as diretrizes da plataforma: iOS requer mestre de 1024px, Android 512px, favicons geralmente multi-tamanho 16/32/48/180/192/512px. Para impressão, multiplique polegadas por 300 DPI: um logotipo de 4 polegadas impresso em 300 DPI precisa de PNG de 1200px. Para emoji do Slack e adesivos do Discord, PNG de 256px é o limite. Quando em dúvida, escolha o tamanho maior — reduzir é barato, mas ampliar um PNG muito pequeno introduz desfoque que nenhum software pode corrigir.

Por que meu SVG com fontes incorporadas renderiza com texto errado?

SVGs referenciam fontes por nome de família (font-family="Helvetica") em vez de incorporar dados de fonte. Durante a rasterização o navegador busca Helvetica em seu sistema; se faltar, o navegador substitui por uma alternativa (frequentemente Times ou DejaVu Sans), e o PNG rasterizado fica com a fonte errada. Soluções em ordem de confiabilidade: (1) converta texto para caminhos no seu editor SVG antes de exportar do Illustrator ou Inkscape — cada glifo se torna geometria vetorial independente das fontes instaladas; (2) incorpore a fonte com @font-face dentro do SVG; (3) garanta que a mesma fonte esteja instalada no sistema fazendo a conversão. A conversão para caminho é o padrão ouro para distribuição porque o PNG ficará idêntico em cada dispositivo.

Posso converter centenas de SVGs para PNG em lote?

Para conversões um a um, esta ferramenta de navegador é rápida o suficiente — cada renderização leva menos de um segundo. Para centenas ou milhares de SVGs (bibliotecas de ícones, tokens de sistemas de design), use uma abordagem de linha de comando: Inkscape expõe 'inkscape --export-type=png --export-width=512 icon.svg' que se programa em loop for Bash; 'magick icon.svg icon.png' do ImageMagick é ainda mais simples mas seu renderizador SVG é mais fraco em documentos complexos. Para pipelines Node.js, a biblioteca 'sharp' é o padrão de produção — usa librsvg por baixo e é significativamente mais rápida que Chrome headless. Sistemas de design modernos usam plugins Storybook ou Style Dictionary para regenerar fallbacks raster a cada build.

Por que meu PNG exportado tem bordas serrilhadas ou curvas pixeladas?

Aliasing acontece quando você renderiza em resolução muito baixa — o caminho matemático da curva é quantizado para uma grade de pixels grosseira, produzindo artefatos visíveis de escada. Soluções: (1) exporte em 2x ou 3x o tamanho de tela alvo para dar ao navegador mais pixels para antialiasing; (2) garanta que seu SVG tenha 'shape-rendering="geometricPrecision"' ou dependa do padrão 'auto' em vez de 'crispEdges' que deliberadamente desativa antialiasing; (3) verifique se nenhum traço está em 1px em um limite de pixel não inteiro, o que causa renderização de meio pixel e desfoque visual. Para saída perfeita por pixel, alinhe a geometria SVG a coordenadas inteiras em sua ferramenta de design antes de exportar.