Por que um SVG não tem tamanho até você convertê-lo
Muita gente pergunta como converter SVG para PNG "sem perder qualidade", e a pergunta contém um mal-entendido que vale esclarecer primeiro. Um SVG não tem qualidade a perder. Ele não tem pixel nenhum.
Vetores descrevem, pixels armazenam
Um SVG é uma descrição de formas (curvas, preenchimentos, texto) em um sistema de coordenadas sem tamanho fixo em pixels. Um PNG é uma grade fixa de pixels. Converter SVG para PNG, portanto, sempre significa escolher um tamanho, e o resultado é nítido em qualquer tamanho que você escolher.
Abra um SVG em um editor de texto e você encontrará instruções: vá até este ponto, faça uma curva até aquele, preencha com esta cor. Nada diz quantos pixels de largura o desenho tem. O navegador decide isso na hora de exibir, e pode decidir diferente a cada vez.
O que viewBox, width e height realmente significam
Três atributos no elemento raiz controlam o tamanho. O viewBox define o sistema de coordenadas: "este desenho vai de 0 a 240 na horizontal e de 0 a 160 na vertical". Os atributos width e height, se existirem, sugerem um tamanho de exibição padrão. Muitos SVGs têm só o viewBox, alguns têm só width e height, e uns poucos não têm nenhum.
Este conversor lê os que estiverem presentes, calcula um tamanho intrínseco do jeito que um navegador faria e o usa como base 1×. Se nenhum for declarado, ele recorre a 1.024 pixels para que você ainda receba uma imagem utilizável.
Por que "sem perder qualidade" é a pergunta errada
Como o SVG pode ser renderizado em qualquer tamanho a partir das mesmas instruções, um PNG de 4.000 pixels é exatamente tão nítido quanto um de 400: o renderizador simplesmente desenha mais detalhe. O único jeito de perder qualidade é renderizar pequeno e ampliar o PNG depois. A solução é escolher o tamanho final aqui, na hora da conversão, e nunca ampliar o PNG.
O que este conversor de SVG para PNG faz
Esta ferramenta lê seus arquivos SVG no navegador, remove tudo que é executável, renderiza cada um no tamanho que você escolher com o próprio motor do navegador e devolve PNGs sem perdas com a transparência intacta, individualmente ou em um ZIP.
O mesmo renderizador do seu navegador
Conversores do lado do servidor usam uma biblioteca separada (librsvg, Inkscape, ImageMagick), e cada uma tem lacunas: um filtro que não suporta, uma fonte que substitui, um gradiente que desenha um pouco diferente. O PNG que você recebe pode não bater com o SVG que você viu.
Aqui a renderização é feita pelo Blink, Gecko ou WebKit (o navegador que você estiver usando) desenhando o SVG em um canvas. Se o SVG aparece certo no seu navegador, o PNG vai ficar igual, porque é literalmente o mesmo desenho.
Scripts removidos, nada enviado
SVG é XML e pode conter elementos <script>, manipuladores onload e HTML embutido. Um arquivo de origem desconhecida não é algo para abrir sem cuidado. Antes de renderizar, o conversor remove scripts, atributos de evento e blocos foreignObject, e renderiza o resultado dentro de um elemento de imagem que, de qualquer forma, não consegue executar código. Duas camadas, ambas locais.
Nada é enviado em momento algum. O painel Rede das ferramentas de desenvolvedor do seu navegador fica vazio enquanto um lote é convertido.
Como converter SVG para PNG em 3 passos
Solte seus arquivos SVG
Arraste um ou mais arquivos .svg para a área tracejada, ou clique para procurar. Até 10 por vez no desktop. Cada linha mostra uma prévia ao vivo do vetor: os navegadores exibem SVG nativamente, então o que você vê é o que será renderizado.
Escolha o tamanho e o fundo
Em Configurações de conversão, escolha Escala (1×, 2×, 3× ou 4× do tamanho próprio do SVG) ou Largura (uma predefinição ou qualquer largura em pixels; a altura segue a proporção). Depois escolha um fundo: transparente por padrão, ou branco, preto ou qualquer cor para achatar.
Baixe os PNGs ou um ZIP
Clique em Converter. Cada arquivo mostra as dimensões de saída e o tamanho do PNG. Baixe um a um, ou clique em Baixar tudo para um ZIP com os nomes originais e a extensão .png.
Solte até 10 arquivos SVG. Eles são lidos localmente e nunca enviados.
Escolha uma escala ou digite uma largura, depois um fundo transparente ou sólido.
Baixe cada PNG separadamente ou tudo em um ZIP.
Escolhendo o tamanho de saída certo
Como o tamanho é uma escolha, ajuda saber para que serve cada opção. Dois modos cobrem quase todos os casos.
1×, 2×, 3×: acompanhando a densidade da tela
Um monitor comum mostra um pixel por ponto CSS. Uma tela Retina ou HiDPI mostra dois; a maioria dos celulares modernos mostra três. Um ícone de 32 pontos na tela precisa, portanto, de um PNG de 32 pixels para o primeiro, 64 para o segundo e 96 para o terceiro. Esse é todo o significado de 1×, 2× e 3×.
Trabalhos de web e apps geralmente exportam o mesmo SVG nas três escalas. Solte o arquivo uma vez, converta em 1×, mude a configuração, converta de novo; ou simplesmente exporte em 3× e deixe a plataforma reduzir.
Uma tabela de tamanhos para destinos comuns
Favicons: 16, 32 e 48 pixels, melhor feitos com a ferramenta PNG para ICO a partir de um PNG de 512 pixels. Ícones de app: 1024 pixels para as lojas, depois o gerador de conjunto de ícones. Avatares de redes sociais: de 400 a 800 pixels. Imagens Open Graph: 1200 × 630. Anúncios em marketplaces: normalmente 2000 pixels no lado maior.
Largura personalizada para impressão e marketplaces
Para impressão, parta do tamanho físico a 300 DPI: uma página A4 tem 2.480 pixels de largura, um A3 tem 3.508, um adesivo de 6 polegadas tem 1.800. Mude para o modo Largura, digite o número e a altura segue a proporção do SVG. O conversor limita a saída a 16.384 pixels no lado maior (o limite que os navegadores impõem a um canvas) e avisa se um pedido precisou ser reduzido.
Transparência, fundos e bordas
A maioria dos SVGs (logos, ícones, ilustrações) não tem fundo: as formas flutuam sobre o nada. O PNG consegue guardar isso, e essa é uma das duas razões para preferi-lo ao JPG nesta tarefa.
Mantendo o fundo transparente
Aqui, transparente é o padrão. Cada pixel que o SVG não pintou fica livre, incluindo os pixels parcialmente cobertos ao longo de bordas curvas e diagonais. Esses pixels suaves de borda são o que permite ao PNG se encaixar em um slide escuro, um botão colorido ou uma fotografia sem contorno visível.
Os resultados aparecem sobre um tabuleiro de xadrez para você confirmar a transparência antes de baixar.
Quando achatar sobre uma cor
Alguns destinos não lidam com alfa: clientes de e-mail antigos, certos fluxos de impressão, alguns uploaders de marketplace que convertem para JPG nos bastidores. Para eles, escolha Branco, Preto ou uma cor personalizada na configuração de fundo. A forma é composta sobre essa cor e o PNG fica totalmente opaco.
Escolha a cor que combina com o lugar onde a imagem vai ficar. Achate sobre branco e depois coloque o PNG sobre um fundo escuro, e os pixels de borda (agora laranja pálido, azul pálido, qualquer que fosse a cor da forma) aparecem como um halo tênue. Esse halo é a reclamação mais comum sobre logos convertidos, e é uma escolha de fundo, não uma falha de renderização.
O que pode dar errado (e como resolver)
Renderizar no navegador significa que o PNG bate com a tela, mas também herda as regras do navegador sobre o que uma imagem pode carregar.
Fontes ausentes
O texto em um SVG é renderizado com a fonte que ele nomeia. Se essa fonte não estiver instalada na sua máquina nem embutida no arquivo, o navegador a substitui, e o PNG mostra a substituta. Fontes web referenciadas por URL também não carregam: um SVG renderizado como imagem não pode buscar recursos externos.
A solução confiável é converter o texto em contornos na sua ferramenta de design antes de exportar o SVG. As letras viram caminhos e renderizam de forma idêntica em qualquer lugar.
Imagens vinculadas ausentes
A mesma regra vale para <image href="https://…">. Uma imagem raster puxada de uma URL vai sair em branco. Em vez disso, embuta a imagem: a maioria dos editores tem uma opção de exportação "embutir imagens", que transforma o link em um URI de dados dentro do SVG. Imagens embutidas renderizam sem problema.
Saída em branco ou minúscula
Um SVG sem viewBox nem width e height é renderizado aqui em um tamanho de fallback; se o desenho estiver longe da origem, pode cair fora da área visível. Adicione um viewBox que envolva a arte. Uma saída minúscula quase sempre significa que o SVG declara um width e height pequenos: mude para o modo Largura e digite o tamanho que você realmente quer.
Sintoma, causa, solução
| Sintoma | Causa provável | Solução |
|---|---|---|
| Fonte errada no PNG | Fonte não instalada / fonte web bloqueada | Converta o texto em contornos antes de exportar |
| A foto dentro do SVG está em branco | Vinculada por URL, não embutida | Reexporte com as imagens embutidas |
| O PNG está minúsculo | O SVG declara um width/height pequeno | Use o modo Largura e digite o tamanho desejado |
| Arte cortada | O viewBox não envolve o desenho | Corrija o viewBox no editor |
| Halo em fundos escuros | Achatado sobre branco | Mantenha transparente ou achate sobre a cor de fundo real |
| Filtro ou desfoque parece diferente | O conversor em servidor usou outro motor | Converta aqui: o navegador renderiza |
O que as pessoas fazem com SVG em PNG
Se o SVG escala perfeitamente, por que converter SVG para PNG? Porque muito software ainda não aceita um vetor.
Conjuntos de ícones e favicons
Lojas de apps, formatos de favicon e muitos sistemas de ícones querem PNGs de tamanho fixo. Converta uma vez no maior tamanho de que precisar e recorte o resto com o gerador de ícones ou o PNG para ICO.
Plataformas que rejeitam SVG
Redes sociais, marketplaces, fóruns e a maioria das bibliotecas de mídia de CMS recusam upload de SVG, em parte por segurança, já que um SVG pode carregar scripts. Um PNG em 2× com fundo transparente é o substituto universal.
Assinaturas de e-mail e newsletters
Clientes de e-mail removem o SVG ou mostram uma imagem quebrada. Logos em e-mail são PNGs, idealmente exportados em 2× e exibidos na metade do tamanho para continuarem nítidos em telas Retina.
Impressão e grande formato
Gráficas aceitam PDF e raster de alta resolução. Use o modo Largura para renderizar um logo com 3.000 ou 4.000 pixels e ele vai imprimir limpo em tamanho de pôster: vetores rasterizados no tamanho final não têm borrão de ampliação.
Conversores de SVG no navegador vs em servidor
Quase todo conversor de SVG para PNG online faz upload do arquivo e o renderiza em um servidor com librsvg, Inkscape ou um navegador headless. Funciona para formas simples e desanda em qualquer coisa complicada.
Fidelidade
Cada biblioteca de renderização suporta uma fatia um pouco diferente da especificação SVG. Filtros, máscaras, modos de mesclagem, CSS dentro do arquivo e texto em caminho são as vítimas de sempre. Os motores dos navegadores são os renderizadores de SVG mais completos que existem, e renderizar com o da sua máquina significa que o PNG não pode divergir da prévia.
Privacidade e limites
Um logo não publicado, um diagrama de produto, um gráfico com números internos: enviá-los para um conversor é um pequeno vazamento que ninguém pretende. Ferramentas em servidor também limitam o tamanho do arquivo e o uso diário porque renderizar custa dinheiro para elas. Renderizar no seu próprio dispositivo elimina as duas coisas: não há nada a vazar nem nada a medir.
O que um servidor faz melhor: um hardware muito antigo vai renderizar um lote de SVGs complexos mais devagar que um data center. Para dez logos, não faz diferença.
O que fazer com os PNGs depois
A saída é PNG padrão, então qualquer ferramenta daqui aceita sem outro upload.
Para a web, passe pelo Comprimir PNG ou converta para WebP: os dois mantêm a transparência e reduzem o tamanho. Para e-mail ou fotos, o PNG para JPG achata e encolhe. Para dimensões exatas depois do fato, Redimensionar imagem. E se você começou com um raster e queria ter um vetor, o PNG para SVG faz o caminho contrário.