PNG vs SVG - quando usar cada formato
PNG e SVG sao os dois formatos de eleicao para logos, icones e elementos de UI na web moderna. Resolvem o mesmo problema - imagens nitidas em qualquer ecra - mas de formas fundamentalmente diferentes. PNG armazena pixels; SVG armazena instrucoes de desenho. A escolha certa depende do que esta a mostrar, para onde vai e quao grande precisa de ser a renderizacao final. Este guia cobre os mecanismos, os compromissos e as quatro decisoes do mundo real que determinam que formato vence.
Como cada formato realmente funciona
PNG (Portable Network Graphics) e um formato raster. Um ficheiro PNG armazena uma grelha de pixels coloridos - cada pixel tem um valor explicito de vermelho, verde, azul e alfa. Quando o seu navegador ou visualizador abre um PNG, le esses valores de pixel do ficheiro e pinta-os no ecra na sua resolucao nativa. Tornar um PNG maior no ecra estica cada pixel, o que produz o familiar upscale desfocado. Encolher um PNG reamostra a grelha; dependendo do algoritmo, as bordas podem suavizar.
SVG (Scalable Vector Graphics) e um formato vetor. Um ficheiro SVG e um documento XML a descrever formas, linhas, curvas e preenchimentos. Nao ha pixels na fonte - apenas instrucoes como "desenhar um circulo em (20,20) com raio 15, preenchido a vermelho". Quando o navegador renderiza o SVG, calcula os pixels no momento na resolucao que o ecra requer. O mesmo ficheiro SVG renderiza nitido a 16×16 para um favicon e a 3000×3000 para um banner outdoor, sem perda de qualidade.
Comparacao lado a lado
| Atributo | PNG | SVG |
|---|---|---|
| Codificacao | Grelha de pixels (raster) | Instrucoes de desenho (vetor) |
| Escalabilidade | Perde qualidade ao aumentar | Infinita, sem perda |
| Tamanho do ficheiro (logo simples) | ~20-80 KB | ~2-8 KB |
| Tamanho do ficheiro (ilustracao complexa) | Moderado (~150 KB) | Pode inflar (~500 KB+) |
| Tamanho do ficheiro (fotografia) | Grande (~1-3 MB) | Nao adequado |
| Transparencia | Sim (canal alfa) | Sim (opacidade por forma) |
| Animacao | Via APNG (suporte limitado) | SMIL + CSS (suporte amplo) |
| Suporte de navegadores | Universal | IE9+, todos modernos |
| Editavel em editor de texto | Nao | Sim (e XML) |
| Estilizacao CSS em runtime | Nao | Sim (cores, tracos, filtros) |
Quando PNG vence
Fotografias. Uma fotografia tem milhoes de valores de pixel a variar gradualmente - exatamente para o que um formato raster foi desenhado. SVG nao consegue representar uma foto eficientemente; incorporar os pixels como blob base64 dentro de um SVG anula as vantagens vetoriais. Use PNG para fotos, ou melhor ainda, use JPG ou WebP para fotos sem transparencia para cortar mais o tamanho do ficheiro.
Ilustracoes complexas com muitos gradientes, sombras e detalhe ao nivel do pixel. Se o seu icone parece uma pequena pintura - sombras suaves, gradientes multi-stop, sobreposicoes de textura - um PNG do render final achatado e muitas vezes menor do que o SVG com os filtros equivalentes.
Capturas de ecra de UI, texto ou codigo. Capturas de ecra sao inerentemente dados de pixel. PNG preserva a nitidez exata de texto renderizado e UI chrome sem artefactos de compressao com perdas. Prefira WebP sem perdas para poupar tamanho de ficheiro se a sua audiencia usa navegadores modernos.
Quando a plataforma alvo nao suporta SVG. Alguns formatos de documento (Word, alguns clientes de email, PowerPoint mais antigo) ainda renderizam SVG de forma inconsistente. Se o destino final nao garante suporte SVG, exporte o SVG para PNG na resolucao alvo primeiro.
Quando SVG vence
Logos. O seu logo tem de parecer bom a 24×24 num separador de navegador, 200×200 num ecra de login e 2000×2000 num banner de conferencia. Um unico ficheiro SVG faz os tres com fidelidade perfeita. PNG requer exportar varios tamanhos (24, 48, 96, 200, 400, 1000, 2000) e selecionar o certo por contexto - um peso de manutencao.
Icones numa UI. Icones SVG podem ser estilizados com CSS (fill, stroke, opacity, filter) e animados em hover/focus. O mesmo icone herda a cor de texto atual definindo fill: currentColor. Icones PNG requerem ficheiros separados por variante de cor.
Graficos, diagramas e infograficos. Qualquer coisa desenhada a partir de formas e texto - organogramas, diagramas de arquitetura, fluxogramas, graficos estatisticos - renderiza-se de forma limpa em SVG e fica nitido a qualquer nivel de zoom. Fazer zoom num diagrama PNG rapidamente revela aliasing.
Elementos UI animados. Animacao SVG via SMIL, transicoes CSS ou JavaScript escala melhor que APNG ou GIF animado para formas geometricas (spinners de carregamento, indicadores de estado, micro-interacoes). Tamanhos de ficheiro permanecem pequenos mesmo para animacoes complexas.
As quatro decisoes reais no trabalho diario
Logo num site de marketing. → SVG. O mesmo ficheiro trata cabecalho (pequeno), hero (medio) e exportacao para impressao/outdoor (grande) sem ficheiros separados nem perda de qualidade. Recorra a um PNG apenas se precisar de embutir o logo num formato de documento que rejeita SVG.
Icone de app / favicon. → SVG para o mestre; exporte para PNG a 16, 32, 48, 180, 192, 512 para os fallbacks apple-touch-icon e favicon.ico. Ambos os ficheiros vao no bundle implementado; os navegadores escolhem o certo por contexto.
Foto de produto. → PNG se a transparencia importa (recorte sobre branco ou fundo padronizado); caso contrario JPG ou WebP por metade do tamanho do ficheiro. Nunca SVG.
Diagrama ou grafico em documentacao. → SVG embutido no HTML (para que seja com zoom, acessivel via texto dentro do SVG e partilhavel como ficheiro unico). Exporte para PNG apenas quando o alvo e um PDF ou Word que nao respeita a fidelidade SVG.
Caminhos de conversao entre PNG e SVG
PNG → SVG e uma operacao de "tracing". O formato alvo precisa de definicoes de forma, portanto um tracer analisa bordas e regioes de cor no PNG e gera caminhos vetoriais aproximados. Os resultados sao excelentes para logos e icones simples (bordas limpas, poucas cores) e maus para fotos (demasiadas regioes de cor para tracar significativamente). Use PNG to SVG - ajuste o parametro de suavizacao, pre-visualize e itere ate os caminhos tracados corresponderem ao original.
SVG → PNG e uma operacao de "rasterizacao". O navegador (ou um conversor) avalia as instrucoes SVG numa resolucao especificada e escreve valores de pixel. Use SVG to PNG - escolha o tamanho de saida antes de exportar; ao contrario da outra direcao, rasterizar e sem perdas para o tamanho alvo mas significa que se compromete com uma resolucao unica.
Conversoes de ida e volta (SVG → PNG → SVG) compoem perdas na fase PNG e no trace subsequente. Mantenha a fonte SVG mestre e exporte sabores PNG conforme necessario; nunca va na outra direcao a menos que nao tenha fonte SVG para trabalhar.
Ferramentas relacionadas
- PNG to SVG Converter - tracar uma imagem raster num vetor escalavel.
- SVG to PNG Converter - rasterizar um vetor para PNG ou WebP em qualquer tamanho.
- Compress JPEG - reduzir o tamanho do ficheiro de uma foto com qualidade ajustada por AI.
- Resize Image - definir dimensoes exatas em pixels com interpolacao bicubica.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- Truly in-browser - no upload. Every file-processing tool on this site runs in your browser through modern Web APIs (File, FileReader, Canvas, Web Audio, WebGL, Web Workers). Your photo, PDF, audio, or text never leaves your device.
- No tracking during tool use. Analytics ends at the page view. The actual input you paste, drop, or capture is never sent to any server and never written to any log.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.