Entra vetor, sai pixel
Um arquivo SVG não contém pixels. Ele é uma descrição em texto de formas: um círculo nestas coordenadas, um caminho por estes pontos, preenchido com esta cor. É por isso que um logo em SVG fica nítido tanto num celular quanto num monitor 5K, e por isso o mesmo arquivo pode ter 4 KB em qualquer tamanho de exibição.
Muitos lugares não conseguem usar essa descrição diretamente. Redes sociais, marketplaces, newsletters por e-mail, documentos do Office, a maioria dos mensageiros, lojas de apps e muitos sistemas de conteúdo exigem uma imagem rasterizada. Converter para PNG desenha as formas num tamanho fixo, com a transparência intacta, então o resultado funciona em qualquer lugar que aceite imagens.
Como o desenho acontece no momento da conversão, o tamanho de destino não custa qualidade. Um PNG renderizado a 3000 px direto do SVG fica perfeitamente nítido, enquanto o mesmo logo exportado a 300 px e ampliado depois ficaria borrado.
Como o tamanho de saída é definido
Há uma única configuração, a largura em pixels. A altura é sempre calculada a partir das proporções do SVG, então o desenho nunca fica esticado.
Com o campo vazio, o conversor usa o tamanho do próprio SVG:
- Os atributos
widtheheightdo elemento raiz<svg>, quando ambos são números simples ou valores em pixels, comowidth="512" height="256". - Senão, o
viewBox:viewBox="0 0 120 80"dá 120×80 px. É também o que acontece quando o tamanho é dado em porcentagem, em ou centímetros. - Senão, o tamanho que o navegador atribuir à imagem.
Muitos conjuntos de ícones declaram um tamanho de 24×24 ou 16×16, o que gera um PNG bem pequeno. Digite uma largura para renderizá-lo maior: 512 para um ícone nítido no estilo de app, 1200 para uma imagem de prévia em redes sociais. A lista de arquivos mostra a largura × altura resultante e o tamanho de cada PNG, então você pode conferir o resultado antes de baixar.
Todos os arquivos de um lote usam a mesma largura. Para ícones com proporções diferentes, isso significa larguras iguais e alturas diferentes.
Como escolher a largura para usos comuns
- Telas Retina e de alta densidade: renderize com duas ou três vezes o tamanho de exibição. Um logo mostrado com 200 px de largura no cabeçalho de uma página deve ter 400 ou 600 px de largura em PNG.
- Documentos e slides: de 1500 a 2000 px de largura mantêm um logo nítido mesmo quando o slide é projetado em tela cheia.
- Impressão: multiplique a largura impressa em polegadas por 300. Um logo impresso com 4 polegadas (cerca de 10 cm) de largura precisa de 1200 px.
- Favicons e ícones de app: para o conjunto completo de tamanhos de ícone de uma vez, o gerador de favicon é mais prático.
Larguras muito grandes são limitadas pelo navegador, não pela ferramenta. Os navegadores limitam o número total de pixels de um canvas; em iPhones e iPads, o limite é de cerca de 16 milhões de pixels, aproximadamente 4000×4000. Se uma conversão falhar com uma largura grande no celular, tente uma menor ou use um navegador de desktop.
Por que o PNG pode não ficar igual à prévia do editor
O SVG é renderizado pelo seu navegador como uma imagem isolada, do mesmo jeito que uma tag <img> numa página web o exibiria. Por segurança, um SVG nesse modo não pode executar scripts nem carregar nada da rede. Na prática, isso causa algumas diferenças típicas:
- Fontes. Texto numa fonte web que está vinculada, e não incorporada, cai para uma fonte padrão. Se uma fonte com aquele nome estiver instalada no seu dispositivo, ela é usada, o que significa que o mesmo SVG pode ser renderizado de outro jeito em outro computador. Converter o texto em contornos no programa de design elimina o problema.
- Imagens vinculadas. Imagens rasterizadas referenciadas por URL ficam faltando; imagens incorporadas como dados dentro do SVG aparecem normalmente.
- Animação e interatividade. Efeitos de hover e comportamentos via script não se aplicam, e SVGs animados são capturados como uma única imagem estática.
- Efeitos. Filtros e modos de mesclagem dependem do suporte a SVG do navegador, então efeitos complexos podem variar um pouco entre Chrome, Firefox e Safari.
Fundo, arquivos e privacidade
Áreas vazias continuam transparentes no PNG. Se você precisa de um fundo sólido, por exemplo para uma plataforma que mostra a transparência como preto, passe o resultado pelo converter PNG para JPG e escolha a cor de fundo lá.
São aceitos arquivos SVG de até 20 MB. A renderização e a codificação do PNG acontecem no seu navegador, então os arquivos, que muitas vezes contêm logos e artes de marca ainda não lançados, nunca são enviados. Os resultados podem ser baixados um por um ou num ZIP.