Convertir SVG a PNG

Fijar una resolución que nunca estuvo fijada

Un SVG no tiene píxeles ni tamaño. Es un conjunto de instrucciones de dibujo (este trazado, ese relleno, esta curva), y por eso se mantiene nítido a cualquier ampliación y por eso un logo debería vivir así el mayor tiempo posible. Rasterizarlo lo compromete a un solo tamaño para siempre. Así que elige el tamaño pensando en el lugar más grande donde vaya a aparecer la imagen, y recuerda que una pantalla con el doble o el triple de densidad necesita el doble o el triple de píxeles: un ícono mostrado a 64 puntos necesita 192 píxeles para verse bien en un celular moderno.

El texto es donde más a menudo sale mal, y vale la pena entender por qué. Un SVG dice “escribe este texto en Helvetica Neue”; si la máquina que lo renderiza no tiene Helvetica Neue, se sustituye por otra y el diseño se desplaza: un título que cabía en su recuadro ahora se desborda. Una fuente web referenciada por URL aquí no se carga en absoluto, porque un SVG que se renderiza como imagen está aislado a propósito y no puede conectarse a la red. La solución es la que todo diseñador termina aprendiendo: convierte el texto en contornos antes de exportar, y las letras se vuelven trazados que no necesitan ninguna fuente.

Ese mismo aislamiento explica las demás sorpresas. Un mapa de bits vinculado (un elemento image que apunta a un .png en otro lugar) no se muestra. Los scripts no se ejecutan, así que un SVG que se dibuja a sí mismo con JavaScript sale vacío o a medio construir. La animación declarativa se renderiza en su estado inicial, es decir, una imagen fija del primer fotograma. Todo lo autocontenido funciona perfectamente: degradados, filtros, trazados de recorte, máscaras, imágenes incrustadas como data URI y efectos de desenfoque se renderizan tal como se dibujaron.

PNG es el destino correcto para esto, y JPEG no lo sería. El arte vectorial son colores planos y bordes definidos, justo lo que PNG comprime bien y JPEG arruina: cada borde nítido de un JPEG se lleva un halo. La transparencia se conserva como un canal alfa real, así que un logo exportado al tamaño adecuado queda bien sobre cualquier fondo. Si el SVG no declara dimensiones, solo un viewBox, la relación de aspecto sale de ahí y el tamaño lo eliges tú.

Si buscas otra cosa

resvg y rsvg-convert renderizan SVG desde la línea de comandos con un conjunto de fuentes real disponible, así que el texto sale con la tipografía prevista y no con una sustituta: rsvg-convert -w 512 in.svg -o out.png es el comando completo. Inkscape --export-type=png --export-dpi=300 es la implementación más completa de la especificación que existe, y maneja filtros y modos de fusión que los renderizadores más ligeros solo aproximan.

Antes de rasterizar, comprueba si algo realmente necesita un PNG. Todos los navegadores dibujan SVG de forma nativa desde hace más de una década, y para un logo o un ícono en un sitio web el SVG es más liviano, infinitamente nítido y se le puede dar estilo con CSS. Los casos que de verdad necesitan píxeles son menos de lo que se cree: favicons, imágenes de vista previa para redes sociales, correo electrónico, recursos para tiendas de aplicaciones y programas que no leen vectores.