SVG vs PNG: ¿qué formato elegir?

El logotipo se ve nítido en el portátil y borroso en el monitor grande, con el mismo archivo en los dos sitios. Cuando eso ocurre, la pregunta deja de ser de diseño y pasa a ser de formato, y ahí entra de lleno la comparación SVG vs PNG.

Los dos pueden mostrar la misma imagen y aun así no ser intercambiables. Uno guarda instrucciones; el otro, una rejilla de píxeles con un número fijo de columnas y filas.

La extensión no explica la diferencia

Un PNG es un mapa de bits comprimido sin pérdida y con canal alfa. Lo que contiene es la lista de píxeles que alguien decidió guardar. Un SVG es XML y contiene formas, colores, posiciones y, si hace falta, mapas de bits incrustados. Cuando el navegador lo muestra, lo dibuja al tamaño que se le pide.

La consecuencia se ve al ampliar. El PNG no tiene más información que la que ya tenía, así que el programa inventa píxeles nuevos por interpolación. El SVG se vuelve a renderizar a la resolución de destino, y por eso a 2× y a 3× sigue mostrando bordes limpios.

La transparencia funciona en ambos, pero no igual. En PNG hay un canal alfa por píxel; en SVG hay opacidad por forma y por relleno o trazo.

Peso y resolución, sin promesas raras

Antes de mirar bytes conviene mirar cuántos archivos hacen falta. Un logotipo de 300 por 100 píxeles ocupa 30.000 píxeles en una pantalla normal, 120.000 en una de doble densidad y 270.000 en una de triple. En PNG eso son tres archivos; en SVG, uno que se adapta a los tres.

Un dato que ayuda a dimensionar. Una imagen de 2.400 por 2.400 píxeles con canal alfa son 5,76 megapíxeles, y en bruto, a cuatro bytes por píxel, ocupa unos 23 MB antes de comprimir. El PNG comprimido será bastante más pequeño, pero el punto de partida es ese.

Un SVG de las mismas dimensiones no guarda ninguno de esos píxeles. Guarda la descripción del dibujo. Con geometría sencilla, el archivo pesa poco y sirve para todos los tamaños. Con geometría compleja, puede pesar más que una imagen, así que la idea de que vectorial equivale a ligero es falsa en general.

Un SVG con una foto dentro

Ahí está el matiz que estropea muchas decisiones. Un SVG puede incrustar una imagen rasterizada mediante un elemento de imagen. Ese contenido sigue siendo un mapa de bits: si se amplía el SVG, la foto se pixelará aunque los bordes vectoriales del resto sigan nítidos.

Cuándo un SVG no es la respuesta

No todo dibujo gana al convertirse en vector. Una fotografía, una captura de pantalla o una ilustración con texturas y degradados complejos funcionan mejor como PNG, y además el PNG conserva el aspecto exacto que se aprobó.

Tampoco conviene usar SVG para un icono que se va a servir una sola vez en un tamaño fijo y pequeño. La ventaja de escalar sin pérdida no aporta nada si nunca se va a escalar.

Y hay un límite que conviene decir en voz alta: convertir un mapa de bits en vector es un trazado, no una recuperación de información. No existe una transformación sin pérdidas de PNG a SVG, y cualquier proceso que se presente como tal está aproximando contornos. El resultado será una aproximación de formas, no los detalles originales.

La decisión en tres preguntas

Primera: ¿el dibujo se va a mostrar a varios tamaños o en pantallas de alta densidad? Si la respuesta es sí, el SVG ahorra archivos y trabajo.

Segunda: ¿va a cambiar el color, el texto o alguna forma más adelante? Un SVG se edita; un PNG exportado hay que rehacerlo desde el original.

Tercera: ¿el dibujo depende de texturas, sombras suaves o detalle fotográfico? Entonces el PNG es el formato que conserva lo que se ve.

Cuando las tres respuestas apuntan en la misma dirección, la decisión es fácil. Cuando se cruzan, la salida habitual es doble: SVG como fuente y PNG como copia para el sitio donde el vector no encaje.

Exportar la versión correcta desde el editor

El Editor vectorial exporta tanto SVG como PNG, y en ambos casos la entrega se resuelve con la descarga del navegador. Eso permite tener el archivo editable y la copia rasterizada sin cambiar de herramienta.

Ese PNG conviene generarlo al tamaño final y no al tamaño de trabajo. Un PNG exportado a 600 píxeles y ampliado después a 1.200 vuelve al problema del principio.

Si la duda sigue siendo entre contenedores vectoriales, la comparación entre SVG, AI y EPS cubre el otro lado. Y cuando el problema no es el formato sino el peso del archivo, la guía para preparar y optimizar archivos SVG para la web entra en el detalle. Hay más guías en la biblioteca de guías.