SVG vs PNG: qual formato de arquivo usar para logos, ícones e screenshots

Toda ferramenta de design faz a mesma pergunta na hora de exportar: SVG ou PNG? No tamanho em que você está trabalhando, os dois parecem idênticos, então as pessoas escolhem o que já está selecionado. A diferença aparece depois, numa tela maior, numa página mais lenta ou numa cor de marca que precisa mudar. Aqui está o mesmo ícone nos dois formatos, quanto cada um custa e uma tabela para os casos que surgem em todo projeto.

O que realmente muda: caminhos ou pixels

Um SVG guarda instruções: desenhe esta curva, preencha com esta cor. Um PNG guarda uma grade de pixels coloridos, um valor por ponto. Essa única diferença explica todo o resto.

Instruções podem ser executadas em qualquer tamanho, então a curva é redesenhada suave a cada vez. Uma grade tem um número fixo de pontos, então uma tela maior precisa esticá-los. SVG é um formato vetorial e PNG é um formato raster. Ambos são padrões abertos do W3C, e o painel de exportação do Figma oferece os dois lado a lado.

O mesmo coração, com muito zoom

No tamanho normal os dois corações são idênticos. Dê zoom e eles deixam de ser o mesmo arquivo.

SVG, com zoom

PNG, com zoom

O coração da esquerda é redesenhado a partir do seu caminho no novo tamanho, então a borda continua sendo uma curva limpa. O da direita é uma renderização de 12 por 12 pixels do mesmo ícone, ampliada com escala por vizinho mais próximo, então cada pixel aparece. As telas reais fazem isso de forma mais suave, borrando em vez de criar blocos, mas a causa é a mesma: o arquivo nunca teve aquele detalhe.

A correção para um PNG é exportá-lo maior, e esse também é o custo dele.

Troque a cor no código: um arquivo, qualquer cor

Um SVG é texto. A cor dele é um atributo, então uma folha de estilos pode mudá-la sem uma nova exportação.

.icon { fill: currentColor; } .icon:hover { fill: #FF3B30; }

Estados de hover, modo escuro e temas de marca viram uma linha cada. Um PNG exige um arquivo novo por cor, por tamanho.

Tamanho do arquivo: depende do que há na imagem

Medimos o coração acima. O SVG tem 290 bytes. O PNG no mesmo tamanho visual cresce junto com os pixels.

Para formas simples, o SVG fica estável enquanto o PNG se multiplica a cada tamanho que você entrega. Para imagens detalhadas, é o contrário. Exportamos um card de 1200 por 800 com fundo em gradiente e sombra suave: o PNG ficou com 55.365 bytes, um JPG com qualidade 80 com 15.248 e um WebP com qualidade 80 com 4.970. Gradientes suaves e sombras têm muitos tons, e um SVG precisaria de um filtro ou de uma quantidade enorme de formas para imitá-los.

Quando o PNG é a escolha certa

PNG é a escolha certa quando a imagem não é feita de formas limpas:

• Screenshots. Uma janela de navegador ou uma tela inteira de app com sombras suaves e renderização real de texto é feita de pixels por natureza. Um PNG os mantém exatos.
• Arte detalhada. Textura fina, granulado e sombreamento pintado não se reduzem a caminhos.
• Imagens transparentes que não são simples. O PNG suporta transparência, então um recorte com borda suave funciona em qualquer fundo.

Um aviso: um PNG feito a partir de um logo é um PNG com tamanho fixo. Mantenha o SVG como arquivo mestre e exporte PNGs dele só onde algo não consegue ler SVG.

Quando o SVG é a escolha certa

• Logos. Um arquivo para o cabeçalho do site, o favicon e o outdoor. Veja formatos de arquivo de logo explicados para o conjunto completo, incluindo PDF, AI e EPS.
• Ícones. Um conjunto de ícones de tab bar ou de barra de ferramentas, recolorido por estado com CSS. O Lucide, um dos conjuntos de ícones abertos mais usados, entrega cada ícone como SVG.
• Formas simples e ilustrações. Formas de cor chapada, divisores, selos e gráficos.

Onde o SVG falha: um arquivo com milhares de formas fica pesado, e alguns lugares, como clientes de e-mail, prévias de compartilhamento em redes sociais e apps mais antigos, podem não exibi-lo. Use um PNG nesses casos.

E as fotos?

Nenhum dos dois. Uma foto da câmera de um celular de 2026 tem tom contínuo, exatamente o que vetores fazem mal e o PNG faz pesado. Use JPG ou WebP, que comprimem fotos muito melhor que o PNG. O WebP é suportado nos navegadores atuais.

SVG ou PNG: uma tabela de decisão

FAQ

SVG é melhor que PNG?

Para logos, ícones e formas simples, sim: é mais nítido em qualquer tamanho e geralmente menor. Para screenshots e arte detalhada, o PNG é o melhor formato. Nenhum dos dois vence em tudo.

Devo usar SVG ou PNG para um logo?

SVG. Mantenha-o como arquivo mestre e exporte PNGs dele para lugares que não conseguem exibir SVG, como algumas ferramentas de e-mail e redes sociais.

SVG é menor que PNG?

Para formas simples, é, como mostra o coração acima: 290 bytes contra 393 a 10.400 bytes, dependendo do tamanho. Para imagens detalhadas, é o contrário, porque um SVG precisa de muitas formas para descrevê-las.

Posso recolorir um PNG como um SVG?

Não de forma limpa. O preenchimento de um SVG é um atributo de texto que você pode mudar no CSS. Um PNG tem pixels já fixados, então uma nova cor exige uma nova exportação.

Por que meu PNG fica borrado quando dou zoom?

Um PNG guarda uma grade fixa de pixels. Quando é exibido maior que o próprio tamanho, a tela estica esses pixels e as bordas ficam borradas ou serrilhadas. Exporte em um tamanho maior, ou use SVG se a imagem for uma forma simples.

JPG ou WebP é melhor que PNG para fotos?

Sim. Eles comprimem fotos muito melhor, então a página carrega mais rápido. Deixe o PNG para screenshots, texto nítido e gráficos.

Fontes

• Scalable Vector Graphics (SVG) 2, W3C.
• Portable Network Graphics (PNG) Specification, W3C.
• Image file type and format guide, MDN Web Docs.
• Tamanhos de arquivo medidos por nós com sharp: um caminho de coração de 24 por 24 como SVG e como PNG em cinco tamanhos, e um card de 1200 por 800 com gradiente e sombra como PNG, JPG e WebP com qualidade 80.
• Publicado originalmente como carrossel no UX Brainy.