• slidebg1

SVG: Cómo animar un logo y no morir en el intento


Gráficos Vectoriales Redimensionables (del inglés Scalable Vector Graphics) o SVG es un formato de imagen vectorial que se desarrolló en 1999 pero que se ha puesto muy de moda en los últimos años, sin embargo, todavía mucha gente desconoce este formato y sus posibilidades o simplemente no sabe cómo utilizarlo.

En la actualidad SVG se utiliza para realizar animaciones de todo tipo, logos, spinners, loaders o pantallas de carga, botones y mucho más.

La realidad es que un archivo SVG no es una imagen como tal sino un archivo XML que puede ser escrito o “dibujado” simplemente con un editor de código y un poquito de paciencia, así pues, en este artículo vamos a tratar de mostraros de forma clara y sencilla cómo dibujar y animar nuestro logo.

Aunque no es necesario crear un documento HTML para hacer un SVG, nos será muy útil crear la estructura básica para poder ejecutarlo en el navegador e ir viendo el resultado de nuestro trabajo, pues bien, una vez creado vamos al body y directamente comenzamos abriendo nuestra etiqueta SVG y mediante los atributos width y height le damos un tamaño a nuestro lienzo virtual, además es importante incluir el atributo xmlns para que funcione correctamente.

 

Si queremos dar un nombre o título a nuestra imagen podemos hacerlo mediante la etiqueta “title”.

Nuestro siguiente paso consiste en visualizar los elementos con los que formaremos nuestro logo nuestro dibujo, en este caso, se trata de cuatro triángulos y un texto y en este caso vamos a comenzar por el segundo, ya que, el primero de ellos lo haremos de una forma un poco más compleja y es mejor dejarlo para más adelante.

Para realizar un triángulo abrimos una etiqueta “polygon” e introducimos sus atributos.

Tal como podemos ver en la imágen, justo en la propia etiqueta se incluyen los atributos que la forman, en este caso son:

  • Points: definen los puntos que formarán nuestro polígono mediante su posición horizontal y vertical en nuestro lienzo separados por una coma, este polígono contendrá tantos vértices como puntos incluyamos.
  • Stroke: Es el color de la línea que enmarca o bordea nuestro polígono.
  • Stroke-width: El grosor de la línea.
  • Fill: Esta propiedad es el color de relleno del elemento podríamos utilizar los valores “none” o “transparent” tanto en fill como en stroke para ocultarlos.
  • Opacity: Además de los atributos propios de un SVG podemos utilizar atributos comunes de CSS como opacity, en este caso le damos una opacidad de 0 para que se nos muestre oculto inicialmente.

Los dos triángulos siguientes se realizarán de igual modo.

 

Ahora que comprendemos la etiqueta “poligon” resulta fácil comprender cómo realizar elementos con otras etiquetas como “rect” para rectángulos o “circle” para círculos donde “cx” y “cy” definen el centro del círculo y “r” su radio.

 

Ahora que comprendemos un poco mejor cómo funciona SVG, pasamos a dibujar el primer triángulo que nos saltamos anteriormente, esta vez lo realizaremos con la etiqueta “path” que define un trazado mediante puntos, el código de este triángulo rojo.

 

“Stroke-dasharray” y “Stroke-dashoffset” se explicará más adelante, por el momento lo más importante aquí es prestar atención al atributo “d” que puede contener mucha información y que utiliza letras para definir qué se debe hacer con el punto que se define a continuación, las órdenes que podemos utilizar son las siguientes:

  • L : Cuando introducimos la letra L estamos indicando que se trace una línea hasta el punto siguiente.
  • M : Nos desplazamos al punto “a mano alzada”, es decir, sin dibujar ninguna línea.
  • H : Línea horizontal hasta el punto
  • V : Línea vertical hasta el punto
  • C : Curva hasta el punto
  • S : Curva suave hasta el punto
  • Q : Curva Bézier Cuadrática hasta el punto
  • T : Curva Bézier Cuadrática suave hasta el punto
  • A : Arco elíptico
  • Z : Lo utilizaremos para cerrar el trazado.

Por último añadiremos el texto, en nuestro caso “Develapps” es un nombre formado por dios palabras con tipografías distintas así que utilizaremos dos elementos de texto para crear nuestro nombre.

 

No hay mucho que decir del texto, simplemente definiremos su posición mediante su “X” y su “Y”.

Llegados a este punto, nuestro logo está ya terminado pero no podremos verlo porque hemos marcado la opacidad de todos los elementos a cero y ahora mediante animaciones haremos que se vayan haciendo visibles los diferentes elementos.

 

Cuando hemos explicado la etiqueta “path” nos hemos dejado los atributos “Stroke-dasharray” y “Stroke-dashoffset” para más adelante, ahora vamos a verlos:

  • Stroke-dasharray: Entendamos nuestra línea del trazado como si fuese una línea discontinua (“dashed” en inglés), aquí estamos definiendo el tamaño de cada una de esas líneas que forman nuestro trazado, por ejemplo si establecemos el valor 10, significa que veremos 10px de línea y 10 px de espacio en blanco y así sucesivamente hasta completar todo el trazado, el truco aquí está en darle un tamaño del total de nuestro dibujo, 610px así obtendremos una línea sólida.
  • Stroke-dashoffset: Define desde qué distancia al origen comenzará a aparecer nuestra línea, en este caso nuevamente hemos establecido el valor de 610px por lo tanto tendremos una línea sólida que comenzará dónde acaba el dibujo, por lo tanto no se va a ver.

Pasamos a las animaciones, las cuales se introducirán entre las etiquetas de nuestro elemento:

 

La etiqueta “animate” será quien nos ofrezca las animaciones y sus atributos más destacables en este caso son:

  • AttributeName: Indica cual es el atributo que vamos a animar.
  • Begin: Nos indicará en qué momento comenzará la animación.
  • Dur: Es la duración de la animación.
  • Values: En nuestra animación el valor variará de 610 a 0.
  • RepeatCount: En este caso se realizará una sóla vez, pero podríamos marcarla como “indefinite” para que se repita una y otra vez.
  • Fill = “freeze” : Con este valor estamos estableciendo que al terminar la animación se quede en la posición final en lugar de volver a su origen.

Podemos ir encadenando animaciones unas detrás de otras tantas veces como queramos, al final del artículo mostraremos la animación final todo el código empleado para conseguirlo, por el momento pasamos a las animaciones del segundo triángulo, el amarillo.

 

Para este triángulo hemos encadenado dos animaciones, una de traslación y otra para modificar su opacidad.

La primera animación tiene una etiqueta diferente “AnimateTransform” que se aplica en este tipo de animaciones. 

  • Type=”translate”: Indica el tipo de animación a realizar.
  • From: Desde qué punto comenzamos la traslación.
  • To: En qué punto acaba la traslación.
  • Values: Este valor, tal como explicamos en el punto anterior, hará que el atributo opacity vaya tomando y animando la transición entre los diferentes valores separados por punto y coma. Podríamos haberle dado directamente el valor de “1” para dejarlo opaco al 100% pero hemos preferido que el valor vaya fluctuando entre “0.6” y “1” para que no resulte una imagen simplemente “fija”
  • Begin: En lugar de incluir la animación según tiempos se podría iniciar “onMouseMove” por ejemplo, lo cual la activaría al pasar el ratón por encima. 

Aquí incluimos nuestra animación y todo el código empleado para conseguirla.

Código:

Visualizar en CodePenDevelapps by Juan Carlos Rodríguez (@jcrodriguezam) on CodePen.

Todavía quedan muchos atributos y animaciones posibles por explicar pero puede servir para hacerse una idea de que es un SVG y las posibilidades que puede ofrecer.

Como por ejemplo establecer un identificador (“id”) a cada elemento para modificar sus atributos mediante CSS y animaciones con “@keyframes” o incluso javascript para aportar una mayor interactividad con el usuario.

Además se pueden utilizar herramientas de diseño gráfico como illustrator para realizar diseños más complejos y guardarlos como archivo SVG por capas, de este modo al archivo se le incluyen diferentes “clases” a cada elemento para posteriormente animarlas mediante css.

Como comentario final, los diseños y las animaciones mediante SVG funcionan de forma nativa en los navegadores actuales, tienen muy poco peso y al ser imágenes vectoriales se adaptan perfectamente a reescalados para cualquier tipo de pantalla.

Desde Develapps os animamos a probarlo, en poco tiempo y con algo de imaginación se pueden conseguir verdaderas maravillas.

Públicado el 01/04/2017

Comparte este post: