Cómo animar un SVG con CSS

Con SVG podemos realizar ilustraciones escalables sin pérdida de resolución. Estas pueden ser realmente complejas ya que soportan degradados, transformaciones, filtros y otros efectos como animaciones o transiciones. Además, los atributos de sus etiquetas son accesibles y manipulables mediante CSS o JS.

Uso de un <svg>

A la hora de incluir un <svg> en nuestra aplicación podemos optar por diferentes enfoques, cada uno de ellos nos dará mayor o menor control a la hora de manipularlo después. De esta manera, debemos de escoger bien cuál será la forma más conveniente según el escenario actual o nuestro propósito.

SVG como imagen en el HTML

Podemos referenciar un <svg>​ con una etiqueta ​<img>​ a través su atributo source​. De este modo podemos seguir usando una etiqueta semántica y proporcionar una alternativa textual para ayudar a la interpretación de su contenido y al mismo tiempo utilizar imágenes vectoriales. Sin embargo, la pega es que la ilustración no será accesible ni manipulable más allá de lo que podemos hacer con una etiqueta <img>​.

Por ejemplo, podemos aplicar transformaciones y cambios de opacidad pero sobre el conjunto entero.

<img alt="Un" height="48" src="​enlace-a-la-imagen.svg​" width="48" />

SVG como imagen decorativa con CSS

Un enfoque parecido es llamando al <svg> mediante la función ​url() de CSS a través de la propiedad background-image. De este modo podemos utilizar igualmente la imagen vectorial y además hacerlo en combinación con el resto de propiedades de tipo background-* aunque al ser decorativas tampoco podemos acceder ni manipular partes del ​<svg>.

Styles.css

.svg ​{
 ​width: 40rem;
 ​height: 22.5rem;
 ​background-image​:​ url(‘enlace-a-la-imagen.svg’)​;
 ​background-size​:​ cover​;
}

SVG como sprite de imágenes

La tercera opción es utilizar ​<svg> a través de un sprite de imágenes. Esta opción ​es muy recomendable cuando tenemos varias imágenes y no queremos dañar la performance de la aplicación​ al realizar un alto número de peticiones al servidor para recuperar estos recursos.

Para la elaboración de un sprite, tenemos que crear dentro de una etiqueta <svg> una etiqueta <symbol>;​ para cada imagen, conservando el atributo viewbox de la imagen original, y asignándole una ​id​ que nos servirá para referirnos a ella.

Sprite.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
<symbol ​id=”avestruz”​ viewBox="0 0 512 512"> 
<circle cx=”10” cy=”10” r=”30” /> 
<path d=”...” /> 
</symbol> 
</defs> 
</svg>

Index.html

 <svg width=”48” height=”48”>
 <use ​xlink:href=”enlace-al-recurso/sprite.svg#avestruz”
 />
 </svg>

En línea

Es la opción más flexible y la que mayor control nos da, porque al añadir en el HTML el código <svg> todas las etiquetas y atributos de estas etiquetas que conforman el <svg> serán accesibles y por tanto manipulables tanto con CSS como con JavaScript. Por lo tanto es el escenario perfecto si lo que buscamos es poder aplicar ​deformaciones en los trazos​, modificarlos con transiciones o animaciones ​como vimos en el insight​ en el que utilizamos anime.js para animar un ​​<svg> o para ocultar y mostrar alguno de los elementos que conforman la imagen, por ejemplo.

Index.html

<svg width="300" height="300" viewbox="0 0 300 300">
 <circle cx="150" cy="150" r="100"></circle>
</svg>

Styles.css

circle​ ​{ ​
 transition​:​ fill 250ms​;
}
svg:hovercircle​ ​{ ​
 fill​:​ #f06​; 
} 

La especificación actual de ​<svg>​ (1.1) es muy extensa y está compuesta por un amplio conjunto de ​etiquetas​ que conforman el nivel estructural, ​interfaces para su interacción con JavaScript y ​atributos​ que podemos modificar con CSS. Algunos de estos atributos no son transicionables, es decir, que no pueden cambiar de estado secuencialmente si no de manera absoluta. Esto ocurre por ejemplo con el atributo ​[d]​ de una etiqueta ​<path>​ que es donde están las coordenadas de definición del trazo, que es lo mismo que ocurre con la propiedad display de un elemento cualquiera, que no puede tener valores intermedios entre none y ​block​.

Es en estos casos cuando necesitamos una librería de JavaScript que pueda realizar estas transiciones, como por ejemplo ​GSAP​, ​Animejs​ o ​Snapsvg​. Sin embargo, existen otros atributos que sí se pueden modificar sus valores de forma secuencial, como por ejemplo: [fill], ​[stroke]​, ​[stroke-width]​, [stroke-dashoffset]​ o [stroke-dasharray].

Stroke​ - Indica el color que se va a aplicar al borde de una forma.

Fill​ - Rellena de color la figura que la tiene declarada.

Stroke-width​ - Hace referencia al ancho del borde de una forma.

Stroke-dasharray​ - Sirve para crear un patrón ‘ancho-de-guión | ancho-de-espacio’ que será aplicado al borde del elemento. El valor puede ser sin unidades o en porcentajes y si la secuencia es impar se doblará para conseguir un número par.

Stroke-dashoffset​ - Define en qué punto va a comenzar el borde. Cuanto mayor sea el número más lejos comenzará aunque puede no tener efecto al tratarse de un patrón.

Con un poco de ingenio se les puede sacar mucho partido y crear efectos muy dinámicos, sobre todo a los ​[stroke-*]​. En esta ​demo​ hemos creado un sencillo pero elegante efecto en el que se va dibujando el trazado de las letras del logo de Boream de forma secuencial y posteriormente se rellenan de color, y todo únicamente modificando las propiedades ​stroke-dashoffset​, stroke​ y ​fill​.

1

Animando los atributos 'stroke-dashoffset' y 'stroke-dasharray'

El isotipo y cada una de las letras son un <path> al que le hemos añadido una clase única para manejar sus propiedades stroke-dasharray, stroke-dashoffset​ y animation-delay. Calculamos la longitud de cada trazo para crear un patrón ‘guión-espacio’ con este valor, y modificamos el punto de comienzo usando ese mismo valor para que coincida el punto 0 con el comienzo de un espacio y dejando virtualmente fuera de la vista el guión.

2

Con el patrón ya creado y oculto vamos a cambiar el valor de la propiedad stroke-dashoffset​ con una animación para hacer que recorra el ​<path> de la figura y lanzaremos una segunda animación con un pequeño delay que incrementaremos poco a poco para rellenar la figura con color.

3

Conclusión

Con un ​soporte​ casi del total por lo navegadores web, no existe ningún motivo para no usarlos. Además, al ser parte del DOM aunque la conexión se interrumpa lo tendríamos disponible y por tanto se parsea e interpreta sin problemas, cosa que no ocurriría si fuese un recurso externo ya que devolvería su petición un error 404.