m•motiveICONS IN MOTION
← Volver a los iconos

MOTIVE · ARTÍCULO

Cómo funciona una animación SVG y qué determina su rendimiento

Una campana se mueve al activar un aviso; una marca se dibuja al completar una tarea. Estos pequeños movimientos comunican cambios de estado. Veamos cómo los crea SVG y qué medir al usar muchos iconos.

1. Formas con una línea de tiempo

SVG describe formas como path, circle y rect mediante coordenadas y atributos. viewBox="0 0 24 24" define las coordenadas internas; width y height definen el tamaño visible. La misma geometría sirve para varios tamaños.

La animación cambia esas propiedades con el tiempo. Una rotación de 0 grados al principio, -18 a mitad y 0 al final hace oscilar una campana. El navegador interpola según duration y easing, sin guardar una imagen diferente para cada fotograma.

2. Dibujar una marca desplazando guiones

La marca ya existe. stroke-dasharray crea un patrón de trazos y huecos; stroke-dashoffset desplaza su inicio para hacer visible la línea gradualmente.

El ejemplo normaliza las distancias con pathLength="60" y anima dashoffset de 60 a 0. El 60 no representa píxeles de pantalla. Los atributos base muestran la marca completa incluso sin animación o con movimiento reducido. Pega el código en HTML para probarlo.

MDN · stroke-dashoffsetMDN · pathLength

Un ejemplo funcional de trazado

El mismo SVG y CSS aparecen debajo. Puedes pausar o reanudar el bucle; el movimiento reducido muestra la marca completa.

<svg xmlns="http://www.w3.org/2000/svg"
     width="64" height="64" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <style>
    .motive-draw { animation: motive-draw 1.8s ease-in-out infinite; }
    @keyframes motive-draw {
      0% { stroke-dashoffset: 60; }
      60%, 100% { stroke-dashoffset: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .motive-draw { animation: none; }
    }
  </style>
  <path class="motive-draw" d="m6 12 4 4 8-8"
        pathLength="60" stroke-dasharray="60" stroke-dashoffset="0" />
</svg>

3. CSS y Web Animations API

CSS @keyframes suele bastar para un bucle definido o una reproducción única. Los SVG de Motive incluyen CSS sin bibliotecas adicionales. La página no puede seleccionar directamente elementos internos de un SVG dentro de img; considera SVG en línea para interactuar con las formas.

Web Animations API ofrece reproducción, pausa y búsqueda temporal para un editor. Motive genera los fotogramas del avance y el CSS exportado desde el mismo modelo, sin actualizar el estado de React en cada fotograma. Elegir CSS o JavaScript no determina por sí solo el rendimiento.

MDN · Web Animations API

4. Ser SVG no garantiza un coste bajo

El tamaño transferido y el coste de reproducción son distintos. Unas formas simples pueden ser compactas; rutas complejas, filtros y muchos elementos DOM añaden trabajo. SVG no siempre es menor que GIF ni garantiza unos FPS fijos en todos los dispositivos.

El navegador realiza el trabajo necesario de estilo, diseño, pintura y composición. Importan las propiedades animadas, el área y el número simultáneo. Considera primero transform y opacity y comprueba la composición real en el SVG y navegador de destino.

4. Ser SVG no garantiza un coste bajo
EfectoPropiedades habitualesCoste que revisar
Rotación, movimiento, escala, fundidotransform, opacityLa composición puede ayudar, sin garantizar ejecución GPU ni evitar pintura.
Trazado y cambios de formastroke-dashoffset, dRevisa el repintado. Varias rutas complejas animadas pueden aumentar el trabajo.
Desenfoque, sombras, muchas formasfilter, cantidad de formas y áreaReduce la zona de filtros y las formas; compara tiempo de pintura y memoria.

web.dev · High-performance CSS animations

5. Antes de añadir movimiento a la interfaz

  • Reproduce avisos breves de éxito o error cuando hagan falta y comprueba si un bucle continuo tiene sentido.
  • Detén bucles fuera de pantalla con IntersectionObserver y revisa las pestañas ocultas. Motive solo anima las tarjetas visibles del catálogo.
  • Respeta prefers-reduced-motion: reduce y mantén significativo el estado estático. Usa aria-hidden para decoración y texto alternativo apropiado para imágenes informativas.
  • Reserva espacio con width y height. Los SVG en línea repetidos necesitan IDs distintos para títulos, máscaras y degradados.
  • No añadas will-change a todos los iconos de antemano. Mide un problema real, aplícalo donde sea necesario y compara.

MDN · prefers-reduced-motion

6. Medir bajo las mismas condiciones

  1. Fija icono, tamaño, movimiento y duración. Compara, por ejemplo, 1, 20 y 100 animaciones simultáneas, anotando cantidad visible y total.
  2. Usa una compilación similar a producción. Revisa transferencia comprimida y solicitudes en Network. El tamaño del archivo no mide por sí solo el coste de reproducción.
  3. Graba reproducción y desplazamiento en Performance de DevTools. Compara Layout, Paint y retrasos de fotogramas. A 60Hz cada fotograma dura unos 16,7ms para toda la página: no prometas FPS sin medir.
  4. Prueba también un móvil real con movimiento reducido, iconos fuera de pantalla, pestañas ocultas y repeticiones finitas. Anota dispositivo, navegador y condiciones para reproducir el resultado.

Documentación oficial