SVG vs PNG: cual usar y por qué

Actualmente, en la World Wide Web, hay más formatos de archivos y extensiones de las que el usuario promedio puede comprender. En este artículo, aprenderás dos de los más populares para imágenes: SVG y PNG. Estos dos formatos a menudo se confunden y no se utilizan en todo su potencial. Nos centraremos en las diferencias entre ellos y algunas de las mejores prácticas para aplicarlos a tu próximo proyecto de página web.

SVG

SVG, significa gráficos vectoriales escalables, es un formato web utilizado para mostrar imágenes basadas en vectores. Este formato toma datos de ruta vectorial y los convierte a XML para mostrarlos en un navegador web. Aunque los SVG se pueden crear con cualquier editor de texto, la forma más fácil de crearlos es mediante el uso de software de dibujo como Adobe Illustrator o Sketch. Los SVG están compuestos completamente de código, se pueden escalar a cualquier tamaño y mantener una nitidez perfecta, lo que los convierte en la solución ideal para muchos elementos web que se visualizarán en múltiples resoluciones.

Ventajas de SVG

• Soporte de escala ilimitado
• Cada elemento puede ser ajustado o animado
• Tamaño de archivo pequeño
• La W3C lo recomienda

Desventajas de SVG

• Puede requerir conocimiento de programación
• No es compatible con color CMYK

PNG

PNG, abreviatura de gráficos de red portátiles, es el formato de imagen más común en la web detrás del todopoderoso JPEG. Este formato de imagen fue desarrollado para ser una versión mejorada del GIF. Inventado en 1994, PNG es un formato de imagen sin pérdidas basado en ráster que admite color de 32 bits (16 millones de colores en total) y 256 niveles de transparencia. A modo de comparación, una imagen GIF admite un máximo de 256 colores y solo dos niveles de transparencia: 0 o 100. Esto significa que los PNG pueden utilizarse con transparencia parcial, sobreponiéndose a otros elementos, lo que los convierte en un recurso popular para los diseñadores web.

Ventajas de PNG

• Admite un espectro RGB-A completo (32 bits)
• Transparencia parcial
• Compresión sin perdidas

Desventajas de PNG

• Escalar la imagen da como resultado la pérdida de calidad
• No es compatible con el color CMYK
• Resolución más grande = tamaño de archivo más grande

La diferencia

Para ponerlo en términos simples, una imagen SVG podría convertirse en un PNG, pero un PNG no puede  convertirse en un SVG. Como SVG se basa en vectores, no se puede convertir tu foto familiar en este formato. Por otro lado, si alguien tiene una imagen SVG, como un ícono o un logotipo, podría convertirse en PNG, y las diferencias se notarán sólo cuando la imagen se amplía o disminuye. Esto se debe a que un PNG es un conjunto definido de píxeles y cualquier escala obliga a los píxeles a combinarse, lo que provoca una pérdida de calidad.

Cuándo usar SVG

• Logo
• Iconos
• Archivos vectoriales

Cuándo usar PNG

• Imágenes donde se desea transparencia
• Imágenes de colores complejos (ten en cuenta el tamaño del archivo)

SVG y PNG tienen características, ventajas y desventajas distintas. Hay un tiempo apropiado para usar cada una, dependiendo del proyecto. En Ca Design Studio, nuestro equipo web te ayudará a decidir qué formatos de imágenes y ubicaciones son las mejores para tu sitio web. ¡Consulta nuestro portafolio de sitios web y contáctenos para comenzar tu próximo proyecto!