performance - awesome - Buscando una investigación: PNG Sprite vs SVG sprite vs Icon fonts

font icons free

Question

Actualmente estamos usando PNG en producción para iconos, pero como diseñador estoy tratando de impulsar el uso de SVG para el beneficio de:
a. Representación en Retina.
segundo. Los usuarios con discapacidad visual que hacen un acercamiento.
do. Un flujo de trabajo más fácil al crear iconos.

¿Hay alguna investigación que compare los 3 métodos? (PNG Sprite vs SVG sprite vs Icon fonts) en términos de rendimiento?

Si no, ¿qué y cómo los compararías? (Por ejemplo, escuché que SVG requiere más potencia de CPU, y no tengo idea de cómo probarlo o cuáles son las consecuencias).

¡Muchas gracias! Eres una comunidad increíble.

Por cierto, esto es lo que pude encontrar:
svgs son geniales, pero las fuentes de iconos son solo el 10% de su tamaño de archivo
Fuentes SVG + Icon:
Iconserving - SVG o Webfont?
Diez razones por las que cambiamos de una fuente de icono a SVG

Answer 1

No es una respuesta, pero no será legible en los comentarios

Los PNG son imágenes ráster

Por lo tanto, para renderizar, solo necesitan descomprimirse, lo que requiere potencia de la CPU, pero ahora no es tan malo.

SVG son archivos vectoriales XML

Lo que significa que debes:

1. leer texto XML
2. decodificarlo en algún motor / clase capaz de gráficos vectoriales
3. renderizar imagen basada en gráficos vectoriales

Las SVG complicadas (> 300MB vector utf-8) tienen tiempos de carga / decodificación / renderización incluso en minutos en máquinas rápidas (si se decodifica todo). Si decodifica solo lo básico, puede hacer lo mismo en segundos, pero perdió las funciones avanzadas.

Muchos no estarán de acuerdo con esto: ''el problema es que no hay una sola biblioteca SVG fácil de implementar 100% compatible ... al menos que yo sepa'', pero tenga en cuenta que no utilizo marcos o entornos para WEB como JAVA o PHP ... También cada SVG lib tiene sus propias peculiaridades. Si compara SVG renderizado entre diferentes visores web o de imágenes, no es lo mismo y muchas características no son compatibles en todas partes.

Puede codificar su propio decodificador SVG, pero es un poco complicado. Si solo quieres funcionalidad básica como path y formas sin animaciones o degradados, entonces es relativamente fácil de hacer, pero si quieres implementar todo, pasarías mucho tiempo con eso.

Por un tiempo tuve un gran problema para encontrar un buen editor SVG gratuito. El único ''usable'' que encontré fue Inkspace, pero es lento y un poco hostil para mi gusto. Por otro lado, puede abrir casi todos los tipos de SVG que uso de la manera correcta ...

[Notas]

Si desea utilizar los SVG para los iconos, recomiendo renderizarlos en ráster al inicio de la aplicación y luego usar solo imágenes ráster como mapas de bits de la memoria para evitar problemas de rendimiento.