Guía de uso
Convertir SVG a AVIF lleva un dibujo vectorial grande y detallado a uno de los formatos más eficientes que se pueden usar hoy en la web. La herramienta rasteriza tu archivo a 144 DPI, limita el lado mayor a 4000 píxeles y guarda un AVIF con calidad 60 manteniendo las zonas transparentes. Donde más se nota es en imágenes con muchos píxeles: fondos con degradados, ilustraciones de cabecera a todo lo ancho e infografías largas.
Qué dibujos ganan más con AVIF
El punto fuerte de AVIF es guardar transiciones suaves que ocupan áreas grandes con muy pocos datos. Por eso la ganancia depende mucho del tipo de dibujo:
- Ilustraciones a todo lo ancho y con muchos colores: es el terreno donde AVIF rinde más.
- Fondos hechos con degradados y filtros de desenfoque, que en PNG pesarían varios megas, quedan en una fracción.
- Infografías largas con cientos de formas, que como vector pueden hacer sufrir al navegador, se vuelven ligeras y predecibles.
- Separadores y patrones decorativos que se repiten por todo el sitio se almacenan en caché como un AVIF pequeño.
En cambio, un logotipo de dos colores, un plano técnico hecho de líneas finas o un esquema lleno de etiquetas pequeñas no son buenos candidatos. En ese tipo de contenido la compresión con pérdida deja huella en los bordes y el ahorro es pequeño.
Calidad 60: cuidado con líneas finas y textos
Un 60 en AVIF no equivale a un 60 en JPEG o WebP: el formato consigue un aspecto parecido con ajustes más bajos. Las zonas de aspecto fotográfico y los degradados salen limpios. Sin embargo, las líneas de un píxel, la letra pequeña y los límites duros entre colores opuestos pueden suavizarse o mostrar una ligera mancha. Después de convertir, abre el archivo al 100 % y comprueba que los textos y los trazos siguen nítidos. Si no es así, prueba el mismo archivo con el conversor de SVG a WebP, que codifica a calidad 90 y suele equilibrar mejor los dibujos con mucho detalle.
El tamaño justo para cada imagen
Por muy eficiente que sea AVIF, lo que más influye en el peso sigue siendo el número de píxeles. Una imagen de 4000 píxeles de ancho contiene cuatro veces más píxeles que su versión de 2000, y el archivo crece de forma notable. No tiene mucho sentido generar más del doble del ancho máximo con el que se mostrará. Como el ancho del SVG se multiplica por 1,5, para una cabecera que se ve a 1000 píxeles basta con escribir unos 1334 en el SVG, lo que cubre las pantallas de doble densidad. Si las pantallas pequeñas necesitan su propia copia, reduce el AVIF con la herramienta para redimensionar imágenes; el formato no cambia.
Pasos para convertir SVG a AVIF
- Convierte los textos en trazados e incrusta dentro del SVG las imágenes enlazadas.
- Define el ancho máximo con el que se mostrará la imagen, teniendo en cuenta que el ancho del SVG se multiplica por 1,5.
- Sube y convierte; puedes procesar varios dibujos juntos en la cola.
- Descarga el AVIF, revisa los bordes al 100 % y publícalo dentro de una etiqueta picture.
Compatibilidad y formato de respaldo
Las versiones actuales de Chrome, Edge, Firefox y Safari muestran AVIF; Safari lo incorporó en su versión 16. Para atender también a dispositivos antiguos, coloca el AVIF dentro de un elemento <picture> y añade después una fuente WebP o PNG. El navegador elige el primer formato que entiende y se salta los demás. Ese respaldo lo puedes generar desde el mismo SVG con el conversor de SVG a PNG. Los clientes de correo, los programas de oficina y muchos visores de escritorio todavía no abren AVIF de forma fiable, así que resérvalo para la web.
| Aspecto | AVIF (calidad 60) | WebP (calidad 90) | PNG |
|---|---|---|---|
| Peso de una ilustración grande con degradados | Normalmente el menor | Bajo | Alto |
| Líneas finas y textos pequeños | Pueden suavizarse | Se conservan bien | Sin pérdida |
| Transparencia | Alfa completo | Alfa completo | Alfa completo |
| Navegadores | Versiones actuales | Todos los actuales | Universal |
| Correo y ofimática | Escaso | Irregular | Fiable |
Si quieres saber qué hay detrás del formato y cómo se compara con los demás, lee qué es AVIF.
Privacidad y controles del archivo
Tu archivo se sube al servidor, se codifica como AVIF en la misma petición y se te devuelve como descarga. No queda ninguna copia en el servidor ni se comparte con terceros. Antes de dibujarlo se analiza el SVG, y se rechazan los archivos con scripts, atributos de evento, enlaces a imágenes o fuentes externas o declaraciones de entidades XML. El archivo también tiene que ser realmente un SVG: cambiar el nombre de otro formato no sirve.