PNG o SVG: ¿cuál conviene usar?
PNG o SVG: cómo funciona cada formato, la transparencia, el tamaño de archivo, el comportamiento al ampliar y los escenarios recomendados, además de los métodos para convertir entre PNG y SVG.
1. La diferencia esencial: mallas de píxeles frente a trayectorias matemáticas
El PNG es una imagen de mapa de bits: corta la imagen en píxeles individuales y guarda el color de cada uno. Ampliar un PNG consiste, en el fondo, en estirar los píxeles, y por eso aparecen los dientes de sierra y el desenfoque. El SVG es una imagen vectorial: describe las formas con instrucciones matemáticas como coordenadas y curvas de Bézier, y el navegador vuelve a dibujar el gráfico con el nuevo tamaño, de modo que mantiene la nitidez a cualquier escala. De ese único hecho nacen casi todas las diferencias entre ambos formatos.
En cuanto a la transparencia, el PNG admite canal alfa y puede guardar un fondo transparente. El SVG es transparente por naturaleza: mientras no dibujes un rectángulo de fondo, todo lo que rodea al gráfico queda transparente. Como apunte, el JPG no admite transparencia: su fondo blanco es un color pintado de verdad en la imagen.
2. Tamaño de archivo y comportamiento de carga
Para gráficos sencillos como iconos o logos, un SVG suele pesar solo unos pocos KB, y un único archivo se adapta a cualquier densidad de pantalla. El PNG, en cambio, suele necesitar versiones @2x y @3x para seguir nítido en pantallas Retina, lo que multiplica el peso. Con las fotos ocurre lo contrario: los degradados de color tan ricos generan una cantidad enorme de trazados al vectorizar, así que el SVG acaba siendo mucho mayor que el JPG o el WEBP, sin compensar.
La explicación está en cómo comprime cada formato. El PNG registra los píxeles con compresión sin pérdida, de modo que cuanto más compleja es la imagen, mayor es el archivo. El SVG es texto puro, en el que las instrucciones de trazado y las coordenadas repetidas se comprimen muy bien. Por eso dos formatos que ambos se anuncian «sin pérdida» se comportan de forma tan distinta en cuanto a peso.
| Escenario de uso | Formato recomendado | Motivo |
|---|---|---|
| Iconos / logos web | SVG | Un archivo para todas las resoluciones y color con CSS |
| Fotos | JPG / WEBP | Archivos ligeros con fidelidad fotográfica |
| Capturas de pantalla | PNG | Precisión al píxel y compresión sin pérdida |
| Gráficos de datos | SVG | Nítidos al escalar, programables e interactivos |
| Avatares en redes sociales | PNG / JPG | La mayoría de plataformas solo aceptan mapas de bits |
3. Cuándo usar PNG
- Fotos, iluminación compleja y degradados delicados;
- Capturas de pantalla e instantáneas de interfaz que exigen precisión al píxel;
- Situaciones en las que la plataforma solo acepta mapas de bits, como la subida de avatares en algunos paneles de administración;
- Como reserva de compatibilidad: entornos muy antiguos que no admiten SVG.
4. Cuándo usar SVG
- Iconos de web y logos: un archivo para todas las resoluciones, nítidos también en pantallas Retina;
- Gráficos cuyo color se cambia con CSS o JavaScript o que necesitan animación de trazado;
- Gráficos de datos: librerías de visualización como ECharts generan SVG por defecto;
- Impresión, grabado láser y rotulación, donde la máquina lee trazados vectoriales.
5. ¿Se pueden convertir PNG y SVG entre sí?
Sí. De PNG a SVG: usa la herramienta de PolySVG para convertir PNG en SVG o la herramienta de conversión de imágenes a SVG, sube el archivo y pulsa generar para vectorizarlo: con iconos y logos el resultado es excelente, mientras que las fotos adoptan un estilo ilustrado. La conversión es gratuita y un PNG transparente conserva su fondo transparente. El SVG obtenido después puede abrirse en el editor para cambiar colores y quitar el fondo, cerrando así el flujo de trabajo. De SVG a PNG: abre el archivo en el editor de SVG online y exporta un PNG a la resolución que quieras, ideal para insertar en documentos o crear vistas previas.
Conviene tener en cuenta un detalle: pasar de PNG a SVG no es un simple guardado con otro nombre, es una vectorización que vuelve a dibujar los contornos. Los materiales gráficos dan trazados limpios y las fotos se condensan en bloques de color. Previsualiza el resultado en la herramienta y comprueba que el estilo se ajusta a lo que esperas antes de descargarlo.
Regla en una línea: iconos, logos y gráficos, SVG; fotos y capturas, PNG/JPG/WEBP. Si dudas, para el contenido gráfico prioriza el SVG. Para profundizar, lee ¿Qué es SVG? y Tres formas de convertir una imagen en SVG.
Preguntas frecuentes
¿Para los iconos de una web conviene PNG o SVG?
Prioriza el SVG: un único archivo se adapta a cualquier densidad de pantalla, pesa poco y admite color por CSS. Usa PNG solo como reserva cuando la plataforma no admite SVG.
¿Un PNG transparente sigue siendo transparente al convertirlo a SVG?
Sí. Al convertir con la herramienta de PolySVG para PNG en SVG, las zonas transparentes se conservan por completo y no aparece un fondo blanco.
¿Conviene convertir fotos a SVG?
No si buscas fidelidad fotográfica. La vectorización resume la foto en bloques de color y produce un estilo ilustrado; para fotos conviene seguir con JPG / WEBP.