SVG vs PNG/JPG: por que o formato vetorial é essencial para a performance e o SEO

PNG e JPG: perfeitos para fotos, muito pesados para interfaces

PNG e JPG são formatos rasterizados (matriciais): a imagem é uma grade de pixels. Um logo exportado em PNG 512×512 "fotografa" cada ponto. Para manter a nitidez em uma tela Retina, muitas vezes você precisa servir uma versão duas ou três vezes maior, o que significa duas ou três vezes mais KB. O JPG comprime fotos melhor, mas destrói cores sólidas, adiciona artefatos ao redor de textos e não suporta transparência. Nenhum dos dois é projetado para um logotipo ou ícone que precisa ser exibido a 24px na navegação e a 240px no banner principal.

O SVG (Scalable Vector Graphics) descreve formas através de curvas e coordenadas, não por pixels. Vetorizar um PNG com PixelToPath é substituir um bitmap fixo por um caminho que o navegador redesenha no tamanho exato da tela. Resultado: um arquivo geralmente muito mais leve e nitidez idêntica em smartphones, desktops e telas 4K.

O que o SVG muda de verdade em um site

Para a interface, o SVG não é um "bônus" estético. É uma alavanca de performance: menos bytes na rede, menos variantes para manter, cache mais simples e renderização vetorial nativa em todos os navegadores modernos.

Os ganhos mais visíveis para um desenvolvedor ou especialista em SEO:

• Peso: um logo simples costuma cair de 40 a 80 KB em PNG para poucos KB em SVG, e você elimina as exportações @2x / @3x
• Escalabilidade: um único arquivo, nítido a 16px ou em tela cheia 4K, sem srcset ou media queries de imagens
• Core Web Vitals: menos dados para baixar (LCP) e um espaço reservado estável via viewBox (CLS)
• SEO técnico: páginas mais rápidas no mobile, um formato que o Google interpreta e texto potencialmente presente no SVG

PNG vs SVG: o peso de um logo não é insignificante

As imagens continuam sendo um dos principais causadores de peso em uma página. Otimizamos fotos em WebP, mas esquecemos do logo do cabeçalho e das dezenas de ícones PNG do CSS. Porém, esses arquivos se repetem em todas as URLs: cada milissegundo perdido afeta todo o site.

Ordens de grandeza observadas após vetorização com PixelToPath, no cenário típico de um site institucional ou aplicação web:

Cenário	PNG / JPG	SVG
Logotipo de 512 px com transparência	40 a 80 KB	2 a 12 KB, dependendo das cores e dos nós
O mesmo logotipo servido a @2x (1024 px) para Retina	O peso dobra, às vezes triplica	Um único arquivo, inalterado
20 ícones de interface exportados a @3x (72×72)	40 a 160 KB a mais	Poucos KB no total
Logotipo de cores chapadas vindo de um JPG	Artefatos e halos ao redor de formas e texto	Bordas limpas e um arquivo ainda mais leve

A regra é simples: tudo o que for forma, texto, pictograma ou logotipo se beneficia do SVG. Fotografias e capturas de tela permanecem em JPG, WebP ou AVIF. O SVG não é um substituto universal: é o formato certo para a interface.

Escalabilidade: um arquivo nítido do smartphone ao 4K

Um PNG só é nítido na sua resolução nativa. Ampliado, os pixels ficam visíveis. Reduzido drasticamente, o navegador precisa reamostrar. Daí a ginástica de arquivos @1x, @2x, @3x, srcsets e densidades CSS. Cada novo breakpoint ou nova densidade de tela (Retina, telefones recentes, monitores 4K) exige uma nova exportação ou um arquivo muito grande "por via das dúvidas".

O SVG ignora essa restrição. O motor de renderização calcula as curvas para o tamanho CSS solicitado. Favicon 32px, logo 48px na navegação, a mesma marca a 400px no banner, projeção 4K: é o mesmo arquivo. Sem desfoque, sem serrilhados, sem uma segunda requisição para a versão de alta densidade. Para uma biblioteca de componentes, também significa menos dívida técnica: um ícone, um arquivo, todos os tamanhos.

Core Web Vitals e SEO: por que o Google se importa com o formato

A velocidade no mobile é um fator de ranqueamento. Os Core Web Vitals (LCP, INP, CLS) medem o que o usuário sente. Substituir um logo PNG pesado ou vários ícones rasterizados por SVG não fará uma página passar de 4 MB para 40 KB. Porém, na interface do site, o efeito é imediato, especialmente em uma rede 4G ou em um LCP travado pelo logo do cabeçalho.

Na prática, o formato vetorial ajuda em três métricas, desde que se mantenha a complexidade do traçado em níveis razoáveis:

• LCP (Largest Contentful Paint): se o maior elemento visível for um logo ou uma ilustração plana, um SVG de poucos KB chegará muito mais rápido do que um PNG @2x de 150 KB. Menos contenção de rede para o restante da página
• CLS (Cumulative Layout Shift): um SVG com width, height e viewBox reserva seu espaço no exato momento da análise do HTML. Não é necessário esperar a decodificação de um bitmap para saber a proporção, resultando em menos saltos de layout
• INP e thread principal: um SVG simples (logo, ícone) tem um baixo custo de renderização. Evite, no entanto, SVGs "tipo foto" com milhares de caminhos: eles podem pesar mais que um PNG e forçar o processador. Daí a importância de um traço limpo gerado pelo PixelToPath, e não uma cópia pixel por pixel
• SEO além da velocidade: o Google indexa arquivos SVG. Um logo integrado pode conter um título acessível. Uma imagem SVG com atributo alt ainda é a base. Além disso, uma página mais leve reduz a taxa de rejeição técnica, que é um sinal de experiência do usuário considerado no ranqueamento

Onde o SVG supera o PNG/JPG em um site real

Isso não é apenas teórico. Aqui estão os locais onde o formato vetorial traz benefícios imediatos:

• Logo do cabeçalho e rodapé: um único arquivo, nítido no Retina, geralmente um dos elementos mais visualizados, e às vezes o LCP em uma página inicial minimalista
• Sistema de ícones: diga adeus aos sprites PNG 1x/2x. Cada pictograma é um SVG (ou um sprite SVG) estilizado em CSS (currentColor) sem necessidade de re-exportar
• Favicon e apple-touch: um favicon moderno em SVG, mais um fallback em PNG, evita o uso de várias versões 16, 32, 180 px para manter
• Ilustrações de interface e estados vazios: desenhos vetoriais planos permanecem nítidos em tela cheia sem custar o peso de uma imagem de banner
• Landing page otimizada para SEO: cada KB economizado no design melhora Lighthouse, PageSpeed Insights e a percepção mobile, sinais que o ranking leva em consideração

Mantenha o JPG/WebP para fotografias. Mude os logos, pictogramas e ilustrações planas para SVG. É a estratégia que os sites mais rápidos já aplicam.