Convertir JXL a SVG

Renderizar un SVG a píxeles es determinista: el archivo dice cuáles son las formas y un motor las dibuja. En sentido contrario no hay formas de ninguna clase. Un JPEG XL es una rejilla de colores, y cada curva, cada esquina y cada contorno que un SVG necesitaría hay que deducirlos de los sitios donde esos colores cambian.

Esa deducción es la vectorización, y es la razón de que este par se describa de otra manera que el resto del sitio. Nada de la salida es la entrada. Lo que sale es un dibujo nuevo que se parece al original en una medida que depende por completo de qué era el original, y de eso tratan los dos apartados siguientes.

Sale una fotografía mala dentro de un archivo grande. El trazador busca regiones de color parecido y dibuja un contorno alrededor de cada una, así que necesita que existan zonas planas. Una fotografía no las tiene: tiene una gradación continua en todas direcciones, de modo que el algoritmo se las inventa reduciendo la paleta, y lo que se ve es posterización.

Esto se midió antes de construir la función, no después. Una fotografía salió unas cuatro veces más grande que el original y visiblemente posterizada, y un degradado salió con bandas por el mismo motivo: un degradado es precisamente la ausencia de las zonas planas que el algoritmo busca. Como el registro atribuye a JPEG XL usos de archivo y de fotografía, buena parte de quien llega aquí trae justo ese tipo de archivo, y el consejo honrado es no convertirlo.

Dibujo plano, y funciona mejor de lo que la gente espera. Un logotipo hace el viaje de ida fielmente: en las pruebas, un original de 6 KB se convirtió en un SVG de 16 KB con los bordes nítidos, los colores correctos y las esquinas redondeadas intactas, y el resultado escala a una valla publicitaria sin ablandarse. Iconos, marcas de un solo color, ilustración plana y dibujo de línea escaneado se comportan igual.

Lo que tienen en común es que contienen de verdad lo que el trazador busca: zonas de un color con un límite definido entre ellas. El SVG que sale pesa más en bytes que la imagen de partida e infinitamente menos que un mapa de bits lo bastante grande para imprimir, que es el intercambio para el que existe el formato vectorial.

Es el caso en el que esta conversión gana su sitio. Un escudo municipal, el emblema de una cofradía, el logotipo de una peña o de una asociación de vecinos: piezas dibujadas hace décadas, cuyo archivo original o nunca fue digital o lleva veinte años perdido, y de las que solo queda una imagen sacada de un membrete, de un sello o de un cartel antiguo.

Ahí vectorizar no es un capricho de escala, es recuperar un activo. Lo que sale es un archivo de texto con formas que se pueden seleccionar, recolorear y limpiar en Inkscape o Illustrator, y que se puede versionar como cualquier otro código fuente. Con la advertencia del último apartado: para una rotulación, una imprenta o una cabecera oficial, el trazado es el punto de partida del rediseño, no la entrega.

Una captura de pantalla con texto produjo un SVG unas cuarenta veces más grande que la imagen de origen. La causa es el suavizado de bordes: cada letra se dibuja con una orla de colores intermedios, y cada una de esas orlas se convierte en su propio montón de trazados. Multiplica eso por una página de texto y el archivo explota mientras se ve peor que los píxeles que sustituye.

Si el JXL es sobre todo palabras, la pregunta suele ser para qué las quieres. Para leerlas o pegarlas, el reconocimiento de texto de este sitio es la herramienta y devuelve caracteres en vez de formas. Para conservar el aspecto de la página, un formato de mapa de bits lo conserva por una fracción del tamaño. Trazar tipografía solo se defiende en un logotipo con letras —cuatro caracteres que son dibujo y no texto—, y ahí se empieza por cuatro colores.

El número de colores es a cuántos tonos planos se reduce el dibujo, y es el ajuste que decide todo lo demás. Cuatro va bien para un logotipo o una marca de un solo color y da las formas más limpias y el archivo más pequeño. Ocho es el valor por omisión y cubre casi toda la ilustración plana. Dieciséis sigue el sombreado más de cerca a un coste real de tamaño, y treinta y dos es lo más parecido al original y con mucha diferencia lo más pesado.

El instinto es subirlo, y sobre la imagen equivocada ese instinto es lo que convierte un mal resultado en uno inservible: más colores sobre una fotografía significan más regiones inventadas y más trazados describiéndolas, no más realismo. La regla que aguanta es subirlo solo cuando ves una zona plana concreta del original que el trazado ha fundido con su vecina. Bajarlo es la dirección más útil: una marca de dos tintas trazada a cuatro colores vuelve a menudo con un tercer y un cuarto color hechos enteramente del borde suavizado entre los otros dos.

El ajuste de detalle controla lo apretado que el trazado sigue a los píxeles. Suave acepta un ajuste más holgado y descarta las formas menores de dieciséis píxeles, que es lo que elimina las motas que el suavizado deja a lo largo de cada borde. Equilibrado es el valor por omisión y reduce ambos umbrales a la mitad. Nítido sigue la rejilla de cerca y conserva formas de hasta dos píxeles, motas incluidas.

Desenfocar la imagen antes de trazar reduciría todavía más las motas y se ha dejado deliberadamente a cero, porque ablandaría justo los bordes nítidos que son la única razón de trazar un logotipo. Empieza en equilibrado. Pasa a suave cuando el resultado esté sembrado de fragmentos sueltos alrededor de los contornos, y a nítido solo cuando se haya tragado un detalle pequeño que sí importaba: una gracia tipográfica, un filete fino, una muesca de la marca.

Antes de trazar, la imagen se reduce a 1.600 píxeles en su lado más largo. El coste de trazar crece con el número de bordes y no con el tamaño del archivo, y una fotografía grande tiene un borde casi en cada sitio: sin ese techo, un original de doce megapíxeles puede producir un SVG de varios megabytes en decenas de segundos, que es peor que el problema que se venía a resolver.

A diferencia de una conversión entre mapas de bits, esto no es una pérdida de fidelidad. La salida es independiente de la resolución, así que un logotipo trazado a 1.600 píxeles y el mismo logotipo trazado a 4.000 se representan idénticos a cualquier tamaño; lo único que cambia es cuánto se ciñen los trazados a la rejilla original. La reducción se hace con el escalador filtrado del navegador y no con un bucle de vecino más próximo, porque una reducción sin filtrar convertiría cada diagonal en una escalera que el trazador reproduciría con toda fidelidad.

Aquí nada inspecciona la imagen para predecir si se va a trazar bien. Una heurística por número de colores sería una adivinanza, y la respuesta de verdad está disponible gratis un momento después: traza el archivo y compara los dos recuentos de bytes, que la interfaz muestra los dos.

Conviene convertirlo en costumbre. Un SVG más pequeño que el original, o parecido, casi siempre significa que el trazado encontró formas reales. Un SVG varias veces mayor significa que se las inventó, y la respuesta honrada es descartar el resultado y no afinar los ajustes: ninguna combinación de colores y detalle convierte una fotografía en dibujo plano, porque el dibujo plano nunca estuvo ahí.

La elección de la biblioteca fue una decisión de licencia y merece contarse, porque explica el techo de calidad. potrace y autotrace son GPL y quedan fuera. VTracer está correctamente licenciado y produce el mejor resultado de los cuatro, pero su único empaquetado para navegador no declara licencia alguna, lo que en la política de este proyecto se trata como bloqueado y no como permisivo.

Queda imagetracerjs: dominio público, 46 KB, JavaScript puro y ninguna dependencia binaria. Además hay dos arreglos añadidos encima. El trazador escribe anchura y altura en píxeles y ningún «viewBox», lo que produce un SVG técnicamente vectorial y prácticamente de tamaño fijo, así que se fuerza el viewBox; y omite el espacio de nombres XML, sin el cual Inkscape e Illustrator rechazan el archivo, así que se añade después.

Un trazado hereda todos los defectos de su origen. Si el JPEG XL es una copia de baja resolución, la captura de pantalla de un logotipo o una imagen que ha pasado por varios guardados con pérdida, el trazador reproduce fielmente como formas los bordes ablandados y los artefactos de compresión, y el resultado parece aproximadamente correcto y es incorrecto en el detalle cuando se amplía.

Para cualquier cosa que vaya a llevar una marca —un rótulo, una tirada de imprenta, una cabecera— el trazado es la plantilla y no el entregable. Todo esto, además, ocurre dentro de tu navegador: el descodificador de JPEG XL y el trazador se cargan bajo demanda, el archivo no sale del equipo y el límite gratuito es de 100 MB por archivo. Para el emblema de una entidad que todavía no se ha presentado en público, eso no es un detalle menor.