Iconos SVG frente a iconos PNG en sitios web modernos

91

Me pregunto por qué tan pocos sitios web modernos todavía usan solo PNG para los íconos (pero esta suposición se basa solo en mi observación). Hasta ahora, lo sé, las principales razones para usar PNG en lugar de SVG son IE8 y que SVG usa más potencia de CPU (pero no creo que esto sea un problema para los iconos simples de 1K). Puedo ver (y usamos actualmente) 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 una respuesta relevante, Icon Font vs SVG caché y la preocupación de la red se enfoca en el tráfico de red, pero se puede resolver fácilmente, 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 algún problema para confiar solo en SVG?

html svg icons Robert Goldwein
fuente
12
Estimado votante en contra, ¿podría hacerme saber qué se basa específicamente en la opinión de esta pregunta, cuando le pregunté por razones técnicas específicas ? Agradecería esos comentarios para poder mejorar mis preguntas adicionales.
Robert Goldwein
27
Robert, no parece estar basado en opiniones, pero la gente a veces entra en modo zombi y simplemente hojea las preguntas sin leerlas.
Brigand
Prefiero png por simplicidad y un DOM más limpio. Un punto para agregar a las respuestas a continuación es que con svg, puede cambiar el color dinámicamente. Si un icono tiene tres colores: regular, activo y flotante, son 3 imágenes png pero solo un svg.
CodeToad
@Robert [MODO ZOMBI] es un hombre excelente :): D
QMaster

Respuestas:

105

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

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

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

  • soporte del navegador
  • herramientas existentes para crear hojas de sprites PNG
  • la mayoría de las personas tienen un editor compatible con PNG en su computadora
  • sus gráficos son fotos u otras imágenes difíciles de vectorizar

Otras preocupaciones:

  • algunos editores de SVG pueden almacenar metadatos en sus SVG, lo que aumenta el tamaño del archivo y posiblemente exponga datos de forma no intencionada
    • por ejemplo, cuando exporta un PNG en Inkscape, guarda / guarda la ruta absoluta a este directorio en el SVG cuando guarda
    • Los compresores SVG pueden eliminar esto, pero no lo he probado (no dude en editarlo si lo ha hecho)
Bandido
fuente
Gracias, nuestra gente de gráficos crea SVG en Illustrator y luego los edita a mano, por lo que generalmente es <svg> con pocos elementos y atributos, por lo que estas preocupaciones son mudas; mi preocupación fue que pasé por alto algo serio, ya que veo casi solo beneficios sobre los PNG clásicos, pero probablemente se reduzca a <= IE8 o> IE8. Por ejemplo, el icono estándar con un círculo con el signo más es incluso más compacto en SVG que en PNG.
Robert Goldwein
Sí, algunas personas obtienen sus SVG de terceros y no los abren en un editor de texto ni se aseguran de que estén comprimidos. Simplemente no quería dejar eso fuera. Ahora que lo pienso, hay los mismos problemas con los PNG; a menudo se almacenan datos inútiles (en el contexto de la web) en ellos. Estos datos son utilizados por editores, exploradores de archivos y otros programas. Sin embargo, esto es más común con jpegs (las cámaras almacenan la marca, el modelo, la lente, la configuración, etc.).
Brigand
1
Gracias, así que supongo que realmente no hay ninguna desventaja por usar SVG en nuestros proyectos y los integraremos aún más. Gracias por tus conocimientos.
Robert Goldwein
El camino correcto para los iconos vectoriales son las fuentes de iconos. Para mí, la mayor desventaja de los iconos SVG es que el atributo de datos en CSS no funciona para IE10 / 11.
Gerfried
Sin embargo, las fuentes @Gerfried Icon tienen muchos problemas de accesibilidad. Tan pronto como un usuario decide bloquear las fuentes web o anular todas las fuentes con las suyas propias (por la razón que sea), todos esos bonitos iconos se rompen instantáneamente. Hay alternativas, pero yo mismo aún no he visto una solución que funcione al 100%. Este no es el caso de las imágenes SVG.
tomasz86
12

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

Digo esto como alguien que crea interfaces de usuario 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 logo muy conocido. CocaCola.svg era casi 20K. Como era un color sólido / plano, lo exporté como PNG-8 con una compresión de paleta de 12 colores y lo bajé a 1.6K (!!!) Para solo unos pocos logotipos no es gran cosa, pero cuando tienes que mostrar 40 de ellos ... bueno, te haces una idea.

La mejor parte es que puede convertir un PNG en una uri de datos base64 e incrustarlos directamente en su 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, debo decir que hay fortalezas y casos de uso para ambos, pero PNG ha abierto muchos más caminos y te enfrentas a menos resistencia cuando sigues la corriente. Para esos casos extraños en los que SVG encaja mejor, recomiendo este artículo y este recurso de aprendizaje

¡Feliz diseño!

Steven García
fuente
En mi opinión, esta es la mejor respuesta.
Marco Demaio
Debe especificar con qué logotipo de Coca Cola trabajó. El logo actual de 2007 es muy simple y tiene alrededor de 8KB . Todavía no es nada comparado con PNG-8, pero mucho mejor que 20KB.
Caleb Taylor
11

SVG es genial (cómo se describe muy bien FakeRainBrigand) y se renderiza maravillosamente, pero puede ser bastante complejo. Un navegador tiene más trabajo que 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 elementos secundarios que incluso se pueden agregar al DOM cuando se usa en línea.

No hice ninguna prueba de rendimiento valiosa, pero desde un 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 (estrés de 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 ...

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

Lo mejor de SVG es que se reproduce de forma agradable y nítida en cualquier densidad de píxeles.

corpirar
fuente
3

Es cierto, png se usa en casi todas partes. 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 amplías (porque siempre haces zoom en las imágenes, ¿no es así? ?) Creo que esta es la razón más importante.

barbaanto
fuente
26
Los SVG son MUY útiles para los iconos, que son omnipresentes en los sitios web modernos (móviles). Ofrecen escalado y estilo CSS sin penalizaciones de calidad, dos características importantes que no están presentes en los png.
user1884155
Desde la perspectiva del usuario, no tiene sentido, pero como desarrollador multimedia, es genial usar solo un archivo que se puede usar en cualquier pantalla y siempre conservará la misma calidad.
sebastian romero
2

Observemos que el SVG en cuanto al rendimiento puede volverse horrible. Incluso en navegadores modernos, como Chrome (¡escribiendo esto en 2019!), Una página similar a CMS con unos cientos (prácticamente 3-800) de íconos svg literalmente cuelga el navegador durante más de 5 segundos para terminar de renderizar. Mientras tanto, maximizando la CPU.

Como se señaló en otra parte, el recuento de SVG incrustados en la página aumenta exponencialmente la carga en el navegador, por lo que si se enfrenta a tal situación

Opción n. ° 1: convertir svgs en fuente web (consulte la tabla de rendimiento aquí: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Opción n. ° 2: recurrir a PNG antiguos y sencillos

En tales situaciones en las que ~ nunca quieres hacer nada elegante como la modificación de color sobre la marcha, y tienes MUCHAS instancias de SVG, ¡el antiguo PNG hace el trabajo y salva el día!

Joe7
fuente
No lo creo, SVG tiene un mejor rendimiento. recomendaría leer esto: vecta.io/blog/comparing-svg-and-png-file-sizes
Harry Sarshogh