Há dezenas de tipos de arquivos de imagem, cada um variando com base no tipo de compressão, formatação e suporte ao navegador. Mas dois dos mais comumente usados são os formatos SVG e PNG.
Estes 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 realizar tarefas específicas melhor do que a imagem padrão PNG.
Aprenda a diferença entre SVG e PNG e onde melhor eles são aplicados em seu site.
Confira nosso Guia em Vídeo SVG vs PNG
O que é SVG?
SVG significa Scalable Vector Graphics, é o formato de arquivo vetorial mais usado na web. Vamos quebrar isso:
- Escalável: Os SVGs podem ser redimensionados para cima ou para baixo sem prejudicar a qualidade da imagem. Ele será perfeitamente nítido e claro, não importa quão grande ou pequena ela seja.
- Vetor: A maioria dos tipos de arquivos de imagem contém pixels. Vetores são essencialmente pedaços de código que renderizam uma imagem em tempo real, convertendo-a para os pixels que você vê na sua 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 simplesmente acontece de maneira um pouco diferente.
Vetores são peças de código escritas em XML que representam formas, linhas e cores para elaborar o seu funcionamento.
Enquanto criar uma imagem com nada além de código é inteiramente possível, a maioria das pessoas usa um editor gráfico vetorial como o Inkscape ou Adobe Illustrator. Você também pode converter PNGs ou outras imagens rasterizadas para SVG, mas os resultados nem sempre são ótimos.
Quando a página é carregada, este código é convertido em gráficos, então você não pode distinguir 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 escalar para qualquer resolução – grande ou pequena – sem perder a qualidade.
O SVG também suporta animação e transparência, tornando-o um formato de arquivo versátil.
O único problema é que ele não é tão amplamente utilizado quanto formatos mais padronizados como PNG, então ele é menos suportado em navegadores e dispositivos mais antigos, e nem sempre é o mais fácil de carregá-lo em seu site e fazer com que ele seja exibido corretamente.
Prós e contras do SVG
Embora ainda não tão amplamente utilizado como os tipos de arquivos rasterizadas como PNG, os gráficos vetoriais estão crescendo rapidamente em popularidade. Eles fazem algumas tarefas essenciais que as imagens rasterizados simplesmente não conseguem. Eis porque as pessoas adoram SVG.
- As imagens SVG são escaláveis. Você pode desenhá-lo em qualquer resolução, e ele irá aumentar ou diminuir o tamanho sem prejudicar a qualidade ou se tornar pixelizado. Com imagens rasterizadas, você precisa saber que tamanho você quer desde o início, ou você pode arriscar fazer a imagem muito grande ou muito pequena.
- SVG sempre parecem nítidos e bonitos devido a nunca terem sofrido perda de qualidade. Imagens rasterizadas podem começar a parecer borradas quando mesmo ligeiramente redimensionadas.
- Como o SVG é apenas código, seu tamanho de arquivo é mínimo e bem otimizado. Os otimizadores de SVG também existem para torná-los ainda mais gerenciáveis. Seu site provavelmente será carregado um pouco mais rápido se você usá-los em seu lugar.
- Ao contrário do PNG, o SVG suporta animação.
O SVG tem um pouco de PNG, desde ser escalonável até ser mais estanho em tamanho, mas não é melhor em todas as situações. Aqui está o mal dos tipos de arquivos vetoriais.
- Enquanto os SVGs gostam de suporte em todos os principais e modernos navegadores, você pode encontrar problemas de compatibilidade, tornando-os em navegadores e dispositivos mais antigos. Se um pedaço significativo de seus visitantes os usar, mudar de navegador pode ser uma má idéia.
- O SVG é mais difícil de trabalhar, exigindo programas especiais para criar e editar. Enquanto você pode desenhá-los com nada além de XML, isto nem sempre é viável. Ferramentas Premium como o Adobe Illustrator podem ser caras.
- SVGs não são tão fáceis de incorporar como os PNGs. Se você está usando WordPress, ele não é suportado pela biblioteca de mídia padrão, então você precisaria de um plugin para carregá-los.
- O SVG devem ser renderizados pelo navegador quando a página é carregada, então usar um excesso deles ou um arquivo grande com muitos vetores pode tributar o dispositivo.
Quando usar SVG sobre PNG
Enquanto você definitivamente não deve converter todos os seus PNG para SVG, gráficos vetoriais podem fazer uma excelente substituição para algumas imagens.
As imagens SVG funcionam excepcionalmente para gráficos decorativos do site, logos, ícones, gráficos e diagramas, e outras imagens simples. Veja nossa página inicial para um excelente exemplo de trabalho artístico vetorial em ação.
Entretanto, eles não funcionam tão bem com imagens complexas envolvendo muitas cores e formas, tais como capturas de tela, fotografia e até mesmo trabalhos de arte detalhados. Embora seja possível converter qualquer imagem para SVG, os navegadores nem sempre lidam bem com vetores complexos com centenas de cores, já que eles têm que 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 você quiser criar suas imagens vetoriais.
Se você tem imagens detalhadas, definitivamente fique com PNG.
No entanto, o SVG são melhores para web design responsivo e retina-ready devido à sua escalabilidade e falta de degradação de qualidade. Além disso, eles suportam animação enquanto PNG não suporta, e tipos de arquivos rasterizadas que suportam animação como GIF, APNG, e WebP têm todos seus problemas.
Para gráficos simples que podem exigir animação e têm a garantia de escalar bem em qualquer tamanho de tela, use SVG.
O que é PNG?
PNG significa Portable Network Graphics, e este nome é refletido no quão difundido este tipo de arquivo é. Qualquer pessoa que já tenha usado um computador provavelmente já trabalhou com PNG, pois é o tipo de arquivo mais comum na internet ao lado do JPEG.
PNG é um tipo de arquivo de imagem rasterizada, similar aos formatos de imagem mais comuns. Isso significa que ele consiste de pixels, os mesmos pequenos pontos exibidos em seu monitor ou tela. Embora isto facilite a exibição, também significa que a qualidade da imagem depende da resolução — quantos pixels estão na imagem.
Portanto, se você escalar uma imagem rasterizada para cima ou para baixo em tamanho, a qualidade será impactada. Às vezes o dano é insignificante, especialmente quando a escala é reduzida, e às vezes pode tornar uma imagem borrada e completamente inutilizável.
Ainda assim, a prevalência do PNG faz dele 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 faz de 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.
- Quer você esteja codificando do zero ou usando o gerenciador de mídia WordPress, exibir imagens PNG em seu site é uma tarefa simples.
- PNG usa compressão sem perdas que a deixa mais nítida do que JPEGs de compressão com perdas. No entanto, isto vem com um custo maior de arquivo 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 cuidadosamente ao projetar gráficos rasterizadas e ter certeza de que é o tamanho certo, ou você pode acabar perdendo tempo fazendo imagens inutilizáveis.
- PNG são muito grandes devido à sua compressão sem perdas. Assim, eles podem diminuir a velocidade do seu site. Para corrigir isso é necessário comprimir ainda mais e danificar a qualidade.
- Fazer imagens “retina-ready” é mais tedioso com o PNG e mais provável que cause indefinição.
- PNG não suporta animação. Outros tipos de arquivos rasterizados animados como GIFs podem ter sérios problemas; por exemplo, GIFs são de super baixa qualidade e suportam apenas 256 cores.
Quando usar PNG sobre SVG
PNG é o tipo de arquivo mais comum por uma razão; é altamente versátil e se encaixa em quase todas as situações. Há apenas algumas falhas a serem consideradas ao usá-lo, como seu grande tamanho de arquivo e a falta de escalabilidade.
PNG são adequados para exibir imagens detalhadas, trabalhos de arte e fotografia — tudo que uma imagem vetorial não pode lidar. Qualquer coisa com centenas de cores e uma grande resolução deve provavelmente ser um PNG.
Isso não quer dizer que você não possa usar PNG para imagens mais diretas como logos e gráficos decorativos, mas SVG seria mais adequado para a tarefa.
Quando você não tem certeza se uma plataforma irá lidar com o mais novo tipo de arquivo SVG, menos suportado, PNG é o caminho a seguir – quanto mais não seja para ser seguro.
Por exemplo, você não pode carregar SVG para a maioria das mídias sociais. E como alguns clientes de e-mail podem ter problemas com vetores, normalmente é recomendado ficar com PNG nos modelos de e-mail.
Em geral, PNG funcionam bem com quaisquer imagens complexas, não animadas, especialmente aquelas que requerem transparência. Você pode usá-la em praticamente qualquer lugar; é que às vezes um SVG seria mais adequado.
Lembre-se que você sempre pode usar o PNG fallbacks se o seu SVG falhar em carregar, então geralmente é seguro ir com vetores mesmo que uma porção significativa da sua base de usuários tenha ficado presa com dispositivos ou navegadores mais antigos.
Qual é o melhor: SVG ou PNG?
Nenhum dos tipos de arquivo é melhor ou pior do que o outro; cada um tem suas limitações. Embora o SVG tenha um desempenho superior ao PNG em várias áreas, PNG é muito melhor em lidar com certas coisas.
Em geral, porém, você deve se ater ao SVG onde for apropriado e usar PNG em todas as outras situações com as quais os vetores não podem lidar. 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, PNG não. Tipos de arquivos rasterizados como GIF e APNG podem ser considerados alternativas. Ainda assim, não há um formato rasterizados, animado e perfeito que seja amplamente suportado, bem conhecido, de alta qualidade e que resulte em arquivos de tamanho pequeno. O SVG satisfazem todos esses nichos.
O SVG também são perfeitamente dimensionados para qualquer tamanho de tela, tornando-os responsivos e prontos para retina por padrão. PNG perderão qualidade quando redimensionados, e fazê-los escalar bem é um problema – especialmente se você tiver apenas imagens minúsculas que não serão bem exibidas em telas grandes.
Finalmente, o SVG são geralmente menores do que o PNG, então eles são menos tributáveis no seu servidor, apesar de precisarem render em carga.
Use-os para trabalhos artísticos simples, com cores lisas, logos e gráficos decorativos em seu site.
Por outro lado, os PNG são adequados para exibir gráficos complexos em uma resolução grande, ou imagens com milhares de cores. SVG não podem lidar com essa quantidade de cores e formas no momento.
Este tipo de imagens complexas muitas vezes compõem a maioria das imagens do seu site, então ainda não é hora de jogar fora o PNG.
E o PNG é mais amplamente suportados em navegadores e plataformas específicas como clientes de e-mail. Se você não tem certeza se um SVG irá renderizar corretamente, tenha cuidado e use um PNG.
Resumo
SVG e PNG são dois formatos de arquivo muito diferentes. No final, não é muito importante se você usa PNG ou JPEG em seu site fora de casos de uso de muito nicho, mas a escolha entre SVG e PNG é uma escolha muito mais importante.
É muito mais provável que você use PNG por ser um formato de arquivo mais simples, mais fácil de acessar e mais versátil. Imagens complexas, como capturas de tela e ilustrações detalhadas devem usar PNG.
Embora o SVG sejam mais difíceis de criar e editar, eles têm uma variedade de benefícios sobre o PNG. Sempre que for apropriado usar imagens vetoriais, tais como gráficos decorativos e logos, definitivamente use SVG.
Você provavelmente não estará trocando cada imagem em seu site por um SVG, mas sua capacidade de resposta e tamanho de arquivo menor fazem deles um grande candidato em certas situações.
Você é do time SVG ou PNG? Por favor, compartilhe suas opiniões com a nossa comunidade nos comentários abaixo!
Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.
Deixe um comentário