Buscando un trabajo de investigación: PNG Sprite vs SVG sprite vs Icono de fuentes

Actualmente estamos utilizando los archivos Png en la producción para los iconos, pero como diseñador estoy tratando de empujar para el uso de SVG para el beneficio de:

una. La representación de la Retina.

b. Los usuarios con discapacidad visual que acercar la imagen.

c. Un flujo de trabajo más fácil a la hora de crear iconos.

Hay investigaciones que compara los 3 métodos? (PNG Sprite vs SVG sprite vs Icono de fuentes) en términos de rendimiento?

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

Muchas gracias! Eres una maravillosa comunidad.

Por CIERTO, esto es lo que pude encontrar:

svgs están bien, pero el icono de fuentes son sólo el 10% de su tamaño del archivo

SVG + Icono de Fuentes:

Iconserving – SVG o Webfont?

Diez razones por las que hemos pasado de un icono de fuente a SVG

InformationsquelleAutor Nir Benita | 2014-01-23

1 Kommentar

  1. 12

    No una respuesta, sino que no será legible en los comentarios

    PNG son imágenes raster

    Así que para hacer que sólo necesita ser descomprimido que la necesidad de energía de la CPU pero hoy en dia no es tan malo.

    SVG son el vector de archivos XML

    Que significa que usted necesita para:

    1. leer XML texto
    2. decodificar a algunos de gráficos vectoriales capaz de motor/clase
    3. representar gráficos vectoriales de imagen basado en

    Complicado SVG‘s (>300 MB vector utf-8) tienen carga/decode/tiempos de procesamiento, incluso en cuestión de minutos en máquinas rápidas (si decodificado todo). Si usted decodificar sólo los elementos básicos que usted puede hacer lo mismo en cuestión de segundos, pero perdió características avanzadas.

    Muchos no estarán de acuerdo con esto: «el problema es que no hay un único 100% compatible fáciles de implementar SVG biblioteca … al menos que yo sepa», pero tome en cuenta que yo no uso de marcos o entornos para la WEB como JAVA o PHP … También cada SVG lib tiene peculiaridades. Si se compara prestados SVG entre diferentes web o visores de imágenes, entonces no es el mismo y muchas características no se admiten en todas partes.

    Puede codificar su propia SVG descodificador, pero que es un poco complicado. Si sólo desea funcionalidad básica, como path y formas sin animaciones o degradados, entonces es relativamente fácil de hacer, pero si quieres poner en práctica todo lo que iba a gastar un montón de tiempo con eso.

    Durante un tiempo tuve un gran problema para encontrar buenas libre SVG editor. El único ‘usable’ que encontré fue Inkspace pero es lento y un poco de usuario hostil para mi gusto. Por otro lado, se puede abrir casi cualquier tipo de SVG puedo utilizar de la manera correcta…

    [Notas]

    Si quieres usar SVG‘s para los iconos recomiendo hacerlos a trama en la Aplicación de inicio y, a continuación, utilizar sólo imágenes raster como mapas de bits de la memoria para evitar problemas de rendimiento.

    • Añadir a que… acabo de hacer algunas pruebas (no completa de la investigación): he probado el 23 de iconos, tanto en formato svg y png. El svg son bastante simple y optimizada. Total tamaño de archivo de svg fue de alrededor de 160% mayor que png (64x64px). La representación de png se forma más rápido (sobre todo en dispositivos móviles).
    • Sólo se quedó en esta comparación recientemente, codepen.io/adrianosmond/pen/LCogn
    • Yo no tengo ningún cuantificables números, pero esta cuestión de rendimiento es muy probable que un prematuro de optimización. SVGs se utiliza para los iconos son pequeñas y sencillas, y debe tener insignificante características de rendimiento. Ídem para la decodificación de los archivos Png. El consejo final que anteriormente acerca de la prestación de SVGs en la aplicación de inicio y el uso de imágenes de trama es realmente innecesario.
    • No estoy seguro de que estoy de acuerdo con que mlissner. SVGs están causando graves de retraso en mi aplicación web, y necesito encontrar una manera más rápida de iconos de la pantalla.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea