SVG vs PNG: Imagens Vetoriais vs Raster
SVG e PNG resolvem problemas fundamentalmente diferentes. SVG armazena imagens como formas matematicas que escalam infinitamente sem perder qualidade. PNG armazena imagens como uma grade de pixels coloridos. Escolher errado custa performance ou qualidade visual.
O Que Torna SVG e PNG Fundamentalmente Diferentes
A diferenca entre SVG e PNG reflete a distincao mais ampla entre graficos vetoriais e raster.
SVG e um formato baseado em XML que descreve imagens usando definicoes matematicas de formas, linhas, curvas e cores. Quando voce da zoom num SVG, o navegador recalcula e redesenha cada forma no novo tamanho. O resultado e sempre nitido.
PNG e um formato raster que armazena imagens como uma grade de pixels, cada um com um valor de cor especifico. A imagem tem resolucao fixa. Amplie alem das dimensoes nativas e ela fica embaçada e pixelada.
Quando SVG e a Melhor Escolha
SVG brilha em qualquer grafico criado originalmente como arte vetorial:
- Logos — um logo precisa ficar nitido em qualquer tamanho, de um icone de 32px a um banner hero. SVG resolve com um unico arquivo.
- Icones — icones de UI, navegacao, redes sociais. Exemplo real: um e-commerce com 50 icones de categoria totalizando 1,2 MB em PNG reduziu pra apenas 95 KB com SVG.
- Ilustracoes e diagramas — diagramas tecnicos, fluxogramas, mapas e infograficos com linhas limpas e cores chapadas.
- Animacoes — elementos SVG podem ser animados com CSS ou JavaScript, permitindo spinners leves e micro-interacoes.
- Favicons — navegadores modernos suportam favicons SVG. Gere os seus com nosso Gerador de Favicon.
Segundo o W3Techs, 65,5% de todos os sites agora usam SVG, tornando-o o terceiro formato de imagem mais comum apos PNG e JPEG.
Quando PNG e a Melhor Escolha
- Fotos com transparencia — recortes de produto em fundo transparente, composicoes de fotos em camadas. (Pra fotos sem transparencia, JPEG geralmente e melhor.)
- Screenshots — capturas de tela contem elementos de UI pixel-precisos, texto anti-aliased e gradientes sutis que sao inerentemente raster.
- Artes complexas com muitas cores — pinturas digitais detalhadas, texturas e ilustracoes fotorrealistas.
Tamanho de Arquivo e Performance
| Tipo de grafico | PNG | SVG | Economia |
|---|---|---|---|
| Icone simples (64x64) | ~25 KB | ~2 KB | 92% |
| Logo (500x200) | ~45 KB | ~8 KB | 82% |
| 50 icones de categoria | ~1,2 MB total | ~95 KB total | 92% |
| Ilustracao simples | ~150 KB | ~20 KB | 87% |
SVGs tambem comprimem excepcionalmente bem com Gzip ou Brotli (padrao na maioria dos servidores), encolhendo mais 50-70% durante a transferencia. Podem ser inline no HTML, eliminando requests HTTP. E porque sao texto, sao amigaveis pro cache e version control.
Pra imagens complexas — fotos, texturas detalhadas — SVG nao oferece vantagem. Use PNG, JPEG ou formatos como WebP e AVIF.
Tabela de Comparacao Rapida
| Recurso | SVG | PNG |
|---|---|---|
| Tipo de imagem | Vetor (formas e caminhos) | Raster (grade de pixels) |
| Escalabilidade | Infinita (sempre nitido) | Resolucao fixa (borra ao ampliar) |
| Transparencia | Sim | Sim (canal alfa) |
| Melhor pra fotos | Nao | Sim (com transparencia) |
| Melhor pra icones/logos | Sim | Aceitavel, mas arquivos maiores |
| Animacao | Sim (CSS/JS) | Nao |
| Editavel por codigo | Sim (baseado em XML) | Nao |
| Tamanho tipico (icone) | 1-5 KB | 10-50 KB |
Como Converter Entre SVG e PNG
Converta diretamente no navegador — sem upload pra servidor, sem software. O Vizua processa tudo localmente:
- SVG pra PNG — rasterize SVGs na resolucao que precisar
- Vetorizar Imagem — converta imagens raster (PNG, JPEG) pra SVG vetorial
- Gerador de Favicon — crie favicons a partir de qualquer imagem, incluindo SVG
Pra um olhar mais amplo, nosso guia de tamanhos de arquivo lista dimensoes e formatos recomendados por caso de uso.
Perguntas Frequentes
SVG pode substituir PNG completamente?
Nao. SVG e excelente pra graficos, icones e ilustracoes, mas nao consegue representar fotos eficientemente. Uma foto convertida pra SVG seria enorme (dados raster embutidos em base64) ou perderia todo detalhe fotografico. Use SVG pra conteudo vetorial e PNG (ou JPEG/WebP) pra fotos.
Arquivos SVG sao seguros pra usar em sites?
SVGs podem conter JavaScript, entao um SVG malicioso poderia executar codigo no navegador. Se voce aceita uploads de SVG de usuarios, sempre sanitize removendo tags script e event handlers. Pra SVGs que voce mesmo cria, nao ha risco pratico.
Por que alguns SVGs ficam embaçados?
SVGs em si nunca perdem qualidade ao escalar, mas podem parecer embaçados se o navegador renderiza em tamanho fracionario de pixel, se o SVG usa imagens raster embutidas ao inves de caminhos vetoriais, ou se o design nao foi construido num grid de pixels.
Devo usar SVG ou icon fonts pra icones no site?
SVG e a melhor pratica atual. Icon fonts foram populares nos anos 2010, mas trazem problemas de acessibilidade (leitores de tela podem anunciar incorretamente), limitacoes de estilo e overhead de carregar um font inteiro por poucos icones. SVG inline carrega mais rapido e e estilizavel com CSS.
Converta suas imagens agora
Gratis, privado, roda no navegador. Sem upload, sem conta.