html5 - icon - svg a fuente

Iconos SVG contra iconos PNG en sitios web modernos (4)

Me pregunto por qué tan pocos sitios web modernos todavía usan PNG para iconos (pero esta suposición se basa únicamente en mi observación). Hasta ahora, sé que las razones principales para usar PNG sobre SVG son IE8 y que SVG usa más potencia de CPU (pero no creo que esto sea un problema para simples iconos de 1K). Puedo ver (y actualmente utilizamos) muchas ventajas en el uso de SVG, ya sea cuando se usa como sprites, como imágenes, o como SVG en línea.

(Pregunta Buscando una investigación: PNG Sprite vs SVG sprite vs Icon fonts se enfoca en el rendimiento y no tiene respuesta relevante, Icon Font vs. SVG caching y network worry se enfoca en el tráfico de la red, pero es fácilmente solucionable por ejemplo mediante plantillas.)

Si el nuevo sitio web solo admite navegadores modernos, ¿hay alguna razón para no usar SVG (o hay alguna razón para usar PNG para los iconos)? Si no nos importa IE8 y el uso de SVG está respaldado por plantillas y / o almacenamiento en caché, ¿hay alguna trampa para confiar solo en los SVG?

A menos que muestre formas / diseños muy simples o específicamente necesite modificar partes del gráfico con la aplicación, no hay muchos incentivos para usar SVG. Puede producir un PNG al doble del tamaño original (para pantallas retina) y aún tener el tamaño del archivo en un orden de magnitud menor, sin mencionar una mejor cobertura para los navegadores heredados (no es necesario javascript o polyfills).

Lo digo como alguien que construye UI con gráficos vectoriales. Es una herramienta de diseño impresionante, pero para la entrega / ancho de banda / alcance es difícil superar PNG. Anoche probé un logotipo bien conocido. CocaCola.svg era casi 20K. Como era un color sólido / plano, exporté como PNG-8 con compresión de paleta de 12 colores y lo bajé a 1.6K (!!!) Para algunos logos, no es gran cosa, pero cuando tienes que mostrar 40 de ellos ... bueno, ya entiendes la imagen.

La mejor parte es que puedes convertir un archivo PNG en un uri de datos base64 e insertarlo directamente en tu hoja de estilo. Esto no se recomienda con SVG, un formato que ya es famoso por problemas de rendimiento y compatibilidad, especialmente en navegadores móviles.

Para terminar, tengo que decir que hay puntos fuertes y casos de uso para ambos, pero PNG ha abierto muchos más senderos y te enfrentas a menos resistencia cuando vas con la corriente. Para esos casos extraños en los que SVG se ajusta mejor, recomiendo mucho este artículo y este recurso de aprendizaje.

¡Feliz diseño!

Es cierto, png se usa en casi todos lados. Creo que es porque el SVG, en la mayoría de los casos, es bastante inútil, la imagen debería ser más grande (creo) y la computadora tiene que regenerar la imagen cada vez que la acercas (porque siempre haces zoom en las imágenes, ¿no? ?) Creo que esta es la razón más importante.

Razones por las que SVG puede ser una buena opción:

admite perfectamente navegadores de cualquier tamaño, especialmente con el background-size de css
puedes escalarlos hacia arriba / abajo, como a un efecto de desplazamiento
puede incrustar SVG y hacer modificaciones en tiempo real con JavaScript y el DOM
puede diseñar SVG y partes de SVG con CSS (colores cambiantes, contornos, etc.)
puede generar SVG dinámicamente, ya sea en el cliente o servidor. Debido a su naturaleza basada en texto, no necesita bibliotecas de bajo nivel o servidores potentes para crearlas.

Razones por las que PNG puede ser una buena opción:

soporte de navegador
herramientas existentes para crear spritesheets PNG
la mayoría de las personas tiene un editor compatible con PNG en su computadora
tus gráficos son fotos u otras imágenes difíciles de vectorizar

Otras preocupaciones:

algunos editores de SVG pueden almacenar metadatos en sus archivos SVG, lo que aumenta el tamaño del archivo y, posiblemente, la exposición involuntaria de datos
- por ejemplo, cuando exporta un PNG en Inkscape, guardaba / guardaba la ruta absoluta a este directorio en el SVG cuando guardaba
- Los compresores SVG pueden eliminar esto, pero no lo he probado (no dude en editarlo si lo tiene)

SVG es genial (cómo FakeRainBrigand se describe muy bien) y se reproduce muy bien, pero puede ser bastante complejo. Un navegador tiene más trabajo por hacer cuando se trata de datos vectoriales en lugar de imágenes basadas en píxeles. Una imagen es un elemento, un SVG puede tener muchos hijos que incluso se pueden agregar al DOM cuando se usan en línea.

No hice ninguna prueba de rendimiento valiosa, pero desde el punto de vista lógico, SVG debe usarse con cuidado cuando se trata de rendimiento, especialmente cuando se trata de navegadores móviles de mediana edad (tensión de la CPU). Sería muy útil tener un gráfico en el que se pueda ver la potencia de la CPU consumida por 100 imágenes SVG frente a 100 imágenes PNG en diferentes dispositivos Android e IOS ...

Otra cosa que molesta con SVG es que la etiqueta necesita un atributo de ancho y alto para algunos navegadores Android / Samsung cualquiera y nuestro viejo IE. Y la mayoría de los editores SVG modernos como A *** e Illustrator solo agregan el atributo "viewBox".

Lo mejor de SVG es que resulta agradable y nítido en cualquier densidad de píxeles.