Conversor de SVG para PNG

Por que o mesmo SVG sai em três tamanhos diferentes

SVG não tem resolução. Ele é uma descrição de formas, e a pergunta "qual o tamanho disto?" tem três respostas possíveis dependendo do que o arquivo declara — que é exatamente o motivo de a mesma logo sair de três conversores em três tamanhos diferentes, todos tecnicamente defensáveis.

Se a tag raiz traz width e height, esses valores mandam. Só que eles podem estar em unidade física: width="10cm" não é 10 pixels, é 378, porque o CSS fixa a polegada em 96 pixels e toda unidade absoluta deriva daí. Conversor que chama parseInt no atributo lê esse arquivo como 10 pixels de largura e entrega uma miniatura do tamanho de um ponto final.

Se width e height não existem mas há viewBox — e este é, de longe, o caso mais comum, porque é o que o Figma, as bibliotecas de ícone e qualquer SVG feito para escalar por CSS produzem — a leitura correta é o terceiro e o quarto número do viewBox. Um arquivo com viewBox="0 0 640 480" tem tamanho intrínseco de 640 × 480 mesmo sem nunca dizer isso em lugar nenhum. Quem não trata esse caso desenha num canvas 0 × 0 e devolve um PNG vazio, ou cai num tamanho padrão e devolve a logo cortada.

Se faltarem os dois, o arquivo realmente não tem tamanho intrínseco, e o navegador cai no padrão do CSS para elemento substituído: 300 × 150. Esse número não é bug nem chute da ferramenta — está na especificação. Quando ele aparecer, defina uma largura exata e siga a vida.

Dois consertos menores acontecem sozinhos. O viewBox é injetado quando falta, porque sem ele mexer em width e height só aumenta a moldura e o desenho fica pequeno num canto. E o atributo xmlns é adicionado quando falta, que é a razão habitual de um trecho colado à mão não renderizar nada: sem a declaração de namespace o navegador não aceita aquilo como SVG, e falha em silêncio.

Escala: exportar em 1× é desperdiçar o vetor

Rasterizar um SVG em 1× quase nunca é o que você quer. A vantagem inteira de ter o vetor é que o tamanho da exportação é uma decisão tomada na hora de exportar, e não um limite herdado do arquivo. Um PNG em 2× não é o de 1× ampliado — é uma renderização completamente separada, no dobro da resolução, com curva e texto de verdade mais nítidos, e não pixel interpolado.

Os multiplicadores que importam na prática são estes. 2× é o piso para qualquer coisa que vá aparecer em tela, porque celular e a maioria dos notebooks passaram de densidade 1× há mais de dez anos; um asset em 1× num aparelho atual fica visivelmente borrado. 3× e 4× cobrem celular de alta densidade e o caso, comuníssimo, de o mesmo arquivo ser reaproveitado depois num tamanho que ninguém previu. 8× é para impressão e para gerar um arquivo-fonte do qual você vai reduzir depois — reduzir mantém a aparência, aumentar nunca.

Largura fixa é o outro modo de que se precisa de verdade: um slot de avatar quer 512 pixels independentemente do que o arquivo original mede, uma capa de blog quer 1600. Você define a largura e a altura sai da proporção, calculada sobre o tamanho intrínseco resolvido e não sobre o que o arquivo alega. O modo de tamanho exato, que prende os dois lados, existe porque às vezes a especificação do destino é rígida — mas ele distorce o desenho quando a proporção não bate, então é o último a ser usado.

Quantos pixels a gráfica precisa

Arquivo vetorial não tem DPI. DPI é propriedade do dispositivo de saída, e o número só passa a significar alguma coisa quando você decide o tamanho físico que a imagem vai ocupar. É por isso que "exporta em 300 DPI" é uma instrução incompleta — 300 DPI em que tamanho?

A conta tem um passo: milímetros ÷ 25,4 × DPI. Um cartão de visita brasileiro padrão tem 90 × 50 mm, então a arte inteira a 300 DPI dá 1063 × 591 pixels. Um A4 com sangria, 210 mm de largura, dá 2480. Um adesivo redondo de 8 cm dá 945. Já um banner de lona de 2 metros, olhado de três metros de distância, fica ótimo a 100 DPI, o que dá 7874 pixels — grande, mas muito menor que os 23 mil que sairiam se você aplicasse 300 no automático e ainda travasse a máquina no meio.

A linha embaixo da prévia mostra o tamanho físico a 300 DPI para as dimensões escolhidas, então dá para trabalhar de trás para frente: aumente o multiplicador até os centímetros baterem com o tamanho que você vai imprimir. E um aviso que vale antes de mandar qualquer coisa para a gráfica: PNG é RGB, e máquina de impressão é CMYK. Cor saturada, sobretudo laranja e azul vibrante, muda na conversão — e quando o impressor pede "manda em vetor", é porque o vetor pode ser convertido de perfil de cor sem nenhuma dessas perdas. Se aceitarem SVG, PDF ou EPS, mande o vetor.

Para camiseta, o raciocínio muda um pouco. Sublimação e DTF trabalham bem a 300 DPI no tamanho final da estampa, e é aí que a transparência importa de verdade: o fundo precisa estar realmente transparente, não branco, senão sai um retângulo branco impresso em volta do desenho.

Sumiu o texto, ou voltou com outra fonte

Essa é a reclamação número um sobre conversão de SVG para PNG, e a causa é sempre a mesma. Rasterização não busca fonte. Quando um SVG é renderizado como imagem, ele roda num modo isolado, sem acesso à rede — uma fronteira de segurança deliberada, não um esquecimento — então um @font-face apontando para o Google Fonts, ou um font-family citando uma tipografia instalada só na máquina do designer, resolve para nada.

O que você recebe é uma substituição. As letras são desenhadas numa fonte de fallback com métricas diferentes: o logotipo que cabia na caixa passa a estourar, o espacejamento colapsa, e aquele kerning que levou uma hora vira outra coisa que o cliente percebe na primeira olhada. Às vezes não é desenhado nada.

Existem exatamente duas saídas confiáveis. Converter o texto em curvas antes de exportar o SVG — Texto > Criar contornos no Illustrator, Outline Stroke no Figma, Caminho > Objeto para caminho no Inkscape. As letras viram formas, fonte nenhuma entra na história, e o resultado é exatamente o que você desenhou. Ou embutir a fonte dentro do SVG como data: URI em base64 no @font-face, o que funciona mas engorda o arquivo em dezenas de kilobytes e pode ferir a licença da fonte.

A ferramenta vasculha o código atrás de <text>, <tspan> e <textPath> vivos, verifica se há alguma fonte embutida e avisa quando a combinação é arriscada, listando os nomes das fontes que encontrou. Um aviso em que dá para agir vale mais que um PNG convincente com a tipografia errada, descoberto só depois de mil unidades impressas.

Transparência e os três lugares onde ela quebra

PNG tem canal alfa de 8 bits, então a transparência atravessa a conversão inteira sem perda, e transparente é o padrão aqui. O xadrez atrás da prévia existe para você conferir isso em vez de supor. Ainda assim, três coisas dão errado.

• O fundo nunca foi transparente. Um monte de SVG traz um <rect> branco do tamanho da tela como primeiro elemento. Nenhuma conversão remove isso — o branco faz parte do desenho. Apague esse retângulo no editor e exporte de novo.
• O destino achata o alfa. JPEG não tem canal alfa, então tudo que era transparente vira preto ou branco na conversão seguinte. Vários fluxos de gráfica, alguns clientes de e-mail e marketplaces como o Mercado Livre, que exige fundo branco na foto principal, fazem o mesmo. Quando você sabe que o destino vai achatar, escolha aqui a cor de fundo e controle para o que ele achata.
• Borda semitransparente sobre fundo escuro. A borda suavizada é formada por pixels parcialmente transparentes, e se ela foi renderizada supondo fundo branco, carrega um halo claro que aparece numa página escura. Exportar em 2× ou mais reduz esse contorno a algo invisível — mais um argumento silencioso contra exportar em 1×.

SVG, PNG e WebP: quando NÃO converter

Converter é uma perda, e vale ser deliberado sobre isso. O SVG é uma descrição independente de resolução: nítido em qualquer zoom e em qualquer densidade de tela, normalmente menor que o PNG no caso de logo e ícone, com partes recoloríveis e animáveis por CSS, e como é texto puro, comprime bem e aparece direito no diff do versionamento.

O PNG é uma grade fixa de pixels. É nítido em exatamente um tamanho, exige um arquivo por densidade e não pode ser restilizado. A favor dele há uma coisa só, e é decisiva: tudo abre PNG. Daí a regra — converta quando o destino não aceitar vetor, e só nesse caso.

No dia a dia brasileiro os destinos que realmente exigem são: gráfica rápida e o preflight dela, Mercado Livre, Shopee, Elo7 e afins, WhatsApp, PowerPoint e Google Slides, e-mail marketing, sistema de emissão de nota fiscal ou ERP antigo que só aceita imagem raster, bordado e estamparia, ícone de aplicativo com dimensão fixa, e qualquer formulário que recusa .svg no upload — uma medida de segurança comum, já que SVG é código executável.

Vale citar o WebP porque, para web, ele costuma ser a melhor escolha de raster: tem alfa como o PNG e sai de 25% a 35% menor na mesma imagem. A fraqueza dele é a compatibilidade com software de mesa e ferramenta de impressão mais antigos — que é justamente o motivo pelo qual você foi converter. Use PNG quando outro programa precisa abrir o arquivo, WebP quando só um navegador vai abrir. E, em qualquer cenário, guarde o SVG: ele é o mestre, e o PNG é uma renderização que você refaz em qualquer tamanho quando precisar.

Nada sai do navegador — e o SVG é limpo antes de ser desenhado

A maioria dos sites de conversão de SVG funciona mandando o arquivo para um servidor, renderizando lá e devolvendo um link. Ou seja: sua arte fica na máquina de outra pessoa, sob a política de retenção de outra pessoa, quase sempre com fila e limite de tamanho junto. Para uma marca ainda não lançada, uma identidade sob acordo de confidencialidade ou um diagrama interno, isso é vazamento concreto, não hipótese.

Aqui o arquivo é lido localmente, renderizado pelo motor de SVG do seu próprio navegador e devolvido como blob. Nenhuma requisição é feita — dá para conferir na aba de rede, ou, mais simples, desligar a internet e converter assim mesmo. Não há limite de tamanho além do que a sua máquina aguenta, e converter em lote não custa nada porque não existe fila.

E, justamente por rodar local, a higienização importa mais aqui do que importaria num servidor. SVG é XML e pode carregar blocos <script> e handlers inline como onload; um arquivo malicioso estaria executando na sua sessão. Antes de qualquer desenho, tags de script, handlers de evento inline e URLs javascript: são removidos do código, e a ferramenta informa o que tirou. Referências externas também são reportadas: imagem, folha de estilo e fonte vindas de URL remota nunca são buscadas na rasterização, então em vez de deixar você baixar um PNG com um buraco branco no lugar da foto, a ferramenta diz quais referências ficaram de fora.