Escolher entre SVG e PNG afeta diretamente a velocidade do seu site. Cada formato tem características específicas que funcionam melhor em situações diferentes.
SVG trabalha com equações matemáticas para desenhar formas. PNG usa pixels – aqueles quadradinhos que formam a imagem. Entender como cada um funciona te ajuda a tomar decisões melhores sobre qual usar.
SVG vs PNG: Principais Diferenças
SVG (Scalable Vector Graphics) funciona com instruções matemáticas. Quando você abre um arquivo SVG num editor de texto, vê código XML dizendo "desenhe um círculo com 50 pixels de raio aqui, uma linha reta daqui até ali". O navegador lê essas instruções e desenha a imagem na hora.
PNG (Portable Network Graphics) armazena cada pixel da imagem com sua cor específica. É como um mosaico digital – cada quadradinho tem uma cor definida, e o conjunto forma a figura completa.
Por que isso importa
Um logo SVG de 100×100 pixels pode ser ampliado para 1000×1000 sem perder qualidade. O navegador só recalcula as equações com novos valores. Simples assim.
Um logo PNG de 100×100 pixels que você estica para 1000×1000 fica pixelado. Você está basicamente ampliando os quadradinhos – e eles ficam visíveis.
Tamanho de arquivo
Testei um logo de empresa simples:
- SVG: 2,3 KB
- PNG otimizado: 12,4 KB
- PNG alta qualidade: 18,7 KB
O SVG é 5-8 vezes menor. Multiplica por 20 ícones no site, e a diferença passa de 200KB – isso impacta o tempo de carregamento.
Mas nem sempre SVG é menor. Uma foto complexa:
- SVG: não recomendado (ficaria gigante)
- PNG: 245 KB
- JPG: 87 KB (para comparação)
Interatividade
SVG responde a código. Você pode mudar cores com CSS, adicionar animações com JavaScript, criar efeitos quando o usuário passa o mouse.
PNG é estático. O que você salva é o que aparece. Sem animação, sem mudança dinâmica.
O que é SVG e Como Ele Funciona
SVG não é exatamente uma imagem – é código que desenha imagens. Por baixo dos panos, um arquivo SVG contém instruções em XML.
Quando você salva um círculo vermelho de 100 pixels no Illustrator, o SVG grava algo tipo: "círculo com centro em X,Y, raio de 50, preenchimento vermelho". Quando o navegador abre, lê essas instruções e desenha.
Isso traz vantagens enormes para certos tipos de gráficos.
Vantagens do SVG para sites
| Vantagem | O que significa | Por que importa |
|---|---|---|
| Escalabilidade perfeita | Mantém qualidade em qualquer tamanho, de 10px a 10.000px | Um único arquivo serve para todos os dispositivos e resoluções |
| Arquivos menores | Gráficos simples resultam em arquivos 5-10x menores que PNG | Site carrega mais rápido, menos gasto de banda, melhor experiência mobile |
| Melhor para SEO | Buscadores conseguem ler texto e descrições dentro do SVG | Ajuda o Google a entender seu conteúdo visual, pode melhorar ranqueamento |
| Animação e interatividade | Pode ser animado com CSS/JavaScript, muda cores dinamicamente | Cria experiências mais ricas sem peso extra, efeitos hover, animações suaves |
| Fácil manutenção | Mudar cores e estilos via CSS, sem recriar a imagem | Adapta rapidamente a mudanças de design, temas claros/escuros |
A maior vantagem prática do SVG é a escalabilidade. Tela de celular, monitor 4K, impressão – o logo fica nítido em qualquer situação. Isso importa especialmente hoje: celular com tela retina, tablet, desktop normal, monitor ultrawide – você tem um arquivo que funciona perfeitamente em tudo.
Um ícone de rede social em SVG: menos de 1KB. O mesmo ícone em PNG de alta qualidade: 5-8KB. Sites com dezenas de ícones economizam centenas de KB usando SVG. Fiz um teste real: homepage com 30 ícones. SVG total: 42KB. PNG total: 187KB. Diferença de 145KB só em ícones.
O Google consegue ler o código SVG. Você pode adicionar título e descrição dentro do arquivo:
<svg>
<title>Logo Empresa Tech</title>
<desc>Logo minimalista representando inovação</desc>
<!-- código da imagem -->
</svg>Com PNG, o Google só tem o atributo alt da tag img. Menos informação contextual.
Quer um botão que muda de cor quando o usuário passa o mouse? Com SVG, é só CSS:
.icon:hover {
fill: #ff0000;
}Com PNG, você precisaria de duas imagens e código JavaScript para trocar.
Precisa de um gráfico animado? SVG permite animações suaves sem peso extra. Um loader animado em SVG pode ter 2KB. O mesmo como GIF animado facilmente passa de 50KB.
Limitações do SVG
Fotos têm milhares de cores diferentes, gradientes suaves, texturas complexas. Converter isso para vetores gera arquivos enormes e resultados ruins. Testei converter uma foto simples para SVG. Original PNG: 180KB. Resultado SVG: 1,2MB. E a qualidade ficou pior.
SVGs muito elaborados podem sobrecarregar o navegador. Centenas de formas, gradientes complicados, múltiplos efeitos – tudo isso precisa ser processado e desenhado. Em dispositivos mais fracos, SVGs complexos podem causar lentidão perceptível na página.
Criar SVGs exige editores vetoriais. Adobe Illustrator, Inkscape, Figma. Se você está acostumado com Photoshop, a lógica é diferente – você trabalha com formas e pontos, não pixels.
O que é PNG e Como Ele Funciona
PNG armazena imagens como uma grade de pixels. Cada pixel tem uma cor específica, e a compressão do formato é "sem perda" – quando você abre a imagem de novo, está exatamente como era.
Isso diferencia PNG de JPG, que usa compressão com perda. Cada vez que você salva um JPG, perde um pouco de qualidade. PNG não.
Vantagens do PNG para sites
| Vantagem | O que significa | Por que importa |
|---|---|---|
| Qualidade fotográfica | Suporta até 16 milhões de cores, detalhes perfeitos | Ideal para fotos de produtos, capturas de tela, imagens complexas |
| Transparência sofisticada | Suporte completo a transparência e semitransparência | Perfeito para logos, sobreposições, elementos que precisam se integrar ao fundo |
| Compressão sem perda | Reduz tamanho do arquivo sem jogar informação fora | Mantém qualidade perfeita mesmo após múltiplas edições |
| Compatibilidade total | Funciona em absolutamente qualquer lugar | Zero preocupação com suporte de navegadores ou dispositivos |
| Simplicidade | Trabalha como qualquer imagem, sem complexidade adicional | Fácil de usar, sem curva de aprendizado, funciona em qualquer ferramenta |
PNG aguenta até 16 milhões de cores. Suficiente para reproduzir fotos com detalhes perfeitos. Gradientes sutis, sombras, texturas – tudo fica preciso. Para capturas de tela de interfaces, PNG é praticamente obrigatório. Texto pequeno, bordas nítidas, ícones detalhados – tudo isso PNG captura melhor que qualquer outro formato.
PNG trabalha bem com transparência total e parcial (semitransparência). Você pode ter um logo com sombra suave que funciona sobre qualquer fundo. SVG também tem transparência, mas PNG oferece mais controle granular em imagens complexas.
Todo navegador, sistema operacional, editor de imagem e rede social entende PNG. Sem exceção. Para projetos onde você não controla o ambiente (emails HTML, PDFs, apresentações), PNG é a escolha mais segura.
Limitações do PNG
A compressão sem perda do PNG preserva qualidade, mas resulta em arquivos maiores. Uma foto que seria 200KB em JPG pode facilmente ser 800KB em PNG. Para sites, isso significa mais tempo de carregamento e mais consumo de dados móveis dos usuários.
PNG é feito para um tamanho específico. Se você tem uma imagem 500×500 e precisa mostrar em 100×100, o navegador precisa baixar os 500×500 mesmo assim. E se você esticar para 800×800, vai ficar pixelado e borrado.
PNG não se move. Se você quer animação, precisa partir para GIF (qualidade ruim), WebP animado (suporte limitado) ou soluções mais complexas.
Comparação de Performance Real
Tamanho de arquivo: dados práticos
Teste 1 – Logo de empresa: SVG 2,3 KB, PNG otimizado 12,4 KB, PNG sem otimização 18,7 KB. SVG é 5-8 vezes menor.
Teste 2 – Ícone simples (coração): SVG 0,4 KB, PNG 3,8 KB. SVG é 9 vezes menor.
Teste 3 – Ilustração com gradientes: SVG 8,2 KB, PNG 42 KB. SVG ainda é menor, mas a diferença diminui com complexidade.
Teste 4 – Foto de produto: SVG não aplicável, PNG 245 KB, JPG 87 KB. Para fotos, PNG perde até para JPG em tamanho.
Velocidade de carregamento
Testei uma página com 25 ícones:
Versão SVG: peso total dos ícones 38 KB, tempo de carregamento (3G) 0,4s, 1 requisição HTTP (inline) ou 25 (arquivos separados).
Versão PNG: peso total dos ícones 164 KB, tempo de carregamento (3G) 1,8s, 25 requisições HTTP.
A diferença de 1,4 segundos importa. Estudos mostram que cada segundo extra de carregamento reduz conversões em 7%.
Qualidade visual em diferentes tamanhos
Peguei um logo e testei em três resoluções:
50×50 pixels: SVG perfeito, bordas nítidas. PNG original 50×50 bom. PNG esticado de 25×25 borrado.
200×200 pixels: SVG perfeito, idêntico ao 50×50. PNG original 200×200 bom. PNG esticado de 50×50 pixelado.
1000×1000 pixels: SVG perfeito, sem diferença. PNG original 1000×1000 bom. PNG esticado de 200×200 muito pixelado.
SVG: um arquivo serve para tudo. PNG: você precisa de múltiplas versões ou aceita qualidade inferior em alguns tamanhos.
Impacto no SEO
SVG permite otimização interna. Você pode adicionar informações dentro do arquivo SVG que os buscadores leem:
<svg>
<title>Logo Empresa XYZ</title>
<desc>Logo representando inovação tecnológica</desc>
<metadata>
<keywords>tecnologia, inovação, startup</keywords>
</metadata>
<!-- código da imagem -->
</svg>PNG depende de atributos externos. Com PNG, você só tem o atributo alt na tag img:
<img src="logo.png" alt="Logo Empresa XYZ">Menos informação contextual para os buscadores trabalharem. Para imagens importantes na estratégia de conteúdo (logos, ilustrações de artigos), SVG oferece vantagem de indexação.
Quando Usar Cada Formato
| Tipo de imagem | Use SVG | Use PNG | Por quê |
|---|---|---|---|
| Logos | Sim | Não | Logo precisa funcionar em vários tamanhos, SVG escala perfeitamente |
| Ícones de interface | Sim | Não | Ícones são formas simples, SVG fica muito menor e mais nítido |
| Ilustrações simples | Sim | Talvez | Se tem formas básicas, SVG. Se tem muitos detalhes tipo foto, PNG |
| Fotos de produtos | Não | Sim | Fotos têm complexidade que PNG captura melhor |
| Capturas de tela | Não | Sim | Muitos detalhes e texto pequeno, PNG mantém tudo nítido |
| Gráficos e diagramas | Sim | Não | Linhas, formas geométricas – perfeito para SVG |
| Banners e headers | Depende | Depende | Design simples: SVG. Fotos ou arte complexa: PNG/JPG |
| Elementos animados | Sim | Não | SVG pode ser animado com CSS/JS, PNG é estático |
SVG domina em logos (precisa funcionar em todos os tamanhos, de favicon a banner), ícones de interface, ilustrações vetoriais, gráficos e diagramas, elementos que mudam de cor (modo claro/escuro) e animações gráficas.
PNG domina em fotos de produtos, capturas de tela, arte digital complexa, imagens com transparência complexa sobre fotos e situações onde compatibilidade crítica não pode arriscar problemas de suporte.
Casos híbridos são comuns: banners com foto em PNG/JPG e ícones em SVG, landing pages com hero image em PNG/JPG e ilustrações em SVG, e-commerce com fotos de produtos em JPG e ícones de interface em SVG.
Como Otimizar Cada Formato
Otimizando SVG
Editores como Illustrator adicionam metadados, comentários, código não usado. SVGOMG (ferramenta online gratuita) remove tudo isso automaticamente. Antes da otimização: 8,4 KB. Depois: 3,1 KB. Redução de 63%.
Simplifique formas: uma estrela com 500 pontos parece igual a uma com 50 pontos, mas o arquivo é muito maior. Use a opção "Simplify Path" no Illustrator ou ferramentas similares.
Considere inline vs externo: ícones usados uma vez só, coloque inline no HTML e economize uma requisição HTTP. Logos e elementos repetidos, arquivo externo, o navegador faz cache e reutiliza.
Minifique o código: assim como você minifica CSS e JavaScript, minifique SVGs. Remove espaços, quebras de linha e otimiza números.
Otimizando PNG
TinyPNG, ImageOptim, Squoosh – essas ferramentas comprimem PNG sem perda perceptível de qualidade. Teste real: original 845 KB, após TinyPNG 287 KB, redução de 66%, qualidade visual idêntica.
Reduza profundidade de cor quando possível: PNG-24 tem 16 milhões de cores, PNG-8 tem 256 cores. Uma ilustração simples não precisa de milhões de cores. PNG-8 pode ser 3-4 vezes menor.
Dimensione corretamente: não suba uma imagem 3000×3000 se ela nunca aparece maior que 800×800. Teste: 3000×3000 1,2 MB, 800×800 redimensionada 187 KB.
Considere WebP como alternativa: oferece qualidade similar a PNG com arquivos 25-35% menores. Suporte de navegadores está bom (95%+), com fallback para PNG quando necessário.
Estratégia Híbrida
Sites profissionais raramente usam só um formato. A combinação estratégica funciona melhor: logo, ícones de navegação, ícones de redes sociais e elementos decorativos simples em SVG na interface do site. Fotos de produtos e fotos de blog em JPG ou WebP, capturas de tela em PNG, infográficos simples em SVG e infográficos com fotos combinando PNG/JPG de base com SVG de elementos gráficos no conteúdo.
Essa estratégia balanceia performance e qualidade visual.
Ferramentas Essenciais
Criação de SVG: Adobe Illustrator (pago, padrão da indústria), Inkscape (gratuito, muito capaz), Figma (gratuito para uso pessoal, excelente para web), Vectr (online, simples e gratuito).
Criação de PNG: Photoshop (pago, completo), GIMP (gratuito, poderoso), Photopea (online, interface similar ao Photoshop), Canva (focado em não-designers).
Otimização: SVGOMG (otimiza SVG online), TinyPNG (comprime PNG e JPG), Squoosh (ferramenta do Google para qualquer formato), ImageOptim (app para Mac, otimiza tudo).
Conversão (use com cautela): CloudConvert (converte entre formatos), Vectorizer.AI (PNG para SVG, resultados variáveis).
Perguntas Frequentes sobre SVG e PNG
SVG sempre carrega mais rápido?
Para gráficos simples, sim. Um ícone ou logo em SVG é geralmente 5-10 vezes menor que PNG de alta qualidade. Mas imagens complexas em SVG podem ficar maiores que PNG. Depende da complexidade visual.
Posso converter qualquer PNG para SVG?
Tecnicamente sim, mas os resultados costumam ser ruins. Ferramentas de conversão tentam "traçar" os pixels, gerando arquivos pesados e imprecisos. Se você precisa de SVG, é melhor recriar do zero num editor vetorial.
Todo navegador suporta SVG?
Navegadores modernos suportam perfeitamente. O único problema é Internet Explorer 8 ou mais antigo, mas essas versões praticamente não existem mais (menos de 0,1% de uso).
PNG ou JPG para fotos?
JPG para fotos normais. PNG para capturas de tela ou imagens que precisam de transparência. JPG tem compressão melhor para fotos, mas perde qualidade. PNG mantém qualidade perfeita, mas arquivos maiores.
Como animo SVG?
CSS para animações simples (transições, rotações, mudanças de cor). JavaScript para animações complexas e interativas. Existem bibliotecas como GSAP que facilitam bastante.
Dá para editar SVG depois de criado?
Sim, SVG é só texto (XML). Você pode abrir num editor de código e modificar cores, tamanhos, adicionar elementos. Ou abrir num editor vetorial e editar visualmente.
Qual formato Google prefere para SEO?
Google indexa ambos, mas SVG permite adicionar mais informação textual dentro do arquivo. Para logos e elementos importantes, SVG pode dar vantagem de indexação.
PNG afeta Core Web Vitals?
Tamanho de arquivo afeta. PNGs muito grandes prejudicam LCP (Largest Contentful Paint). Use PNGs otimizados e no tamanho correto. Para elementos acima da dobra, considere SVG quando possível.
Conclusão
SVG e PNG servem propósitos diferentes. SVG domina gráficos simples – logos, ícones, ilustrações vetoriais. Arquivos menores, qualidade perfeita em qualquer tamanho, possibilidade de animação.
PNG continua essencial para fotos e imagens complexas. Quando você precisa de detalhes fotográficos, milhares de cores ou transparência sofisticada em imagens complexas, PNG entrega.
Sites otimizados usam os dois estrategicamente. SVG para interface e elementos gráficos, PNG/JPG para conteúdo fotográfico. Conhecer as características de cada formato permite decisões melhores sobre performance e qualidade visual.
A performance do site melhora quando você usa cada formato onde ele funciona melhor.
