Animación de trazos SVG: prepara una única trayectoria de dibujo

La animación de trazos SVG puede revelar una línea desplazando un segmento discontinuo por su trazado. Usa stroke-dasharray para definir el segmento y el espacio y anima stroke-dashoffset hasta que el trazo sea visible. MDN los documenta como propiedades de pintura del trazo.

El trazado original determina qué parece dibujarse. Un trazado abierto puede seguir la trayectoria de una pluma por el centro de una marca. Un contorno relleno describe el límite de la marca. Añadir un trazo a ese contorno hace que la animación recorra sus bordes; los ajustes de discontinuidad por sí solos no revelan su relleno.

Empieza con una forma pequeña antes de definir los tiempos de un logotipo completo. Los ejemplos creados manualmente que siguen separan la trayectoria de dibujo, la ilustración rellena y el perímetro para que puedas elegir la geometría que necesita tu animación.

Para mover un icono completo por una curva, usa el flujo de trayectorias de movimiento SVG, que mantiene la trayectoria de desplazamiento separada de la ilustración.

Empieza con un trazado abierto con trazo

Este trazado original avanza hacia la derecha y después hacia arriba. Su fill está desactivado, por lo que la marca visible procede íntegramente de su trazo:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Usa este CSS para revelarlo en dos segundos:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" calibra las operaciones basadas en distancia a una longitud definida de 100. La referencia de pathLength describe esta normalización. Un único valor de la lista de discontinuidad se repite como segmento y espacio, por lo que 100 proporciona un segmento de longitud completa seguido de un espacio igual de largo. Desplazar ese patrón 100 oculta el trazo en este ejemplo; llevar el desplazamiento a cero lo revela.

Usa números sin unidades aquí. stroke-dashoffset: 100% no sustituye a 100 unidades normalizadas del trazado. La referencia de dash-offset de MDN indica que los porcentajes usan la diagonal normalizada del área visible del SVG, no la longitud total del trazado.

El ejemplo usa un remate recto para facilitar la inspección del inicio pausado. Otros estilos de remate pueden cambiar el aspecto de los extremos de un segmento discontinuo. Elige el remate para la ilustración y comprueba los fotogramas inicial y final al tamaño con el que aparecerá realmente el icono. Para repeticiones decorativas, compara los contornos de puntos y el espaciado de remates antes de elegir las longitudes de segmentos y espacios.

Compara la trayectoria con un contorno relleno

Una banda gruesa doblada puede parecerse a esa línea con trazo y contener una geometría diferente. Este segundo trazado creado manualmente recorre el límite de la banda y se cierra con Z:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

Con la siguiente pintura, cambiar su desplazamiento de discontinuidad no tiene ningún efecto visible:

.filled {
  fill: #ef8067;
  stroke: none;
}

La banda permanece rellena porque no hay un trazo al que aplicar discontinuidad. La especificación de pintura SVG del W3C distingue entre pintar el interior de una forma y pintar su trazo.

Si, en cambio, estableces fill: none, añades un trazo y animas ese trazado cerrado, el trazo sigue el perímetro: recorre un borde, cruza un extremo y vuelve por el otro borde. No se convierte en una única trayectoria por el centro de la banda.

Esta distinción también explica por qué una vectorización puede producir líneas dobles de corte. En una animación, el resultado no deseado puede ser una línea que recorre el exterior de una marca de pluma. Si el efecto previsto requiere una trayectoria central, usa la guía de SVG de una sola línea para inspeccionar o preparar esa geometría.

Comprueba el inicio, el punto medio y el final

Para inspeccionar el ejemplo pausado, desactiva su animación y establece stroke-dashoffset en 100, 50 y 0. Esos valores corresponden al inicio, a la revelación a mitad de camino y al estado final de este trazado normalizado. No son porcentajes escritos en la propiedad CSS.

Mantén las tres versiones en una pequeña página de prueba con botones para esos estados. El ajuste intermedio es especialmente útil: las formas terminadas pueden parecer similares, mientras que sus trayectorias de dibujo se distinguen claramente a mitad de la revelación.

Comprobamos estos trazados creados manualmente en un navegador con desplazamientos de 100, 50 y 0 y ejecutamos una vez la animación de dos segundos. La banda rellena permaneció visible mientras la trayectoria y el perímetro se revelaron de formas distintas. Esta prueba demuestra esos trazados originales; no es una vectorización de PerfectVector ni una prueba en todos los navegadores.

Inspecciona la pintura y los estilos calculados del elemento real si el resultado difiere. Una regla CSS puede prevalecer sobre un atributo de presentación, y un trazado sin trazo visible no puede demostrar una revelación por discontinuidad. La lista de comprobación para trazos ausentes ayuda a aislar problemas de pintura y visualización antes de ajustar los tiempos de la animación.

Decide el punto inicial y el orden de los trazados

El primer trazado empieza en M30 90, avanza horizontalmente hasta x=100 y después verticalmente hasta y=30. Esa secuencia da una dirección a la revelación. Si el dibujo debe empezar en el extremo superior, prepara el trazado en esa dirección en lugar de suponer que la animación conoce el movimiento previsto de la pluma.

En un logotipo con marcas independientes, decide qué trazado debe aparecer primero y cuál después. Iniciar la misma animación en todos los trazados produce revelaciones simultáneas. Una secuencia requiere retrasos explícitos u otra organización de la línea de tiempo. Comprueba las intersecciones y superposiciones en estados pausados, porque las formas posteriores pueden cubrir un trazo que aún se está dibujando.

Un dibujo formado por varios subtrazados desconectados puede necesitar separarse en elementos para controlar los tiempos de forma útil. Mantén diferenciadas las decisiones de diseño visual y de trayectoria de animación. Unir piezas sin relación solo para obtener un trazado puede introducir una conexión que el artista nunca pretendió.

Una biblioteca de animación puede ayudar a controlar la secuencia, pero su entrada sigue necesitando la geometría correcta. La documentación de animación SVG de Motion ofrece dibujo de líneas mediante su valor animado pathLength. Ese control de biblioteca es una API diferente de la calibración nativa SVG pathLength="100" usada aquí; no copies los valores de un ejemplo al otro sin comprobar la API.

Mantén disponible la ilustración terminada sin movimiento

El ejemplo CSS usa por defecto un desplazamiento de cero y solo lo cambia mientras se ejecuta la animación. Su consulta multimedia de movimiento reducido desactiva la revelación y muestra la línea terminada. La guía de prefers-reduced-motion de MDN explica cómo la consulta detecta la preferencia del usuario.

En una demostración interactiva, ofrece un control de resultado estático además de un botón de repetición. En un icono de interfaz, conserva la etiqueta de texto visible o el nombre accesible que explica la acción. La animación no debería ser la única forma de descubrir qué significa el gráfico.

Prueba los estados inicial, interrumpido y terminado en su ubicación real. Si un icono esencial permanece invisible cuando la animación no se ejecuta, corrige el estilo base antes de extender el efecto a toda la interfaz. Una demostración aislada correcta no demuestra todos los resultados posibles de navegadores, tecnologías de asistencia o rendimiento.

Prepara la ilustración rasterizada sin prometer una trayectoria de pluma

Si falta el archivo maestro vectorial y una marca plana PNG o JPG necesita convertirse en ilustración editable, el flujo de imagen a vector de PerfectVector puede preparar una primera versión SVG. Compara su silueta, huecos y regiones independientes con el original e inspecciona los trazados descargados en un editor. Usa esa geometría como ilustración que debes revisar antes de planificar la animación.

La vectorización no establece el orden original de la pluma, no crea tu línea de tiempo ni garantiza trazados de línea central única. Si la revelación necesita una trayectoria por el centro de un trazo, dibújala o prepárala expresamente. Conserva un archivo maestro vectorial existente cuando esté disponible. Un SVG que solo incrusta una imagen rasterizada también necesita la comprobación de imágenes incrustadas antes de suponer que su marca visible es geometría editable de trazados.

Aprueba primero la ilustración estática y después la secuencia de dibujo. Las guías de edición del blog cubren la limpieza del original antes de la capa de animación.

Preguntas frecuentes

¿Por qué mi SVG sigue visible al inicio de una animación de trazo? Comprueba si la parte visible es un relleno. Los ajustes de dash-array y dash-offset afectan al trazo, por lo que una región rellena puede seguir visible mientras su trazo está oculto.

¿Por qué la animación dibuja alrededor de ambos lados de una línea? El trazado puede describir un contorno cerrado alrededor de una marca gruesa. Aplicar un trazo a ese trazado sigue su perímetro. Prepara una trayectoria de dibujo abierta cuando el efecto necesite una única línea por el centro.

¿Puedo usar 100% para toda la longitud del trazado? No como sustituto general en stroke-dashoffset. Sus porcentajes se refieren a la diagonal normalizada del área visible. El ejemplo usa pathLength="100" nativo con valores de discontinuidad sin unidades.

¿Convertir un PNG en SVG lo prepara para una animación de escritura a mano? La vectorización no garantiza automáticamente el orden de la pluma ni las líneas centrales. Inspecciona la geometría resultante y prepara por separado los trazados de dibujo y los tiempos.

Fuentes

1. MDN — stroke-dasharray — Define longitudes alternas de segmentos y espacios para la pintura del trazo.
2. MDN — stroke-dashoffset — Explica los desplazamientos del patrón y la referencia que usan los porcentajes.
3. MDN — pathLength — Documenta la calibración nativa de distancias para trazados y trazos.
4. W3C — pintura SVG — Separa el comportamiento de relleno y trazo.
5. MDN — prefers-reduced-motion — Documenta la preferencia del usuario usada para un resultado estático.
6. Motion — animación SVG — Describe la API independiente de dibujo de líneas de la biblioteca.

Prueba una trayectoria al inicio, a mitad de camino y al final antes de secuenciar toda la ilustración. Si el original es una marca rasterizada, prepara una primera versión SVG editable, inspecciona su geometría y planifica la trayectoria de dibujo por separado.