Ícones SVG x ícones PNG em sites modernos

Estou me perguntando por que tão poucos sites modernos ainda usam apenas PNGs para ícones (mas essa suposição se baseia apenas na minha observação). Até agora eu sei, as principais razões para usar PNGs em vez de SVGs são o IE8 e que o SVG usa mais energia da CPU (mas não acredito que isso seja problema para ícones 1K simples). Posso ver (e atualmente usamos) muitas vantagens no uso de SVGs, seja quando é usado como sprites, como imagens ou como SVG embutido.

(Pergunta à procura de uma pesquisa: Sprite PNG vs sprite SVG vs fontes Icon enfoca o desempenho e não tem uma resposta relevante, Icon Font vs cache SVG e preocupação de rede foca no tráfego de rede, mas é facilmente resolvido por exemplo, modelagem.)

Se o novo site suportar apenas navegadores modernos, há algum motivo para não usar SVGs (ou - há algum motivo para usar PNGs para ícones)? Se não nos importamos com o IE8 e o uso de SVG é apoiado por modelos e / ou cache, há algum problema em confiar apenas em SVGs?

Razões pelas quais o SVG pode ser uma boa escolha:

• suporta perfeitamente navegadores de qualquer tamanho, especialmente com css's background-size
• você pode escalá-los para cima / para baixo, como para um efeito de foco
• você pode incorporar SVGs e fazer modificações em tempo real neles com JavaScript e o DOM
• você pode estilizar SVGs e partes de SVGs com CSS (alterando cores, contornos, etc.)
• você pode gerar SVGs dinamicamente, tanto no cliente quanto 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 pelas quais PNG pode ser uma boa escolha:

• suporte de navegador
• ferramentas existentes para a criação de spritesheets PNG
• a maioria das pessoas tem um editor compatível com PNG em seu computador
• seus gráficos são fotos ou outras imagens difíceis de vetorizar

Outras preocupações:

• alguns editores SVG podem armazenar metadados em seus SVGs, aumentando o tamanho do arquivo e, possivelmente, expondo dados de forma não intencional
  • por exemplo, quando você exporta um PNG no Inkscape ele salva / salva o caminho absoluto para este diretório no SVG quando você salva
  • Os compressores SVG podem remover isso, mas não testei (sinta-se à vontade para editar, se tiver)

A menos que você esteja exibindo formas / designs muito simples ou especificamente precise modificar partes do gráfico com o aplicativo, não há muito incentivo para usar SVG. Você pode produzir um PNG com o dobro do tamanho original (para telas de retina) e ainda ter o tamanho do arquivo uma ordem de magnitude menor - sem mencionar uma melhor cobertura para navegadores legados (sem necessidade de javascript ou polyfills).

Digo isso como alguém que cria interfaces de usuário com gráficos vetoriais. É uma ferramenta de design incrível, mas para entrega / largura de banda / alcance é difícil superar o PNG. Ontem à noite testei um logotipo bem conhecido. CocaCola.svg tinha quase 20K. Como era uma cor sólida / plana, exportei como PNG-8 com compactação de paleta de 12 cores e reduzi para 1,6 K (!!!) Para apenas alguns logotipos não é grande coisa, mas quando você tem que mostrar 40 deles .. bem, você começa a foto.

A melhor parte é que você pode transformar um PNG em um uri de dados base64 e incorporá-los diretamente em sua folha de estilo. Isso não é recomendado com SVG - um formato que já é famoso por problemas de desempenho e compatibilidade, especialmente em navegadores móveis.

Para encerrar, devo dizer que há pontos fortes e casos de uso para ambos, mas PNG abriu muito mais trilhas e você enfrenta menos resistência ao seguir a corrente. Para aqueles casos estranhos em que o SVG se encaixa melhor, eu recomendo fortemente este artigo e este recurso de aprendizagem

Happy Designing!

SVG é legal (como FakeRainBrigand bem descrito) e renderiza muito bem, mas pode ser bem complexo. Um navegador tem mais trabalho a fazer ao lidar com dados vetoriais em vez de imagens baseadas em pixels. Uma imagem é um elemento, um SVG pode ter muitos filhos que podem até ser adicionados ao DOM quando usado inline.

Não fiz nenhum teste de desempenho valioso, mas do ponto de vista lógico, o SVG deve ser usado com cuidado quando se trata de desempenho, especialmente ao lidar com navegadores móveis de meia idade (sobrecarga da CPU). Seria muito útil ter um gráfico onde você pudesse ver a energia da CPU consumida por 100 imagens SVG versus 100 imagens PNG em diferentes dispositivos Android e IOS ...

Outra coisa que incomoda o SVG é que o Tag precisa de um atributo de largura e altura para alguns navegadores Android / Samsung e nosso bom e velho IE. E a maioria dos editores SVG modernos como A *** e Illustrator apenas adiciona o atributo "viewBox".

A coisa mais legal sobre o SVG é que ele é renderizado de maneira agradável e nítida em qualquer densidade de pixels.

É verdade, o png é usado em quase todos os lugares. Acho que é porque o SVG, na maioria dos casos, é bastante inútil, a imagem deveria ser maior (eu acho) e o computador tem que regenerar a imagem sempre que você a amplia (porque você sempre amplia as imagens, não é? ?) Acho que este é o motivo mais importante.

Vamos observar que o desempenho SVG pode se tornar horrível. Mesmo em navegadores modernos, como o Chrome (escrevi isso em 2019!), Uma página semelhante a CMS com alguns 100s (praticamente 3-800) de ícones svg literalmente trava o navegador por mais de 5 segundos para terminar a renderização. Maxing out CPU entretanto.

Conforme observado em outro lugar, a contagem de SVGs incorporados na página explicitamente aumenta a carga no navegador, portanto, se você enfrentar tal situação

Opção nº 1: converter svgs em webfont (consulte o gráfico de desempenho aqui: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Opção nº 2: voltar aos PNGs simples e antigos

Em tais situações em que você nunca quer fazer nada extravagante, como modificação de cores em tempo real, e você tem MUITAS instâncias de SVGs, o antigo PNG faz o trabalho e salva o dia!