Convertir SVG a AVIF

AVIF es el formato de imagen fija más eficiente disponible hoy, y merece la migración para fotografías, capturas y fichas de producto. Nada de eso vale para un dibujo. Un SVG es una descripción de formas: ya es casi lo más pequeño que esa imagen puede pesar, y se adapta a cualquier tamaño de pantalla sin necesitar un segundo archivo.

La medida es clara: un SVG de prueba de 140 bytes, renderizado a los 1.024 píxeles por defecto, dio un AVIF de 9.730 bytes. Un logo real pesa más como SVG —unos pocos kilobytes es lo normal—, pero la conclusión aguanta igual: si la razón para convertir era el peso del archivo, esta conversión juega en contra.

El primero es un SVG que en realidad no es un vector: un archivo vectorizado a partir de una foto, o uno con una imagen en base64 incrustada dentro, que puede pesar cientos de kilobytes y sale mucho más pequeño en AVIF. El segundo es un dibujo que depende de filtros —desenfoques, mezclas, recortes complejos— que cada navegador interpreta de forma algo distinta, así que renderizarlo una vez lo deja igual en todas partes.

El tercero es una limitación de la propia cadena de publicación: un CDN, un proxy de imágenes o un gestor de contenidos que trabaja con formatos rasterizados y rechaza el SVG. El cuarto es la confianza: un SVG es XML y puede llevar scripts, así que un sitio que admite dibujos subidos por usuarios a menudo los convierte a píxeles en vez de mantener un filtro de seguridad. Cualquiera de esos cuatro justifica esta conversión; «ahora todo va en AVIF» no.

Lo que se pierde suele pasar desapercibido. Un mismo SVG sirve a un móvil a triple densidad, a un portátil a doble, a un monitor externo a densidad simple y a una hoja impresa, todo desde los mismos bytes, y se ve nítido en cada uno. En cuanto se convierte a AVIF, sirve bien exactamente a uno de esos casos.

Recuperar el resto exige renderizar a varios anchos y escribir un conjunto de imágenes alternativas, que son tres o cuatro archivos y bastante marcado donde antes había uno solo. Esa complejidad añadida es el coste real de la conversión, más grande que la diferencia de kilobytes entre los dos formatos.

El ajuste de escala es la única decisión que pide esta conversión. Por defecto renderiza a 1.024 píxeles de ancho y la altura sigue las proporciones del propio dibujo; el rango va de 0,1 a 10, es decir de 102 a 10.240 píxeles.

Conviene tomar el ancho más grande que la imagen vaya a ocupar en pantalla y renderizar al doble, lo que cubre las pantallas de doble densidad sin necesitar un conjunto completo de tamaños. Un logo mostrado a 180 píxeles quiere un render de 360, no uno de 1.024 —y a ese tamaño el AVIF sí es pequeño, lo cual no cambia que el SVG seguía siendo más pequeño y servía todas las densidades a la vez.

AVIF es el modo de fotograma fijo de un códec de vídeo, construido para predecir bloques a partir de sus vecinos y descartar el detalle residual que un ojo en movimiento no notaría. En una fotografía ese residuo es textura. En un dibujo es el contorno de una letra o un trazo, y la calidad por defecto de 82 está pensada para lo primero.

El efecto visible es un ligero suavizado en los bordes limpios y, con ajustes bajos, un moteado tenue en las superficies planas grandes, donde el codificador decide que la diferencia no importa. Para arte plano conviene subir la calidad hacia 95: a estos tamaños cuesta unos pocos kilobytes más y marca la diferencia entre una marca que se ve dibujada y una que se ve fotografiada.

El canal alfa se conserva: en un dibujo de prueba, el píxel de la esquina del AVIF resultante da 0, 0, 0, 0, así que un logotipo recortado se apoya sobre cualquier fondo igual que lo hacía el SVG. Eso no es lo habitual entre los destinos rasterizados de este sitio —el mismo píxel de esquina llega opaco y negro en el destino GIF.

Se guarda como un segundo plano codificado junto al color, en la práctica una segunda imagen pequeña dentro del contenedor. En una fotografía ese peso adicional se pierde entre el ruido general; en un dibujo simple de pocos kilobytes es una parte visible del total, y explica en parte las cifras anteriores.

Todos los navegadores principales actuales descodifican AVIF desde hace varios años, lo suficiente para servirlo de forma directa en la mayoría de sitios. El SVG lo lee todo desde bastante antes que eso, y también lo leen muchas cosas que no son un navegador: programas de diseño, aplicaciones ofimáticas, sistemas de gestión de contenidos y clientes de correo que mostrarían un icono roto ante un AVIF.

Sustituir un vector por un AVIF reduce por tanto el conjunto de cosas que pueden mostrar el archivo, y el remedio habitual —un elemento picture con una imagen de respaldo— significa servir dos archivos donde el SVG solo habría bastado en ambos sitios. Es un coste real sin una ganancia que lo compense.

El codificador AV1 es el módulo WebAssembly más pesado de todo el sitio y el más lento de ejecutar, porque producir un AVIF fijo implica una búsqueda de predicción intra completa. Un solo dibujo de 1.024 píxeles tardó alrededor de un segundo de principio a fin en las pruebas, incluida la primera descarga del codificador.

Para un archivo suelto eso no se nota. Para una carpeta de doscientas ilustraciones es una espera real, y se repite en cada compilación si esto forma parte de un proceso automatizado. Merece la pena sopesarlo junto al resultado en bytes, no por separado: gastar tiempo de compilación para agrandar un vector es un mal negocio en los dos sentidos.

Suelta la carpeta entera. Cada dibujo se renderiza a la misma escala y se codifica con la misma calidad, y el resultado vuelve como un ZIP. Una escala compartida es lo que suele pedir un conjunto de ilustraciones, porque la coherencia entre todas pesa más que cualquier archivo suelto quedando individualmente óptimo.

Sus proporciones no coincidirán a menos que los viewBox de origen coincidieran ya —la escala fija el ancho y la altura sigue a cada dibujo—, así que conviene revisar las dimensiones antes de encajarlas en una cuadrícula que asuma una proporción común. Y conserva los SVG: son las copias maestras, y los AVIF son una exportación que se puede regenerar a cualquier tamaño.

resvg y el codificador AV1 se ejecutan como WebAssembly dentro de esta misma pestaña, así que un logotipo aún sin publicar no sale de tu equipo en ningún momento. Una conversión lenta es tu propio procesador trabajando, no una cola de espera en otro sitio.

Al no depender de un servidor tampoco hay límite diario ni cuenta que crear: se puede soltar una carpeta entera de golpe, hasta cien archivos por lote y hasta cien megabytes cada uno, y el resultado vuelve empaquetado en un ZIP.

AVIF tiene un modo genuinamente sin pérdida en la especificación, pero este camino no lo ofrece: el control de calidad arranca en 82 y el par se trata como con pérdida en todo el rango. Para una fotografía eso rara vez importa; para un logotipo con un color de marca exacto puede ser justo lo que se está intentando conservar.

Si el objetivo es que el color no cambie ni un valor, PNG es la salida sin pérdida real entre los formatos rasterizados de este sitio, y el SVG en sí mismo ya lo era antes de renderizar nada. Reservar el AVIF para cuando el peso del archivo importa más que la exactitud del último bit es la forma correcta de leer esta limitación.