SVG a PNG — cuándo necesitas píxeles de verdad (y cuándo no)

Hay una clase particular de frustración en tener un logo perfecto y ningún sitio donde ponerlo. El SVG es nítido a cualquier tamaño, no pesa casi nada y se ve impecable en el navegador, y entonces intentas meterlo en un correo, o ponerlo como imagen de vista previa en redes, o pegarlo en un software un pelín demasiado viejo, y sencillamente no aparece. En blanco. El archivo está bien. El sitio donde lo pones simplemente no habla vector.

Esa es toda la razón por la que SVG a PNG existe como tarea. No porque PNG sea mejor —normalmente no lo es— sino porque buena parte del mundo solo sabe leer píxeles.

Vector y ráster, en breve

Un SVG no es una imagen. Es un conjunto de instrucciones: dibuja un círculo aquí, este trazado allá, rellénalo de este color. El navegador sigue las instrucciones y las renderiza frescas al tamaño que le pidas, así que queda afiladísimo a 16 píxeles o a 16.000, y el archivo se mantiene minúsculo porque son solo matemáticas.

Un PNG es lo contrario. Es una cuadrícula fija de píxeles de color, decidida una vez, a una sola resolución. Amplíalo más allá de su tamaño nativo y se vuelve blando y pixelado, porque no hay más píxeles que dibujar, solo los que van cocidos. La ventaja es que todo sabe leer una cuadrícula de píxeles. Es la moneda universal de las imágenes.

Así que convertir SVG a PNG es cambiar escalabilidad infinita por compatibilidad universal. Que sea un buen trato depende por completo de adónde va la imagen.

Cuándo necesitas de verdad PNG

Tres casos en los que rasterizo sin dudar, porque el vector sencillamente no va a funcionar:

Correo. Los clientes de correo no renderizan SVG —Gmail, Outlook, Apple Mail, esencialmente todos lo rechazan por motivos de seguridad—. Un logo en una firma de correo o en una newsletter tiene que ser un formato ráster. PNG, porque quieres la transparencia.

Imágenes de vista previa para redes y OG. La tarjetita que aparece cuando compartes un enlace —la imagen de Open Graph— tiene que ser un ráster de tamaño fijo, típicamente de 1200x630. Las plataformas no renderizan un SVG ahí. Si tu arte original es vector, exportas un PNG a ese tamaño exacto.

Software viejo o sin conexión. Un montón de apps de escritorio, herramientas de presentaciones, editores de documentos y flujos de impresión o no pueden importar SVG o hacen un estropicio con él. Pasarles un PNG a una resolución generosa funciona, siempre, sin sorpresas.

En los tres, el factor que decide es el mismo: el destino no puede leer vector físicamente, así que la escalabilidad da igual. Un formato que se renderiza le gana a uno que no, siempre.

Lo único que hay que clavar: la resolución

Este es el error que más veo, y que cometí yo mismo al principio. Como un PNG queda fijado al tamaño con que lo exportas, tienes que exportarlo lo bastante grande, e idealmente al tamaño exacto al que lo vas a mostrar.

Exporta un logo como PNG de 100x100 y luego muéstralo a 300 píxeles en una pantalla de alta densidad, y se verá blando y dentado. Los píxeles para llenar ese espacio no existen. La solución es fácil: exporta al tamaño que vas a usar de verdad, o mayor, sobre todo para pantallas Retina y 4K, donde a menudo quieres el doble del tamaño nominal. Esta es la única ventaja real que cedes al dejar el vector, así que dedica un momento a acertar con la resolución de destino.

Cuándo NO deberías rasterizar

Si el destino sí sabe leer SVG, quédate con el SVG. Punto.

En tu propia web, un icono o un logo debería seguir siendo vector. Estará nítido en cada pantalla y a cada nivel de zoom, será más pequeño que el PNG equivalente y nunca tendrás que reexportar una versión más grande cuando salga un display de densidad todavía mayor. Rasterizarlo ahí es pura pérdida: estarías tirando el mejor rasgo del formato para ganar una compatibilidad que ya tienes.

Y no rasterices tu maestro. El SVG es la fuente de la verdad; puede generar un PNG a cualquier tamaño, en cualquier momento. Un PNG no puede ir en sentido contrario: no puedes recuperar trazados vectoriales limpios de una cuadrícula de píxeles. Así que guarda el SVG, y trata cada PNG como una exportación desechable para un sitio concreto. El mismo principio que en todo lo demás: convierte la copia que publicas, guarda el original que editas.

Cómo lo hago yo

Cuando necesito píxeles de un vector, uso el convertidor de SVG a PNG de aquí. Renderiza el SVG en tu navegador y te entrega el PNG, así que nada se sube a ningún lado —todo ocurre en tu equipo—. Elige un tamaño que encaje con su destino y obtén un PNG limpio con la transparencia intacta.

Pero la habilidad de verdad no es la conversión. Es la pregunta que te haces antes: ¿este sitio lee vector? Si sí, deja el SVG en paz y disfruta de la opción más nítida y más pequeña que existe. Si no —correo, tarjeta OG, alguna app vieja testaruda—, entonces rasteriza, al tamaño correcto, y guarda tu SVG a salvo para la próxima. Acierta con esa decisión y no volverás a tener una caja en blanco donde debería estar tu logo.