SVG vs PNG para gráficos da Web: quando usar cada formato

SVG e PNG servem a propósitos fundamentalmente diferentes, mas se sobrepõem o suficiente para causar confusão. Um armazena formas matemáticas. O outro armazena pixels. Escolher o errado custa qualidade ou desempenho – às vezes ambos.

SVG (Scalable Vector Graphics) é um formato vetorial baseado em XML. Em vez de armazenar dados de pixel, ele descreve formas, caminhos e texto usando coordenadas matemáticas. Um arquivo SVG é essencialmente um código – você pode abri-lo em um editor de texto e ler as instruções que informam ao navegador como desenhar a imagem.

SVGs podem ser estilizados com CSS e manipulados com JavaScript. Você pode alterar as cores ao passar o mouse, animar elementos individuais e tornar os SVGs responsivos ajustando os atributos do viewBox. Para gráficos simples, como logotipos e ícones, os SVGs normalmente pesam de 1 a 5 KB.

PNG (Portable Network Graphics) é um formato raster que armazena imagens como uma grade de pixels coloridos. Ele usa compactação sem perdas, portanto a qualidade é idêntica à original – sem artefatos de compactação como JPEG. PNG suporta transparência total (canal alfa), tornando-o um favorito para imagens que precisam de fundos transparentes.

PNG é excelente na reprodução de imagens complexas: capturas de tela, fotografias com transparência, texturas detalhadas e gradientes suaves. No entanto, como armazena cada pixel, os arquivos PNG podem ser grandes. Uma captura de tela em 4K como PNG pode facilmente exceder 5 MB.

Para um logotipo típico de empresa, a versão SVG pode pesar de 2 a 5 KB. O mesmo logotipo exportado como PNG com resolução 2x para telas retina pode facilmente ter de 30 a 80 KB. Isso é uma diferença de 10-15x.

Multiplique isso por todos os ícones, logotipos e elementos de interface do usuário em uma página e o SVG fornecerá uma carga útil dramaticamente mais leve. A partir de testes em um site de comércio eletrônico com mais de 60 ícones, a mudança de PNG para SVG reduziu a largura de banda relacionada aos ícones em 87%.

Mas essa vantagem muda para gráficos complexos. Uma ilustração SVG com milhares de pontos de ancoragem e caminhos detalhados pode, na verdade, exceder o tamanho de arquivo de um PNG bem compactado. Se o seu designer criou uma ilustração com centenas de elementos individuais, verifique os dois formatos e compare.

Esta é a vantagem que define o SVG. Um SVG parece perfeito em pixels, seja exibido com 32 pixels ou 3.200 pixels de largura. Não existe conceito de resolução — o navegador redesenha os caminhos vetoriais em qualquer tamanho necessário.

Isso é importante em telas que variam de monitores de desktop de 72 DPI a telefones com mais de 460 DPI. Um arquivo SVG cobre todos os dispositivos. Um PNG não.

PNG tem uma grade de pixels fixa. Exiba um PNG de 200x200 a 400x400 pixels (o que acontece em telas retina) e o navegador interpola, fazendo com que a imagem pareça suave ou desfocada. A solução alternativa é exportar PNGs com resolução 2x ou 3x, mas isso aumenta o tamanho do arquivo proporcionalmente – um conjunto de ícones 3x pode ser 9 vezes maior.

PNG é a escolha certa sempre que a imagem for fotográfica ou fotograficamente complexa. Capturas de tela, fotos de produtos com transparência, texturas complexas, imagens com milhares de cores e gradientes sutis — tudo isso pertence a formatos raster.

PNG também vence em pixel art e imagens onde cada pixel é importante em um tamanho específico. Sprites de jogos, detalhes de favicon em 16x16 e imagens onde o comportamento de anti-aliasing precisa de controle preciso são melhor servidos como PNGs.

SVG é o vencedor claro para logotipos, ícones, ilustrações, infográficos, mapas, gráficos e elementos de UI – qualquer coisa composta de formas limpas, linhas e cores sólidas. Se o gráfico foi criado em Figma ou Illustrator, exportar como SVG preserva perfeitamente a qualidade da fonte.

SVG também é excelente em design responsivo. Você pode fazer uma ilustração SVG que reflita ou oculte elementos em diferentes pontos de interrupção usando consultas de mídia CSS dentro do próprio SVG. Os ícones em SVG podem mudar de cor com base no tema (modo escuro/modo claro) sem fornecer arquivos de imagem separados.

SVGs podem conter elementos de texto reais que os mecanismos de pesquisa podem indexar. Se o seu infográfico tiver títulos e rótulos como texto SVG, o Google poderá lê-los. Esta é uma vantagem significativa de SEO em relação ao PNG, onde todo o texto é inserido na grade de pixels e invisível para os rastreadores.

Para leitores de tela, SVGs embutidos com os devidos role e aria-label atributos fornecem melhor acessibilidade do que imagens rasterizadas. As imagens PNG dependem inteiramente do alternativo atributo para acessibilidade.

Precisa alternar entre formatos? Você pode converter SVG para PNG quando você precisa de uma versão raster para compartilhamento em mídias sociais, clientes de e-mail que não renderizam SVG ou plataformas que aceitam apenas imagens raster.

Indo na outra direção, você pode converter PNG para SVG para imagens que se beneficiariam da escalabilidade vetorial. A conversão funciona melhor em gráficos simples com bordas limpas e cores limitadas. Fotografias detalhadas não serão bem convertidas para SVG.

Para alterações rápidas de formato sem instalar nenhum software, iformat.io lida com ambas as conversões diretamente no seu navegador. Carregue, converta e baixe em menos de 10 segundos.

Use SVG para logotipos, ícones, ilustrações e qualquer coisa com formas limpas — ele é dimensionado perfeitamente e mantém os arquivos minúsculos (normalmente de 1 a 5 KB). Use PNG para capturas de tela, fotos com transparência e arte com precisão de pixels. Para a maioria dos projetos da web, converter seu conjunto de ícones de PNG para SVG reduzirá o peso da página e melhorará a renderização em telas de alto DPI. Teste os dois formatos em caso de dúvida: a comparação do tamanho do arquivo leva 30 segundos e a escolha certa geralmente é óbvia.