SVG vs PNG: ¿qué formato de imagen debería utilizar?

Respuesta rápida

Elija SVG para logotipos, íconos, diagramas, arte lineal e ilustraciones hechas a partir de distintas formas. Elija PNG para capturas de pantalla, ilustraciones texturizadas e imágenes con detalles a nivel de píxeles. Para fotografías, JPEG, WebP o AVIF suelen ser más eficaces que cualquiera de los formatos.

La diferencia fundamental

PNG es un formato rasterizado: almacena una cuadrícula rectangular de píxeles de colores. SVG es un formato vectorial: describe la geometría con elementos XML como trazados, círculos, rectángulos, rellenos y trazos.

Esa diferencia afecta la escala. Al ampliar un PNG eventualmente se revelan píxeles porque el archivo tiene una resolución fija. Un SVG se vuelve a dibujar a partir de instrucciones matemáticas en el tamaño solicitado, por lo que un vector bien hecho se mantiene nítido en una pantalla pequeña o en un letrero grande.

Cuando SVG es la mejor opción

SVG suele ser mejor cuando la obra de arte tiene límites claros y una cantidad manejable de colores. Los ejemplos típicos incluyen marcas, íconos de interfaz, infografías, diagramas, ilustraciones planas, mapas, cuadros y trazados de corte.

SVG también se puede diseñar o animar en un navegador. Los rellenos y trazos individuales pueden responder a CSS, y se puede seguir buscando texto significativo cuando se almacena como texto en lugar de como rutas delineadas.

Un vector es más fácil de adaptar. Un diseñador puede seleccionar una forma, cambiar un color, ajustar una curva o eliminar un detalle sin volver a pintar los píxeles circundantes.

Cuando PNG es la mejor opción

PNG es una buena opción para contenido ráster sin pérdidas y transparencia alfa total. Úselo para capturas de pantalla, pixel art, texturas detalladas, ilustraciones pintadas y exportaciones de trama cuyos píxeles exactos deben permanecer sin cambios.

Intentar describir miles de transiciones de color fotográficas como rutas vectoriales crea un SVG grande y difícil de editar. El resultado puede parecer posterizado y aun así pesar más que la imagen original.

El rendimiento web no se trata sólo de la extensión

Un icono simple puede ser dramáticamente más pequeño que un SVG optimizado. Una ilustración compleja puede llegar a ser más grande que un PNG o WebP equivalente si contiene demasiadas rutas y coordenadas.

Mida los archivos reales. Optimice los metadatos SVG y la precisión numérica, luego pruebe la representación. Para PNG, exporte en las dimensiones reales de visualización cuando sea posible y evite enviar una fuente enorme simplemente para mostrar una pequeña miniatura.

SVG en línea puede guardar una solicitud y habilitar el estilo CSS, pero también aumenta el documento HTML. Los íconos reutilizados en todo el sitio a menudo se sirven mejor como archivos externos que se pueden almacenar en caché o como parte de un sistema de íconos controlado.

Consideraciones de accesibilidad y seguridad

Una imagen informativa aún necesita un nombre accesible o texto adyacente, independientemente del formato. La tecnología de asistencia debe ignorar las imágenes decorativas.

SVG es contenido XML activo y puede contener enlaces, estilos o scripts. Acepte únicamente archivos SVG confiables o desinfecte el marcado proporcionado por el usuario antes de mostrarlo en línea. PNG no es un marcado ejecutable, lo que simplifica su modelo de renderizado.

¿Qué formato debe utilizar un logotipo?

Mantenga un logotipo maestro como SVG cuando haya rutas vectoriales limpias disponibles. Exporte copias PNG para sistemas que no aceptan SVG, firmas de correo electrónico o ubicaciones de ráster específicas. Esto le brinda una fuente editable y alternativas predecibles.

Para un logotipo solo de trama, convierta la versión limpia de mayor resolución, inspeccione los contadores de letras y las curvas y verifique el resultado en un editor de vectores. No asuma que cambiar un nombre de archivo de .png a .svg crea rutas vectoriales.

Lista de verificación de decisiones

Utilice SVG cuando la obra de arte se compone principalmente de formas, debe escalarse a muchos tamaños, necesita rutas editables o necesita una máquina de corte. Utilice PNG cuando la imagen dependa de píxeles, texturas, capturas de pantalla exactas o transparencia detallada.

Convierta un logotipo ráster con Imagen a SVG o cree un archivo de entrega ráster con Convertidor de SVG a PNG.