6

É melhor utilizar ícones na formatação SVG ou PNG para websites? Por que?

1
  • como o bigown falou, depende do uso, o que ele disse especifica muito be,. 22/02/2017 às 13:40

2 Respostas 2

9

Razões para o SVG ser uma boa escolha:

  • Ele suporta navegadores com janelas de qualquer tamanho suavemente, especialmente com o CSS background-size
  • Você pode escalá-los para cima/para baixo, como para um efeito hover
  • Você pode incorporar SVGs e fazer modificações neles em tempo real com JavaScript e DOM
  • Você pode estilizar SVGs ou partes deles com CSS (mudança de cores, contornos, etc.)
  • Você pode gerar SVGs dinamicamente no cliente ou no servidor. Devido à sua natureza baseada em texto, você não precisa de bibliotecas de baixo nível ou servidores poderosos para criá-los.

Razões para o PNG ser uma boa escolha:

  • Suporte melhor em todos os navegadores
  • Ferramentas existentes para criar spritesheets PNG
  • A maioria das pessoas tem um editor compatível com PNG em seu computador
  • Se a imagem é foto ou outras imagens difíceis de vetorizar

Fonte.

Coloquei no GitHub para referência futura.

3
  • Apesar de concordar em grande parte com sua resposta (mas também não estou dizendo que está errada), como ele questiona sobre o uso de SVG com ícones, acho que somente o item nº 2 caberia nos itens sobre PNG. Se não for um spritesheet, não vejo mais por que utilizar .png. E lembrando também que para poder usar SVG dinâmico, como descrito na resposta, o mesmo deve ser inline e não como referência em uma img tag. 9/03/2017 às 11:27
  • Pode ser a sua única razão, a maioria das pessoas possuem outras razões, admito que a terceira realmente é mais uma questão de quem está fazendo e tem solução mais ou menos fácil, mas não tão simples quando não precisa da vetorização. Fotos vetorizadas não costumam ficar boas e pode exigir acerto manual, o que aumenta muito o trabalho. Se acha que não precisa suportar navegadores que não trabalham com SVG, ok, mas é bom a pessoa saber que usando ele estará adaptando para menos navegadores, de fato um problema menor, mas não inexistente. Vale a ressalva.
    – Maniero
    9/03/2017 às 11:36
  • Mas para considerar o suporte de navegadores a SVG, creio que seria uma parcela insignificativa que ficaria de fora, pois bem dizer todos os navegadores e versões suportam SVG. Referência. 9/03/2017 às 11:40
2

Particularmente prefiro SVG, pois acaba se tornando mais leve, por ser um vetor, e tambem fica mais facil para trabalhar, como nosso amigo colocou acima, vc tem acesso diretamente ao codigo da imagem, podendo estilizar de acordo com sua criatividade. Vale ressaltar aqui, que os icones criados e disponiveis para frameworks, sao todos baseados em SVG, bibliotecas como Font Awesome, Material Design, Bootstrap, etc...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .