SVG vs PNG para logos: qual formato usar (e quando)
Para um logo, mantenha o arquivo mestre em SVG e use-o em qualquer lugar onde o formato seja suportado — ele permanece nítido em qualquer tamanho e pesa quase nada. Recorra ao PNG só quando precisar de uma imagem raster de tamanho fixo ou de um lugar que não aceite SVG, como a maioria dos perfis sociais. Para impressão, entregue um PDF ou EPS vetorial. Nunca use JPG para um logo.
Nesta página
Qual é a diferença entre SVG e PNG?
A diferença é vetor vs raster. Um SVG (Scalable Vector Graphics) descreve um logo como formas — pontos, curvas e preenchimentos — definidas por matemática. Ele é redesenhado no tamanho em que aparece, então permanece nítido em qualquer lugar. Por ser código, também é minúsculo para a geometria limpa da maioria dos logos, muitas vezes apenas alguns kilobytes.
Um PNG (Portable Network Graphics) é uma imagem raster: uma grade fixa de pixels com uma largura e altura definidas. Ele suporta transparência, então um logo se encaixa bem em qualquer cor de fundo — mas mostrado maior do que foi exportado, os pixels se esticam e as bordas se suavizam.
Quando você deve usar SVG?
Faça do SVG seu arquivo mestre e o padrão para qualquer coisa na tela:
- Sites e aplicativos web — o logo no cabeçalho, rodapé e hero. Navegadores modernos renderizam SVG perfeitamente nítido em qualquer tela, incluindo retina e 4K.
- Em qualquer lugar onde o logo precisa escalar — layouts responsivos e telas de alta densidade.
- Como a única fonte a partir da qual você exporta tudo o mais.
- Favicons, já que navegadores modernos aceitam um favicon em SVG.
Quando você deve usar PNG?
Use PNG quando precisar de um raster de tamanho fixo ou de um lugar que não aceita SVG:
- Fotos e imagens de capa de perfis sociais — a maioria das plataformas só aceita uploads raster, então exporte um PNG quadrado no tamanho que cada uma recomenda.
- Alguns clientes de e-mail e ferramentas de assinatura que não renderizam SVG de forma confiável.
- Documentos, apresentações de slides, e marketplaces que só aceitam imagens raster.
- Prévias rápidas e miniaturas.
SVG vs PNG em resumo
| O que importa | SVG (vetor) | PNG (raster) |
|---|---|---|
| Escala | nítido em qualquer tamanho | tamanho fixo; borra quando ampliado |
| Tamanho de arquivo (logos) | minúsculo para marcas simples | cresce com as dimensões |
| Transparência | sim | sim |
| Editabilidade | formas e cores continuam editáveis | pixels achatados |
| Melhor para | web, arquivo mestre, escala | avatares, raster de tamanho fixo, uploads |
| Compatibilidade | navegadores e ferramentas de design modernos | aceito quase em todo lugar |
E o EPS, PDF, AI — e o JPG?
SVG e PNG cobrem a web, mas um pacote de logo completo geralmente inclui alguns outros:
- PDF — um formato vetorial que quase toda gráfica e ferramenta de escritório aceita. Este é o arquivo mais seguro para entregar a uma gráfica.
- EPS — um formato vetorial mais antigo que algumas gráficas ainda solicitam. Trate-o como uma exportação de compatibilidade de impressão, não algo que você usa no dia a dia.
- AI (Adobe Illustrator) — um arquivo de trabalho/fonte. Se um designer criou seu logo, mantenha o AI (ou o SVG) arquivado como o original editável.
- JPG — evite para logos. JPG não tem transparência, então força uma caixa de fundo ao redor da marca, e sua compressão tem perdas, o que borra bordas nítidas. É feito para fotos, não para logos.
Mantenha o SVG como sua única fonte da verdade. Todo PNG, favicon, PDF e imagem social deve ser exportado a partir dele — nunca o contrário. Vetorizar um PNG de volta raramente corresponde ao original.
Dá para converter um PNG de volta para SVG?
Não de forma limpa. Converter um PNG para SVG significa vetorizar os pixels em formas, o que raramente corresponde ao original e frequentemente produz caminhos bagunçados. Se você tem o SVG, sempre comece por ele. Se tudo o que você tem é um PNG de baixa resolução, geralmente é melhor reconstruir a marca como vetor do que vetorizá-la automaticamente.
E os favicons e ícones de aplicativo?
Um favicon é apenas uma versão muito pequena do seu logo, então exporte-o a partir do SVG: um favicon SVG para navegadores modernos, além de pequenos PNGs (por exemplo, 32×32 e um apple-touch-icon de 180×180) para ampla compatibilidade. A mesma regra se aplica a ícones de aplicativo: gere os tamanhos que cada plataforma pede a partir do arquivo mestre vetorial. Veja como criar um favicon a partir do seu logo.
A resposta curta
Projete e armazene seu logo como SVG, use-o na web, exporte PNG para posicionamentos raster de tamanho fixo, entregue às gráficas um PDF ou EPS, e evite JPG por completo. Mantenha o arquivo mestre vetorial e você poderá produzir qualquer tamanho ou formato depois sem perder qualidade.
Crie um logo e exporte SVG, PNG e faviconPerguntas frequentes
SVG é melhor que PNG para logos?
Para um logo, geralmente sim: SVG é um vetor, então permanece nítido em qualquer tamanho e é minúsculo para marcas simples. PNG ainda é útil para posicionamentos raster de tamanho fixo, como avatares sociais e ferramentas que não conseguem ler SVG.
Um logo em SVG perde qualidade quando é escalado?
Não. SVG descreve formas com matemática, então ele se redesenha com nitidez em qualquer tamanho — de um favicon a um outdoor — sem nunca ficar borrado ou pixelado.
Por que meu logo em PNG fica borrado?
Um PNG tem um tamanho de pixel fixo. Mostrá-lo maior do que foi exportado, ou em uma tela de alta densidade, estica esses pixels e suaviza as bordas. Exporte um PNG maior, ou use o SVG.
Devo usar JPG para um logo?
Não. JPG não tem transparência (então adiciona uma caixa de fundo) e tem perdas, o que borra as bordas nítidas de uma marca. Use SVG ou PNG para logos, nunca JPG.
Qual formato eu entrego para uma gráfica?
Um arquivo vetorial — geralmente um PDF ou EPS exportado do seu logo — para que a gráfica consiga escaloná-lo para qualquer tamanho de forma limpa. Mantenha o SVG como o arquivo mestre a partir do qual você os gera.
Fontes
- Scalable Vector Graphics (SVG) 2 — W3C
- Image file type and format guide — MDN Web Docs