Crear formas de línea que son trazadas dinamicamente en el navegador es una de las técnicas de animación vectorial SVG que más rápido se extiende por la facilidad tanto en su creación como en su dinamización. Las posibilidades de este recurso van desde crear un efecto de escritura al trazar una firma hasta animar composiciones vectoriales lineales que se conforman frente al usuario.

En este tutorial crearemos una forma de recta simple y aplicaremos animaciones sobre la misma a través de CSS puro. Si aún no lo has hecho, te recomiendo leer el post introductorio sobre animación vectorial en el entorno web antes de ponerte manos a la obra.

Crear un SVG

Para adquirir las bases necesarias de animación web mediante SVG es necesario familiarizarse con los recursos vectoriales SVG. Comenzamos declarándolo en el documento:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="linea" aria-labelledby="titulo descripcion">
   <title id="titulo">Línea</title>
   <desc id="descripcion">Representación de una línea negra en SVG</desc>
   
</svg>
  • XML: dedicamos la primera línea a indicar el inicio del XML así como su versión (la actual es la 1.0) y la codificación (ver más sobre XML).
  • SVG: etiquetamos el entorno SVG con la versión (la actual es la 1.1) y el atributo aria-labelledby que dará accesibilidad al conjunto relacionándolo con su título y descripción a través de sus ID’s.
  • Title, desc: indicamos el título y descripción sintáctica de su contenido atendiendo a los valores de sus ID’s en vistas, de nuevo, a su accesibilidad e indexación por parte de los motores de búsqueda.

Aviso: a diferencia del ejemplo superior tu SVG debe estar en línea, por tanto omite todos los saltos de línea entre las diferentes etiquetas.

Iremos conociendo los diferentes elementos que puede contener un SVG a lo largo de los tutoriales, en este caso comenzaremos con el primero de ellos: <line>

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="svgLinea1" aria-labelledby="titulo descripcion">
   <title id="titulo">Línea</title>
   <desc id="descripcion">Representación de una línea negra en SVG</desc>
   <line id="recta1" x1="0" x2="100%" y1="5" y2="5"/>
</svg>
  • x1, x2: indican la posición inicial y final de la recta en el eje X, respectivamente.
  • y1, y2: indican la posición inicial y final de la recta en el eje Y, respectivamente.

Mediante unas reglas de estilo podemos modificar las propiedades de CSS que intervienen en este tipo de elementos (stroke para el color, stroke-width para el grosor):

#svgLinea1{
  width: 100%;
  height: 10px;
}

#svgLinea1 rect{
  stroke: #000;
  stroke-width: 3;
}

Para aplicar una animación sobre este elemento sólo debemos conocer la longitud total de la línea (que en este caso será similar al ancho total de SVG, si es relativo necesitarás Javascript para obtenerlo) y entender cómo funcionan las dos propiedades que determinan el trazado lineal: stroke-dasharray y stroke-dashoffset.

Propiedad stroke-dasharray

Determina la longitud máxima a la que se puede randerizar cada línea y el espacio que habrá entre estas. Como puedes ver, cuando aplicamos un stroke-dasharray igual a la longitud total de la línea obtenemos una única línea continua. Pruébalo:

LíneaRepresentación de una línea negra en SVG


stroke-dasharray: 0px
stroke-dashoffset: 0px

Propiedad stroke-dashoffset

Determina el punto de inicio de la línea dentro del área que esta puede ocupar, lo que nos permite por tanto alterar su longitud. Pruébalo:

LíneaRepresentación de una línea negra en SVG


stroke-dasharray: 1000px
stroke-dashoffset: 0px

Aplicación conjunta

Una vez comprendidos los principios de animación lineal, estamos listos para crear un sistema propio que dinamice nuestro SVG a través de animaciones de CSS:

See the Pen Ejemplos de animación con SVG: líneas by German Alvarez (@germancreativodigital) on CodePen.

Este principio de animación será aplicable no sólo a líneas rectas sino también a las diseñadas a través de componentes <path> , uno de los elementos más polivalentes que puede contener un SVG y que nos permitirá crear formas lineales curvas (formas de letras, firmas, iconos lineales, etcétera). En este tutorial de animación de trazados SVG puedes conocer cómo aplicar esta técnica a cualquier forma SVG (letras, firmas, logotipos, etcétera).