Realizando animación con svg

Estos últimos días me han dado un trabajo donde, sin duda alguna rompió con todo lo que he hecho, la idea es hacer una página web pero con animación con svg, aunque unos de mis compañeros uso un framework en javascript, me puse a la tarea de realizar animaciones sin necesidad de javascript.

esto para no cargar el proceso de renderizado, y tratando que sea nativo para todo los navegadores y bastante limpio, me tope claramente que no sabía hacer una manipulación con svg y comencé a investigar.

SVG

SVG significa Gráficos vectoriales escalables , y fue recomendado para su uso ya que al ser vectores estos no se pixelean como una imagen normal, actualmente todo los navegadores reconocen este formato, en resumidas cuentas, es un xml que traza vectores en 2D y puede tener animación, para mayor información el enlace aquí.

Animación con svg

para entender un poco mas, recordemos que el svg es un archivo distinto, y esto implica que tiene otra sintaxis así como reglas, por suerte, svg acepta css3 y puedes manipular cualquier zona del vector.

así que para hacer una animación con svg solo necesitaremos:

imagen SVG
CSS
imaginación

Crear tu propio svg

para crear tu svg no necesitamos mas que abrir nuestra etiqueta <svg></svg> y comenzar a hacer nuestras obras maestras!!, pero como no somos muy buenos o experimentados podemos descargar algun programa gratuito para crear, mi recomendación es inkscape

este programa es gratuito y esta para mac, pc y linux, y podemos crear nuestros svg de forma gratuita, recomiendo pasar una lectura rápida y tener a la mano esta pagina de w3c sobre svg, ya que lo vamos a necesitar mucho, son conceptos básicos de svg.

por ejemplo , con inkscape realice el logo del blog, y lo exporte a svg de inkscape:

ahora hay que abrir el svg con nuestro editor preferido y analicemos que hay dentro.

<g> = son etiquetas donde van los dibuhos

<path> = información de los trazos;

<rec> = rectangulos

necesitamos identificar que es cada cosa, por suerte en inkscape cuando creas una capa puedes darle un nombre único y al exportar vamos a ver que el label se llama así, de esta forma podemos identificar más rápido que es cada sección.

Una herramienta que nos ayuda mucho es la herramienta de chrome, aquí podemos identificar cada elemento y moverle propiedades para ver cómo se comporta:

Clases y estilos

Al identificar cada elemento que queremos usar, nos daremos cuenta que tienen la etiqueta style, por suerte, también acepta la etiqueta class, así que podemos crear nuestras clases en un css.

Pero ALTO!, no podemos usar css separado, es decir todo el css debe ser introducido dentro el código de svg.

Una ventaja es que para hacer una animacion con svg vamos a usar el método animation y keyframes de css3

una vez cambiado los style de los elementos svg a clases en css vamos a comenzar con los cambios.

Animación con svg usando css3

vamos a realizar la siguiente animación que recorre las líneas (animación), para eso vamos a usar el depurador de chrome, y vamos a buscar el elemento , yo le puse id: menor y class: movema2 , la propiedad que da este efecto son:

stroke-dashoffset
stroke-dasharray

stroke-dasharray

Esta propiedad lo que hace es pintar el tamaño de la línea por ejemplo, si ponemos 0, esta línea es continua, pero también tenemos un punto máximo por ejemplo en la imagen que puse arriba el máximo es 500, y al poner esta cantidad la línea vuelve a estar continua, esto varia mucho, dependiendo el tamaño del lienzo, el tamaño del dibujo , así que lo mejor es que busquen cual es su punto máximo.

stroke-dasharray: 20

stroke-dashoffset

Cib esta propiedad lo que hacemos es dar espacios entre las lineas, es decir que hacemos que se recorra el punto de origen y este hace que recorra las demas lineas, este se combina con el método anterior.

stroke-dasharray: 20

stroke-dashoffset: 27

Con estas dos propiedades podemos dar un efecto, ya sea de carga o de dibujar la línea continua

Animación en css

aquí vamos a utilizar la propiedad animation, y la de keyframes por ejemplo la animación que uso es la siguiente:

centro:

.palo {

fill: none;

stroke: #000000;

stroke-width: 1px;

stroke-linecap: butt;

stroke-linejoin: miter;

stroke-opacity: 1;

animation-name: load;

animation-timing-function: linear;

animation-duration: 4s;

animation-fill-mode: forwards;

}

@keyframes load {

from {

stroke-dashoffset: 100;

stroke-dasharray: 100;

stroke-width: 1px;

}

to {

stroke-dasharray: 0;

stroke-dashoffset: 100;

stroke-width: 1px;

}

}

dibujo laterales:

.movema2 {

fill: none;

stroke: #000000;

stroke-width: 1px;

stroke-linecap: butt;

stroke-linejoin: miter;

stroke-opacity: 1;

stroke-dasharray: 500;

stroke-dashoffset: 500;

animation-name: menorque;

animation-timing-function: linear;

animation-duration: 2s;

animation-delay: 2s;

animation-fill-mode: forwards;

transition-duration: 1s;

transition-timing-function: linear;

}

@keyframes menorque {

from {

stroke-dashoffset: 500;

}

to {

stroke-dashoffset: 0;

}

}

ya con un poco más de imaginación podemos hacer animaciones más complejas, recuerde que la complejidad sube entre más elementos tiene nuestro dibujo en svg.

resultado final (tocar para ver animación completa):

para ver el código pongo mi enlace de gitlab

nota: es muy probable que cuando dibujen en inkscape, tengan trazos de más, esto lo puedes arreglar quitando directamente en código, recomiendo que trabajen en chrome para mayor rapidez.

si tienen alguna duda, escriban en los comentarios, explico que este tutorial es muy básico. y para hacer animaciones más complejas es probable que no puedas hacerlo fácilmente con este método, recordemos que también podemos usar canvas para hacer dibujos y animaciones, que en otro post hablaremos de esto

Realizar animación con svg de forma fácil

Realizando animación con svg

SVG