SVG vs PNG: Quais são as diferenças e quando usá-las

Publicados: 2021-12-15

Existem dezenas de tipos de arquivos de imagem, cada um variando com base no tipo de compactação, formatação e suporte do navegador. Mas dois dos mais usados são os formatos SVG e PNG.

Esses dois tipos de arquivo não poderiam ser mais diferentes — cada um é mais adequado para situações específicas. Eles certamente não são intercambiáveis em todos os aspectos, mas você pode descobrir que os SVGs podem executar tarefas específicas melhor do que a imagem PNG padrão.

Aprenda a diferença entre SVG e PNG e onde melhor eles são aplicados em seu site.

O que é SVG?

SVG significa Scalable Vector Graphics e é o formato de arquivo vetorial mais usado na web. Vamos dividir isso:

Escalável: SVGs podem ser redimensionados para cima ou para baixo sem prejudicar a qualidade da imagem. Será perfeitamente nítido e claro, não importa quão grande ou pequeno seja.
Vetor: A maioria dos tipos de arquivo de imagem contém pixels. Os vetores são essencialmente pedaços de código que renderizam uma imagem em tempo real, convertendo-a nos pixels que você vê na tela. Enquanto eles exibem a mesma imagem, o que acontece no fundo é muito diferente.
Gráficos: Embora possa não ser tão conhecido, SVG é um tipo de arquivo de imagem como PNG, JPEG ou GIF. Ele apenas trata as coisas de forma um pouco diferente.

Vetores são pedaços de código escritos em XML que representam formas, linhas e cores para elaborar como funciona.

Embora seja totalmente possível criar uma imagem com nada além de código, a maioria das pessoas usa um editor de gráficos vetoriais como o Inkscape ou o Adobe Illustrator. Você também pode converter PNGs ou outras imagens raster em SVG, mas os resultados nem sempre são bons.

converter png para svg — Convertio é um conversor de PNG para SVG.

Quando a página é carregada, esse código é convertido em gráficos, portanto, você não pode diferenciar imediatamente um SVG de um PNG. Mas como os SVGs são simplesmente linhas de código convertidas em pixels, isso significa que eles podem ser dimensionados para qualquer resolução – grande ou pequena – sem perder qualidade.

svg ampliado — Exemplo de um SVG ampliado.

O SVG também suporta animação e transparência, tornando-o um formato de arquivo versátil.

O único problema é que não é tão amplamente usado como formatos mais padrão como PNG, por isso é menos suportado em navegadores e dispositivos mais antigos, e nem sempre é o mais fácil carregá-lo em seu site e exibi-lo corretamente.

Quer saber o que torna os arquivos SVG diferentes dos PNGs? Este guia está aqui para ajudar Click to Tweet

Prós e contras do SVG

Embora ainda não sejam tão amplamente utilizados quanto os tipos de arquivos raster como PNG, os gráficos vetoriais estão crescendo rapidamente em popularidade. Eles realizam algumas tarefas essenciais que as imagens rasterizadas simplesmente não conseguem. Veja por que as pessoas adoram SVGs.

As imagens SVG são escaláveis. Você pode projetá-lo em qualquer resolução e ele aumentará ou diminuirá o tamanho sem danificar a qualidade ou ficar pixelado. Com imagens raster, você precisa saber o tamanho que deseja desde o início, ou corre o risco de tornar a imagem muito grande ou muito pequena.
Os SVGs sempre parecem nítidos e bonitos devido a nunca sofrerem perda de qualidade. As imagens rasterizadas podem começar a parecer desfocadas mesmo quando ligeiramente redimensionadas.
Como os SVGs são apenas código, o tamanho do arquivo é mínimo e bem otimizado. Os otimizadores de SVG também existem para torná-los ainda mais gerenciáveis. Seu site provavelmente carregará um pouco mais rápido se você usá-los.
Ao contrário dos PNGs, os SVGs suportam animação.

O SVG tem bastante em PNG, de ser escalável a menor em tamanho, mas não é melhor em todas as situações. Aqui está o lado ruim dos tipos de arquivos vetoriais.

Embora os SVGs tenham suporte em todos os principais navegadores modernos, você pode ter problemas de compatibilidade ao renderizá-los em navegadores e dispositivos mais antigos. Se uma parte significativa de seus visitantes usa isso, mudar pode ser uma má ideia.
SVGs são mais difíceis de trabalhar, exigindo programas especiais para criar e editar. Embora você possa projetá-los com nada além de XML, isso nem sempre é viável. Ferramentas premium como o Adobe Illustrator podem ser caras.
SVGs não são tão fáceis de incorporar quanto PNGs. Se você estiver usando o WordPress, ele não é suportado pela biblioteca de mídia padrão, então você precisaria de um plugin para carregá-los.
Os SVGs devem ser renderizados pelo navegador quando a página é carregada, portanto, usar um excesso deles ou um arquivo grande com muitos vetores pode sobrecarregar o dispositivo.

Quando usar SVG sobre PNG

Embora você definitivamente não deva converter todos os seus PNGs em SVGs, os gráficos vetoriais podem ser um excelente substituto para algumas imagens.

As imagens SVG funcionam excepcionalmente para gráficos decorativos de sites, logotipos, ícones, gráficos e diagramas e outras imagens simples. Veja nossa página inicial para um excelente exemplo de arte vetorial em ação.

animação svg na página inicial da Kinsta — A página inicial da Kinsta.

No entanto, eles não funcionam tão bem com imagens complexas envolvendo muitas cores e formas, como capturas de tela, fotografia e até arte detalhada. Embora seja possível converter qualquer imagem em SVG, os navegadores nem sempre lidam bem com vetores complexos com centenas de cores, pois eles precisam ser renderizados quando a página é carregada.

Além disso, a arte SVG pode ser bonita, mas projetar imagens complexas requer muito tempo, esforço e proficiência em ferramentas avançadas de edição. Mantenha-o simples se quiser criar suas imagens vetoriais.

Se você tiver imagens detalhadas, fique com PNG.

No entanto, SVGs são melhores para web design responsivo e pronto para retina devido à sua escalabilidade e falta de degradação da qualidade. Além disso, eles suportam animação enquanto o PNG não, e os tipos de arquivo raster que suportam animação como GIF, APNG e WebP têm seus problemas.

Para gráficos simples que podem exigir animação e garantir uma boa escala em qualquer tamanho de tela, use SVG.

O que é PNG?

PNG significa Portable Network Graphics, e esse nome se reflete em quão difundido é esse tipo de arquivo. Qualquer pessoa que já usou um computador provavelmente já trabalhou com PNGs, pois é o tipo de arquivo mais comum na Internet ao lado do JPEG.

PNG é um tipo de arquivo de imagem raster, semelhante aos formatos de imagem mais comuns. Isso significa que consiste em pixels, os mesmos pequenos pontos exibidos em seu monitor ou tela. Embora isso facilite a exibição, também significa que a qualidade da imagem depende da resolução — quantos pixels há na imagem.

Portanto, se você aumentar ou diminuir o tamanho de uma imagem raster, a qualidade será afetada. Às vezes, o dano é insignificante, especialmente ao reduzir a escala, e às vezes pode tornar uma imagem borrada e completamente inutilizável.

Ainda assim, a prevalência do PNG o torna um bom candidato para uso geral. Este tipo de arquivo suporta transparência, mas não animação.

Prós e Contras do PNG

O que torna o PNG o formato de arquivo de imagem mais usado online? Aqui estão as vantagens:

Os arquivos PNG são facilmente editáveis e abertos em qualquer ferramenta de edição de imagem comum. Não há necessidade de pagar por programas avançados para criar ou alterar uma imagem PNG; no máximo, você pode precisar baixar um editor gratuito como o GIMP.
Esteja você codificando do zero ou usando o gerenciador de mídia do WordPress, exibir imagens PNG em seu site é uma tarefa simples.
O PNG usa compactação sem perdas que o deixa com uma aparência mais nítida do que JPEGs de compactação com perdas. No entanto, isso tem um custo de tamanho de arquivo maior e não pode ser comparado a imagens vetoriais.

Por outro lado, o formato PNG foi criado há décadas e tem várias falhas notáveis que não foram atualizadas para a era moderna.

Você não pode redimensionar arquivos PNG sem perder qualidade. Você precisa planejar com cuidado ao projetar gráficos raster e certificar-se de que é o tamanho certo, ou você pode acabar perdendo tempo criando imagens inutilizáveis.
PNGs são muito grandes devido à sua compressão sem perdas. Assim, eles podem desacelerar seu site. Corrigir isso requer comprimi-lo ainda mais e prejudicar a qualidade.
Tornar as imagens “prontas para retina” é mais tedioso com PNGs e mais provável de causar desfoque.
PNG não suporta animação. Outros tipos de arquivos raster animados, como GIFs, podem ter sérios problemas; por exemplo, os GIFs são de qualidade super baixa e suportam apenas 256 cores.

Quando usar PNG sobre SVG

PNG é o tipo de arquivo mais comum por um motivo; é altamente versátil e se adapta a quase todas as situações. Existem apenas algumas falhas a serem consideradas ao usá-lo, como o tamanho grande do arquivo e a falta de escalabilidade.

PNGs são adequados para exibir imagens detalhadas, arte e fotografia — tudo o que uma imagem vetorial não pode suportar. Qualquer coisa com centenas de cores e uma resolução grande provavelmente deve ser um PNG.

Isso não quer dizer que você não possa usar PNGs para imagens mais diretas, como logotipos e gráficos decorativos, mas SVGs seriam mais adequados para a tarefa.

Precisa de uma solução de hospedagem que lhe dê uma vantagem competitiva? Kinsta cobre você com velocidade incrível, segurança de última geração e dimensionamento automático. Confira nossos planos

Quando você não tem certeza se uma plataforma irá lidar com o tipo de arquivo SVG mais recente e menos suportado, o PNG é o caminho a percorrer - mesmo que seja apenas para ser seguro.

Por exemplo, você não pode enviar SVGs para a maioria das mídias sociais. E como alguns clientes de e-mail podem ter problemas com vetores, geralmente é recomendável usar PNGs em modelos de e-mail.

Em geral, os PNGs funcionam bem com qualquer imagem complexa e não animada, especialmente aquelas que exigem transparência. Você pode usá-lo praticamente em qualquer lugar; é só que às vezes um SVG seria mais adequado.

Lembre-se de que você sempre pode usar fallbacks de PNG se o SVG falhar ao carregar, portanto, geralmente é seguro usar vetores, mesmo que uma parte significativa de sua base de usuários esteja presa a dispositivos ou navegadores mais antigos.

Qual é o melhor: SVG ou PNG?

Nenhum tipo de arquivo é melhor ou pior que o outro; cada um tem suas limitações. Embora o SVG supere o PNG em várias áreas, o PNG é muito melhor para lidar com certas coisas.

Em geral, porém, você deve usar SVGs sempre que apropriado e usar PNGs em todas as outras situações que os vetores não podem manipular. Você pode ser tecnicamente capaz de usar qualquer um desses casos, mas o SVG é preferível em algumas áreas específicas.

Enquanto o SVG suporta animação, o PNG não. Tipos de arquivo raster como GIF e APNG podem ser considerados alternativas. Ainda assim, não existe um formato raster animado perfeito que seja amplamente suportado, conhecido, de alta qualidade e resulte em tamanhos de arquivo pequenos. Os SVGs atendem a todos esses nichos.

Os SVGs também são dimensionados perfeitamente para qualquer tamanho de tela, tornando-os responsivos e prontos para retina por padrão. PNGs perderão qualidade quando redimensionados, e fazer com que eles sejam bem dimensionados é um aborrecimento - especialmente se você tiver apenas imagens pequenas que não serão exibidas bem em telas grandes.

Por fim, os SVGs geralmente são menores que os PNGs, portanto, são menos onerosos para o servidor, apesar de precisarem renderizar durante a carga.

Use-os para ilustrações simples e coloridas, logotipos e gráficos decorativos em seu site.

Por outro lado, os PNGs são adequados para exibir gráficos complexos em alta resolução ou imagens com milhares de cores. SVGs não podem lidar com essa quantidade de cores e formas no momento.

Esses tipos de imagens complexas geralmente compõem a maioria das imagens em seu site, então ainda não é hora de descartar o PNG.

E os PNGs são mais amplamente suportados em navegadores e plataformas específicas, como clientes de e-mail. Se você não tiver certeza se um SVG será renderizado corretamente, tome cuidado e use um PNG.

SVGs e PNGs podem parecer semelhantes, mas esses dois tipos de arquivos populares são adequados para situações específicas. Saiba mais aqui ️ Clique para Tweetar

Resumo

SVG e PNG são dois formatos de arquivo muito diferentes. No final, não é grande coisa se você usa PNGs ou JPEGs em seu site fora dos casos de uso de nicho, mas escolher entre SVG e PNG é uma escolha muito mais importante.

É muito mais provável que você use PNGs, pois é um formato de arquivo mais simples, fácil de acessar e mais versátil. Imagens complexas, como capturas de tela e ilustrações detalhadas, devem usar PNG.

Embora os SVGs sejam mais difíceis de criar e editar, eles têm vários benefícios em relação aos PNGs. Sempre que for apropriado usar imagens vetoriais, como gráficos decorativos e logotipos, use definitivamente o SVG.

Você provavelmente não trocará todas as imagens do seu site por um SVG, mas sua capacidade de resposta e tamanhos de arquivo menores os tornam um ótimo candidato em determinadas situações.

Você é gangue SVG ou PNG? Por favor, compartilhe suas opiniões com a nossa comunidade nos comentários abaixo!