Ícones SVG x ícones PNG em sites modernos

95

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?

html svg icons Robert Goldwein
fonte
13
Prezado votante, poderia me informar o que é especificamente baseado em opinião sobre esta pergunta, onde eu perguntei por razões técnicas específicas ? Agradeço esse feedback, para que possa melhorar minhas perguntas futuras.
Robert Goldwein
29
Robert, não parece baseado em opinião, mas às vezes as pessoas entram no modo zumbi e apenas passam os olhos pelas perguntas sem realmente lê-las.
Brigand
Eu prefiro png pela simplicidade e um DOM mais limpo. Um ponto a adicionar às respostas abaixo é que com o svg, você pode mudar a cor dinamicamente. Se um ícone tiver três cores: regular, ativo e flutuante, são 3 imagens png, mas apenas um svg.
CodeToad de
@Robert [MODO ZOMBIE] é excelente cara :): D
QMaster

Respostas:

108

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)
Brigand
fonte
Obrigado, nosso pessoal gráfico cria SVGs no Illustrator e os edita manualmente, então geralmente <svg> com poucos elementos e atributos, então essas preocupações são mudas - minha preocupação é que eu esqueci algo sério, já que vejo quase apenas benefícios em vez de PNGs clássicos - mas provavelmente se resume a <= IE8 ou> IE8. Por exemplo, o ícone padrão com círculo com sinal de mais é ainda mais compacto em SVG do que em PNG.
Robert Goldwein
Sim, algumas pessoas obtêm seus SVGs de terceiros e não os abrem em um editor de texto, nem garantem que estejam compactados. Só não queria deixar isso de fora. Há os mesmos problemas com PNGs agora que penso sobre isso; dados frequentemente inúteis (no contexto da web) são armazenados neles. Esses dados são usados ​​por editores, navegadores de arquivos e outros programas. No entanto, isso é mais comum com JPEGs (marca de loja de câmeras, modelo, lente, configurações, etc.).
Brigand
1
Obrigado, então acho que realmente não há nenhuma desvantagem em usar SVGs em nossos projetos e vamos integrá-los ainda mais profundamente. Obrigado por seus insights.
Robert Goldwein
O caminho certo para os ícones vetoriais são as fontes de ícone. Para mim, a maior desvantagem dos ícones SVG é que o atributo de dados em CSS não funciona no IE10 / 11.
Gerfried de
No entanto, as fontes @Gerfried Icon têm muitos problemas de acessibilidade. Assim que um usuário decide bloquear as fontes da Web ou substituir todas as fontes pelas suas próprias (por qualquer motivo), todos aqueles ícones bonitos quebram instantaneamente. Existem alternativas, mas eu mesmo não vi uma solução 100% funcional ainda. Este não é o caso das imagens SVG.
tomasz86
14

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!

Steven Garcia
fonte
IMO, esta é a melhor resposta.
Marco Demaio
Você deve especificar com qual logotipo da Coca Cola trabalhou. O logotipo atual de 2007 é muito simples e tem cerca de 8 KB . Ainda não é nada comparado ao PNG-8, mas muito melhor do que 20 KB.
Caleb Taylor
13

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.

corpirar
fonte
4

É 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.

Barbaanto
fonte
26
Os SVGs são MUITO úteis para ícones, que são onipresentes em sites modernos (móveis). Eles oferecem dimensionamento e estilo css sem penalidades de qualidade, dois recursos importantes que não estão presentes no PNG.
user1884155
Do ponto de vista do usuário, é inútil, mas como um desenvolvedor de multimídia, é ótimo usar apenas um arquivo que pode ser usado em qualquer tela e sempre preservará a mesma qualidade.
romero de sebastian
3

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!

Joe7
fonte
Acho que não, SVG tem melhor desempenho. recomendaria ler isto: vecta.io/blog/comparing-svg-and-png-file-sizes
Harry Sarshogh
O SVG pode reduzir a largura de banda, mas precisa de cálculos via CPU! Então Joe7 é verdade, SVG pode consumir muitos usos da CPU para processá-lo, mas no caso de baixar imagens, sim, definitivamente as imagens SVG têm tamanho menor.
Disse