SVG vs PNG: Imagens Vetoriais vs Raster
SVG e PNG resolvem problemas fundamentalmente diferentes. SVG armazena imagens como formas matemáticas 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 diferença entre SVG e PNG reflete a distinção mais ampla entre gráficos vetoriais e raster.
SVG é um formato baseado em XML que descreve imagens usando definições matemáticas de formas, linhas, curvas e cores. Quando você dá zoom num SVG, o navegador recalcula e redesenha cada forma no novo tamanho. O resultado é sempre nítido.
PNG é um formato raster que armazena imagens como uma grade de pixels, cada um com um valor de cor específico. A imagem tem resolução fixa. Amplie além das dimensões nativas e ela fica embaçada e pixelada.
Quando SVG é a Melhor Escolha
SVG brilha em qualquer gráfico criado originalmente como arte vetorial:
- Logos — um logo precisa ficar nítido em qualquer tamanho, de um ícone de 32px a um banner hero. SVG resolve com um único arquivo.
- Ícones — ícones de UI, navegação, redes sociais. Exemplo real: um e-commerce com 50 ícones de categoria totalizando 1,2 MB em PNG reduziu pra apenas 95 KB com SVG.
- Ilustrações e diagramas — diagramas técnicos, fluxogramas, mapas e infográficos com linhas limpas e cores chapadas.
- Animações — elementos SVG podem ser animados com CSS ou JavaScript, permitindo spinners leves e micro-interações.
- 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 após PNG e JPEG.
Quando PNG é a Melhor Escolha
- Fotos com transparência — recortes de produto em fundo transparente, composições de fotos em camadas. (Pra fotos sem transparência, JPEG geralmente é melhor.)
- Screenshots — capturas de tela contêm elementos de UI pixel-precisos, texto anti-aliased e gradientes sutis que são inerentemente raster.
- Artes complexas com muitas cores — pinturas digitais detalhadas, texturas e ilustrações fotorrealistas.
Tamanho de Arquivo e Performance
| Tipo de gráfico | PNG | SVG | Economia |
|---|---|---|---|
| Ícone simples (64x64) | ~25 KB | ~2 KB | 92% |
| Logo (500x200) | ~45 KB | ~8 KB | 82% |
| 50 ícones de categoria | ~1,2 MB total | ~95 KB total | 92% |
| Ilustração simples | ~150 KB | ~20 KB | 87% |
SVGs também comprimem excepcionalmente bem com Gzip ou Brotli (padrão na maioria dos servidores), encolhendo mais 50-70% durante a transferência. Podem ser inline no HTML, eliminando requests HTTP. E porque são texto, são amigáveis pro cache e version control.
Pra imagens complexas — fotos, texturas detalhadas — SVG não oferece vantagem. Use PNG, JPEG ou formatos como WebP e AVIF.
Tabela de Comparação Rápida
| Recurso | SVG | PNG |
|---|---|---|
| Tipo de imagem | Vetor (formas e caminhos) | Raster (grade de pixels) |
| Escalabilidade | Infinita (sempre nítido) | Resolução fixa (borra ao ampliar) |
| Transparência | Sim | Sim (canal alfa) |
| Melhor pra fotos | Não | Sim (com transparência) |
| Melhor pra ícones/logos | Sim | Aceitável, mas arquivos maiores |
| Animação | Sim (CSS/JS) | Não |
| Editável por código | Sim (baseado em XML) | Não |
| Tamanho típico (ícone) | 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 resolução 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 dimensões e formatos recomendados por caso de uso.
Perguntas Frequentes
SVG pode substituir PNG completamente?
Não. SVG é excelente pra gráficos, ícones e ilustrações, mas não consegue representar fotos eficientemente. Uma foto convertida pra SVG seria enorme (dados raster embutidos em base64) ou perderia todo detalhe fotográfico. Use SVG pra conteúdo vetorial e PNG (ou JPEG/WebP) pra fotos.
Arquivos SVG são seguros pra usar em sites?
SVGs podem conter JavaScript, então um SVG malicioso poderia executar código no navegador. Se você aceita uploads de SVG de usuários, sempre sanitize removendo tags script e event handlers. Pra SVGs que você mesmo cria, não há risco prático.
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 fracionário de pixel, se o SVG usa imagens raster embutidas ao invés de caminhos vetoriais, ou se o design não foi construído num grid de pixels.
Devo usar SVG ou icon fonts pra ícones no site?
SVG é a melhor prática atual. Icon fonts foram populares nos anos 2010, mas trazem problemas de acessibilidade (leitores de tela podem anunciar incorretamente), limitações de estilo e overhead de carregar um font inteiro por poucos ícones. SVG inline carrega mais rápido e é estilizável com CSS.
Converta suas imagens agora
Grátis, privado, roda no navegador. Sem upload, sem conta.