SVG vs PNG para gráficos web: cuándo usar cada formato

SVG y PNG tienen propósitos fundamentalmente diferentes, pero se superponen lo suficiente como para causar confusión. Uno almacena formas matemáticas. El otro almacena píxeles. Elegir el incorrecto le cuesta calidad o rendimiento; a veces, ambas cosas.

SVG (Scalable Vector Graphics) es un formato vectorial basado en XML. En lugar de almacenar datos de píxeles, describe formas, rutas y texto utilizando coordenadas matemáticas. Un archivo SVG es esencialmente código: puede abrirlo en un editor de texto y leer las instrucciones que le indican al navegador cómo dibujar la imagen.

Los SVG se pueden diseñar con CSS y manipular con JavaScript. Puede cambiar los colores al pasar el mouse, animar elementos individuales y hacer que los SVG respondan ajustando los atributos de viewBox. Para gráficos simples como logotipos e íconos, los SVG suelen pesar entre 1 y 5 KB.

PNG (Portable Network Graphics) es un formato rasterizado que almacena imágenes como una cuadrícula de píxeles de colores. Utiliza compresión sin pérdidas, por lo que la calidad es idéntica a la original, sin artefactos de compresión como JPEG. PNG admite transparencia total (canal alfa), lo que lo convierte en el favorito para imágenes que necesitan fondos transparentes.

PNG destaca en la reproducción de imágenes complejas: capturas de pantalla, fotografías con transparencia, texturas detalladas y degradados suaves. Sin embargo, debido a que almacena cada píxel, los archivos PNG pueden ser grandes. Una captura de pantalla 4K como PNG puede superar fácilmente los 5 MB.

Para un logotipo de empresa típico, la versión SVG puede pesar entre 2 y 5 KB. El mismo logotipo exportado como PNG con una resolución de 2x para pantallas retina podría tener fácilmente entre 30 y 80 KB. Esa es una diferencia de 10 a 15 veces.

Multiplique eso por todos los íconos, logotipos y elementos de la interfaz de usuario en una página y SVG ofrecerá una carga útil dramáticamente más liviana. Al realizar pruebas en un sitio de comercio electrónico con más de 60 íconos, el cambio de PNG a SVG redujo el ancho de banda relacionado con los íconos en un 87%.

Pero esta ventaja cambia en el caso de gráficos complejos. Una ilustración SVG con miles de puntos de anclaje y rutas detalladas puede superar el tamaño de un archivo PNG bien comprimido. Si su diseñador creó una ilustración con cientos de elementos individuales, verifique ambos formatos y compare.

Esta es la ventaja que define SVG. Un SVG tiene un aspecto perfecto en píxeles, ya sea que se muestre con 32 píxeles o 3200 píxeles de ancho. No existe el concepto de resolución: el navegador vuelve a dibujar las rutas vectoriales en cualquier tamaño necesario.

Esto es importante en pantallas que van desde monitores de escritorio de 72 DPI hasta teléfonos de más de 460 DPI. Un archivo SVG cubre todos los dispositivos. Un PNG no.

PNG tiene una cuadrícula de píxeles fija. Muestre un PNG de 200x200 a 400x400 píxeles (lo que ocurre en las pantallas retina) y el navegador interpola, haciendo que la imagen se vea suave o borrosa. La solución alternativa es exportar archivos PNG con una resolución de 2x o 3x, pero eso aumenta el tamaño del archivo proporcionalmente: un conjunto de iconos 3x puede ser 9 veces más grande.

PNG es la elección correcta siempre que la imagen sea fotográfica o fotográficamente compleja. Capturas de pantalla, fotografías de productos con transparencia, texturas complejas, imágenes con miles de colores y degradados sutiles: todo esto pertenece a los formatos rasterizados.

PNG también gana en pixel art e imágenes en las que cada píxel importa en un tamaño específico. Los sprites del juego, los detalles de favicon en 16x16 y las imágenes donde el comportamiento anti-aliasing necesita un control preciso se sirven mejor como PNG.

SVG es el claro ganador para logotipos, íconos, ilustraciones, infografías, mapas, gráficos y elementos de interfaz de usuario: cualquier cosa compuesta de formas limpias, líneas y colores sólidos. Si el gráfico se creó en Figma o Illustrator, exportarlo como SVG conserva perfectamente la calidad original.

SVG también destaca por su diseño responsivo. Puede crear una ilustración SVG que redistribuya u oculte elementos en diferentes puntos de interrupción utilizando consultas de medios CSS dentro del propio SVG. Los íconos en SVG pueden cambiar de color según el tema (modo oscuro/modo claro) sin servir archivos de imagen separados.

Los SVG pueden contener elementos de texto reales que los motores de búsqueda pueden indexar. Si su infografía tiene títulos y etiquetas como texto SVG, Google puede leerlos. Esta es una ventaja SEO significativa sobre PNG, donde todo el texto se integra en la cuadrícula de píxeles y es invisible para los rastreadores.

Para lectores de pantalla, SVG en línea con la adecuada role y aria-label Los atributos proporcionan una mejor accesibilidad que las imágenes rasterizadas. Las imágenes PNG dependen completamente del alternativo atributo de accesibilidad.

¿Necesitas cambiar entre formatos? tu puedes convertir SVG a PNG cuando necesita una versión rasterizada para compartir en redes sociales, clientes de correo electrónico que no procesan SVG o plataformas que solo aceptan imágenes rasterizadas.

Yendo en la otra dirección, puedes convertir PNG a SVG para imágenes que se beneficiarían de la escalabilidad vectorial. La conversión funciona mejor en gráficos simples con bordes limpios y colores limitados. Las fotografías detalladas no se convertirán bien a SVG.

Para cambios rápidos de formato sin instalar ningún software, iformat.io maneja ambas conversiones directamente en su navegador. Cargue, convierta y descargue en menos de 10 segundos.

Utilice SVG para logotipos, iconos, ilustraciones y cualquier cosa con formas limpias: se escala perfectamente y mantiene los archivos pequeños (normalmente entre 1 y 5 KB). Utilice PNG para capturas de pantalla, fotografías con transparencia e ilustraciones con precisión de píxeles. Para la mayoría de los proyectos web, convertir su conjunto de iconos de PNG a SVG reducirá el peso de la página y mejorará la representación en pantallas de alto DPI. Pruebe ambos formatos en caso de duda: la comparación del tamaño del archivo lleva 30 segundos y la elección correcta suele ser obvia.