SVG vs PNG: Guía Completa para Elegir el Formato Correcto

Por qué la elección del formato de imagen realmente importa

¿SVG o PNG? Elige mal y tu sección hero carga un archivo raster de 2 MB que se ve borroso en pantallas Retina. O pasas horas convirtiendo una foto en trazados vectoriales que se disparan a 14 MB de XML.

SVG y PNG no son competidores — son herramientas complementarias para trabajos fundamentalmente diferentes. Entender esta distinción es lo más impactante que puedes hacer por el rendimiento, la accesibilidad y la calidad visual de tu sitio.

Cómo funciona SVG por dentro

SVG (Scalable Vector Graphics) es un lenguaje de marcado basado en XML. En lugar de almacenar valores de color para cada píxel, almacena instrucciones: «dibuja un círculo en (50, 50) con radio 40 y rellénalo de azul.» El navegador ejecuta esas instrucciones en el momento del renderizado, haciendo la salida independiente de la resolución por diseño.

<!-- Un icono SVG simple — 247 bytes -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
  <path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
        fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Como SVG vive en el DOM, puedes estilizarlo con CSS, animarlo con JavaScript y hacerlo interactivo — una potencia única para visualizaciones e interfaces dinámicas.

• Renderizado matemático — nítido desde un favicon de 16 px hasta una valla publicitaria.
• El texto sigue siendo texto — indexable por buscadores, legible por lectores de pantalla.
• Estilizable y programable — cambia colores dinámicamente, agrega efectos hover, crea animaciones.
• Compresión excelente — gzip reduce SVG entre 60-80% porque XML es repetitivo.

Cómo funciona PNG por dentro

PNG (Portable Network Graphics) es un formato raster sin pérdida que almacena el color exacto de cada píxel. Muestra un PNG de 1000×1000 y el navegador mapea esos millones de valores a los píxeles de pantalla. Si el área de visualización es mayor, el navegador interpola — ahí es donde aparece el desenfoque.

PNG soporta transparencia alfa completa de 8 bits (256 niveles de opacidad por píxel) y usa compresión DEFLATE para reducir archivos sin perder datos.

• Fidelidad pixel-perfect — cada valor de color preservado exactamente.
• Transparencia alfa completa — bordes suaves sobre cualquier fondo.
• Soporte universal — cada navegador, cliente de email y SO maneja PNG.
• Renderizado predecible — sin análisis complejo de rutas; el navegador simplemente muestra los píxeles.

Tabla comparativa definitiva

Característica	SVG	PNG	Ganador
Escalabilidad	Infinita — nítido a cualquier resolución	Fija — se pixela al ampliar	SVG
Tamaño (simple)	Diminuto (frecuentemente < 1 KB para iconos)	Mayor (frecuentemente 5-50 KB)	SVG
Tamaño (complejo)	Enorme (millones de trazados)	Razonable con compresión	PNG
Transparencia	Soporte completo vía fill-opacity	Canal alfa de 8 bits completo	Empate
Animación	CSS, SMIL, JS, Lottie, GreenSock	No nativamente (necesita APNG)	SVG
Accesibilidad	Title/desc/aria-labels en el markup	Solo atributo alt	SVG
Editabilidad	Abrir en cualquier editor de texto	Requiere editor de imágenes	SVG
Seguridad	Riesgo XSS con SVG inline	Sin riesgo de ejecución de scripts	PNG

Benchmarks de rendimiento

Tiempos de carga y renderizado para 24 iconos UI (tamaño de visualización 64×64):

Métrica	SVG Sprite	SVGs individuales	PNG Sprite	PNGs individuales
Tamaño total	12 KB	18 KB (24 req.)	48 KB	96 KB (24 req.)
Transferencia gzip	4 KB	6 KB	44 KB	88 KB
Tiempo de análisis	2,1 ms	3,8 ms	0,4 ms	0,6 ms
Primer pintado (3G)	120 ms	340 ms	180 ms	890 ms

Matriz de casos de uso

Cuándo gana SVG

• Logos y marcas — un archivo, todos los tamaños, para siempre.
• Iconos y elementos UI — estiliza con CSS custom properties para temas.
• Visualizaciones de datos — D3.js, Chart.js, Recharts generan SVG.
• Ilustraciones animadas — Lottie, GreenSock o CSS puro.
• Mapas y diagramas — con zoom, interactivos, accesibles.

Cuándo gana PNG

• Fotografías — millones de colores únicos con degradados suaves.
• Capturas de pantalla — la precisión a nivel de píxel importa.
• Texturas complejas — los detalles orgánicos no se traducen a vectores.
• Campañas de email — muchos clientes de correo no soportan SVG.

Regla de decisión rápida: «¿Podría recrear esto en Figma solo con herramientas de formas?» Si sí, usa SVG. Si necesitarías importar una foto, usa PNG. ¿Necesitas convertir raster a vector? El vectorizador IA de VectoSolve lo hace en segundos.

Seguridad SVG: el vector XSS que debes conocer

SVG inline puede ejecutar JavaScript. Un archivo con etiquetas <script> o manejadores onload ejecuta código arbitrario en el navegador del usuario. Nunca renderices SVG subido por usuarios en inline sin sanitización.

Buenas prácticas modernas

1. SVG Sprites para sistemas de iconos

Agrupa iconos en un sprite y referencia con <use>. Una solicitud, iconos ilimitados, totalmente estilizables.

2. Optimiza sin descanso

• SVG: Pasa por el optimizador de VectoSolve o SVGO para eliminar metadatos y fusionar trazados.
• PNG: Usa pngquant u oxipng para compresión lossy/lossless.

3. Convierte raster a vector cuando tenga sentido

¿Tienes un logo PNG que debería ser SVG? VectoSolve usa IA para trazar imágenes raster en trazados vectoriales limpios — frecuentemente 90% más pequeño.

Conclusión: no hay un formato «mejor»

SVG y PNG existen porque las imágenes vienen en dos categorías: construidas (formas, texto, geometría) y capturadas (fotos, escaneos, capturas de pantalla). Asocia el formato al contenido, optimiza agresivamente y entregarás páginas rápidas, nítidas y accesibles en todos los dispositivos.

Atributo	SVG	PNG
Tipo	Vector (matemático)	Raster (píxeles)
Escalabilidad	Infinita — sin pérdida de calidad	Fija — se pixela al ampliar
Ideal para	Logos, iconos, elementos UI	Fotos, capturas, imágenes complejas
Tamaño típico (icono)	1–5 KB	10–50 KB
Soporte animación	Animaciones CSS + JS	Solo APNG (soporte limitado)