SVG Sprites / Icons x PNG Sprites

[rubenmarcus]

Galera, pode ser uma dúvida bem leiga até, mas vi esse post
http://tech.trivago.com/2016/02/02/large-scale-css-refactoring-at-trivago/

no grupo front end Brasil, e li que o mais importante que a trivago fez, foi mudar de sprites png para icones em svg...

e em questão de performance ainda não entendi porque é melhor...

procurei uns posts, e nenhum explica

http://codepen.io/adrianosmond/pen/LCogn
Nesse pen o autor escreve:
Using SVGs for sprites results in much worse performance in browsers. Try changing between PNG and SVG in the box above and watch the framerate drop.

Nesses posts da serie do Willian , encontrei alguns ,mas ninguem falando porque seria mais performatico voce ter um sprite em svg e um fallback em png,
http://willianjusten.com.br/por-que-usar-svg/

Eu to perguntando isso,porque ano passado eu fiz o logo da centauro em css puro e svg
http://codepen.io/rubenmarcus/pen/WvEOwa

e me desaconselharam fazer um site inteiro assim. Me falaram que nao era performatico, varios browsers quebravam e dava muito trabalho, sendo que voce poderia fazer uma imagem só

alguns posts mais que a chei:
https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/
https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/
http://callmenick.com/post/svg-fallback-with-png

[felipefialho]

Puts, maravilha! Quero começar em breve a utilizar e vai ser bom ver um debate sobre o assunto.

Só linkando - #74 #10

[rubenmarcus]

Eu to perguntando isso,porque eu sempre quis fazer um site que fosse imageless, as imagens em código puro. E meu portfolio to fazendo uma versão nova,e escopando tudo que tem de novo e performatico. Por enquanto meu senso está falando pra usar PostCSS/Stylus + Mithril ou Riot ( eu ia usar React pra aprender,mas vou fazer outro projeto em React) , ou eu mesmo fazer meu framework, Jade, e as imagens todas queria SVG ou CSS puro...

E queria levar esses conceitos e ferramentas tambem pra empresa que trabalho

[lbebber]

Depende que tipo de performance tu quer dizer - carregamento ou renderização.

Como SVG é um formato vetorial, o tamanho do arquivo depende da complexidade do gráfico - quanto mais simples as formas, mais leve é o arquivo. Como ícones costumam ser relativamente simples, SVGs geralmente são mais leves do que bitmaps (PNG por exemplo), com a vantagem de ter resolução infinita, o que possibilita tu ter só uma versão de cada ícone ao invés de 2 ou 3 para cada resolução de tela. Logo, SVG costuma ser mais rápido para carregar (além de outros benefícios - não ter que manter uma spritesheet imensa, por exemplo).

Por outro lado, vetores são mais lentos para renderizar - um bitmap é simplesmente uma lista que diz a cor de cada pixel, e não requer muito processamento para mostrar na tela. SVG é uma lista de formas geométricas, e é necessário calcular geometria, anti-aliasing etc., para ser convertido em bitmap, para só depois aparecer na página.

Então depende da tua situação - se não aparecerem muitos ícones na página ao mesmo tempo, sugiro usar SVG, porque tu nem vai notar a diferença de performance de renderização.

[kazzkiq]

Eu comecei a usar sprites SVG para os ícones em dois projetos pessoais meus. Antes disso eu usava PNGs e/ou icon fonts como Entypo ou Font Awesome. Eis as minhas considerações:

SVG vs PNG:
A maior vantagem que vejo do SVG em relação ao PNG é a praticidade em se usar o(s) mesmo(s) arquivo(s) para qualquer resolução. Não importa a resolução, o SVG sempre se adequa e renderiza perfeitamente (e vai continuar se adequando no futuro, afinal ele é um vetor!). Além disso, a integração do CSS3 com o SVG é quase perfeita. Você tem total controle sobre atributos como cor, borda, animações, etc. Isso é muito útil para prevenir requests extras no seu projeto já que com SVG você usaria o mesmo ícone e mudaria o visual dele direto no cliente (ao contrário de um ícone em PNG onde você teria que fazer uma requisição para cada novo visual e/ou resolução do ícone).

SVG vs Icon Fonts:
Aqui a briga já fica mais "justa". As vantagens descritas ali em cima sobre o SVG são basicamente as mesmas no caso de icon fonts. Antigamente as fontes tinham uma certa vantagem em termos de acessibilidade por possuírem a possibilidade do uso de ligaturas, o que permitia que você literalmente "descrevesse" a função do ícone. Mas com o advento do HTML5 e da especificação SVG 2.0, hoje você também pode descrever o significado de um ícone SVG, o que teoricamente exclui o problema de acessibilidade.

Outro argumento pró icon fonts seria o fato de todos os ícones estarem "concatenados" em um mesmo arquivo de fonte (ex.: font-awesome.woff), ou seja, em uma única requisição seria possível fazer o download de todos os ícones do seu projeto. Esta vantagem foi amenizada com o advento de task runners como Gulp ou Grunt que também permitem que você concatene vários ícones SVG em um único arquivo de forma dinâmica, dando inclusive mais controle na edição destes ícones de forma individual, já que você teria acesso direto aos arquivos-fonte separadamente. (mais informações aqui)

Considerações finais
A não ser que o seu projeto seja um game ou uma página renderizando milhares de ícones animados, eu não vejo motivo para uso de PNGs. As vantagens de ícones em formato vetorizado tem um peso muito maior do que a alegada "performance" de imagens em formato compactado como PNG ou GIF.

Tendo dito isso, vale lembrar que cada caso é um caso. É sempre importante analisar as vantagens e desvantagens de cada tecnologia antes de arriscar pra se ferrar lá na frente, mas caso você não esteja preso a navegadores antigos ou casos extremos de performance, eu definitivamente indicaria o uso de SVG para ícones.

Outro link interessante sobre o embate: Icon fonts vs SVG:
http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

[kazzkiq]

Seguindo a linha do @lbebber, seguem dois artigos interessantes com táticas de otimização para arquivos SVG:

http://jaydenseric.com/blog/how-to-optimize-svg
https://css-tricks.com/understanding-and-manually-improving-svg-optimization/

[rickbenetti]

Também segue um texto muito bom sobre SVG que o @willianjusten tem comentado em seus posts: Sara Soueidan - SVG tips for designers

[rubenmarcus]

Bem legal o post!! valeu mesmo galera, então basicamente , se fizer um layout ex, esse do git mesmo, algo leve e simples tudo em svg e css, é uma boa? ai fallback em png para nav. antigos?

outra coisa : Esses geradores online de svg sujam muito o código?

alias o git usa svg ahahah chequei o codigo fonte agora ahahahahah

[DevCarlosAugusto]

@kazzkiq muito boa a explicação!

[kazzkiq]

@rubenmarcus Eu arriscaria dizer que qualquer interface que não vá imprimir dezenas de milhares de ícones na mesma tela poderia usar SVG sem problemas.

Rodando o código $('svg').length aqui no console, nós temos um total de 70 ícones SVG apenas nesta página do Github. E todos foram renderizados sem nenhum problema.

Usando um exemplo mais extremo, este arquivo SVG possui mais de 2000 pontos vetoriais e ainda assim renderiza em menos de 6ms na minha máquina (Chrome Canary).

Levando em conta que ícones SVG possuem bem menos complexidade do que um tigre vetorizado, eu acho seguro afirmar que performance dificilmente seria um problema. :)

@Carlosxell Valeu cara :)

[felipefialho]

Ótima ideia de teste @kazzkiq, nem tinha pensado em fazer isso. :p

[rubenmarcus]

Nesse artigo: http://blog.nparashuram.com/2015/05/icons-font-inline-svg-or-background-svgs.html

O cara fala que font-icons é mais rapido renderizado... . qual a melhor forma? bg svgs ou inline?

o github ta usando inline.

viram isso: http://mithril.js.org/mithril.html#svg

https://www.npmjs.com/package/gulp-svg-sprites
http://stackoverflow.com/questions/13236365/optimal-settings-for-exporting-svgs-for-the-web-from-illustrator

[dougaraujos]

Galera, curti essa discussão aqui.

Queria tirar uma dúvida ainda, quanto a SVG Sprites Responsive. Quando necessitei dessa implementação, criei um @mixin com argumentos width e height que calculava a proporção do background-size para o elemento.

Qual seria a melhor maneira de implementar o reaproveitamento/responsividade de uma mesma imagem inserida em um SVG Sprite?

[felipefialho]

@rubenmarcus Acredito que pra ícones, inline seja mais rápido, não vejo necessidade de fazer cache nesse caso.

[rubenmarcus]

@lfeh sim estou usando inline no projeto aqui , valeu! quando tiver no ar ( Julho)mando o aovivo pra vcs verem

[kvnol]

Eu que era evangelizador dos glifos em fonts, larguei a mão disso e caí de cabeça nos SVGs e me apaixonei. A renderização é muito melhor e não temos os famosos [] no carregamento da página. Pra quem monta os SVGs no Illustrator e precisa limpar toda aquela nojeira de IDs, usar o SVGOMG é uma dica master.

[felipefialho]

Estamos na mesma @kvnol