El lenguaje SVG permite trazar dinámicamente cualquier forma lineal, siendo el ejemplo más común de esta técnica los textos cuyas letras se dibujan frente al usuario, y aplicable igualmente sobre sobre cualquier vector dotado de líneas: logotipos, iconos, firmas, etcétera. En este tutorial veremos cómo crear un SVG para web y dinamizar su trazado mediante CSS sin necesidad de manejar programas de edición vectorial como Illustrator, Sketch o similar.

Si aún no has leído las anteriores entradas sobre Animación Vectorial Web te recomiendo que lo hagas ya que nos basaremos en los conocimientos que hemos asentado previamente.

Crear y sanear un SVG

Puedes crear un SVG apto para el entorno web mediante diversas herramientas online. Method Draw es un editor de SVG online gratuito con el que crear o editar cualquier forma (incluyendo textos) y exportar su código SVG mediante la opción “Save image”.

Dado que este efecto sólo puede realizarse sobre componentes de tipo path (un SVG puede contener elementos muy diversos: path, rect, polygon, circle…) tendrás que hacer la conversión de cada elemento a path desde el menú “Object” previo a exportar el SVG:

convertir_a_path3

Una vez exportado, abre el archivo desde tu editor de código y prepáralo para el entorno online:

  • Elimina los atributos width y height, incluyendo sus respectivos valores como tercer y cuarto valor del atributo viewBox, y asignando un cero a los dos primeros. De esta forma podremos redimensionarlo mediante CSS manteniendo su proporcionalidad y aportando una flexibilidad esencial en el diseño líquido:

    viewbox2

  • Sanéalo eliminando todos los elementos innecesarios de su interior: redúcelo a la etiqueta SVG y sus elementos path.
  • Incluye las etiquetas <xml> y <title>, y minifícalo.

El SVG resultante debería tener un aspecto – previo a su minificación – similar a este:



  Icono de analíticas
  
  
  

Tu vector se mostrará con normalidad en cualquier documento HTML:

Icono de analíticas

Delegar a CSS el tratamiento estético del vector

CSS permite controlar todos los aspectos estéticos de un SVG. Podemos prescindir de todos los atributos fill, stroke y stroke-width del código anterior, transmitiendo a cada path las mismas propiedades y valores desde nuestra hoja de estilos.

Asimismo, podemos controlar con libertad el ancho del SVG que, gracias a su viewBox, mantendrá su proporcionalidad tal y como lo haría una imagen:

svg {
  width: 50%;
  display: block;
  margin: 0 auto;
}

svg path {
  fill: none;
  stroke: #000;
  stroke-width: .5;
}

Conocer la longitud de cada path

Al igual que sucede con las rectas, aplicar un efecto de trazado sobre formas se basa en manipular los valores de las propiedades stroke-dasharray y stroke-dashoffset de cada path, por lo que necesitaremos conocer cuánto mide cada uno de ellos.

Esto sólo es posible mediante Javascript, cuyo método getTotalLength() retorna la longitud de cualquier elemento de tipo path. No necesitas jQuery.

Puedes obtener este valor agregando un atributo de id en cualquiera de los path y ejecutando, por ejemplo, este pequeño snippet:

var longitud = document.querySelector('#trazo1').getTotalLength();
alert(longitud);   // El primer path del SVG retorna 652.52

SVG es un lenguaje vectorial de naturaleza escalable, es decir, que la medida de cada trazo será siempre la misma, con independencia del tamaño del SVG. La longitud que retorna cada trazo se mantendrá inalterable bajo cualquier medida de su SVG.

Simulación manual de trazado vectorial

Una sencilla prueba te ayudará a comprender de forma sólida cómo se aplica un trazado dinámico en SVG.

A través de una regla de CSS, asigna a uno de los path el valor de su longitud – hayado mediante Javascript – en sendas propiedades stroke-dasharray y stroke-dashoffset, además de una transición que controle su propiedad stroke-dashoffset:

#trazo1 {
	stroke-dasharray: 652.52;
	stroke-dashoffset: 652.52;
	transition: stroke-dashoffset 1s ease-in;
}

Visualiza el documento en tu navegador y… oh, ¡el path ha desaparecido! Que no panda el cúnico. Inspecciónalo y edita su estilo de forma manual, anulando y restableciendo sucesivamente el valor de su stroke-dashoffset.

YAY! Lo tienes:

Prueba de animación de trazos SVG

Aplicar animaciones CSS sobre tu SVG

Disfruta formulando animaciones de CSS que, manipulado el valor de cada stroke-dashoffset, controlen el tiempo, velocidad, retraso, curva de aceleración o dirección de cada trazado (recuerda: cada path tiene su propia longitud). Anímate también a coquetear con cualquiera de las propiedades de SVG que CSS te permite controlar:

svg {
  width: 50%;
  display: block;
  margin: 0 auto;
}

svg path {
  fill: none;
  stroke: #000;
  stroke-width: .5;
  animation: trazar 3s ease-out infinite forwards;  
}
      
#trazo1 {
  stroke-dasharray: 652.52;  // cada Path tiene su propia longitud
  stroke-dashoffset: 652.52;
}

#trazo2 {
  stroke-dasharray: 318.48;
  stroke-dashoffset: 318.48;
}

#trazo3 {
  stroke-dasharray: 174;
  stroke-dashoffset: 174;
}

@keyframes trazar {
  80% {
     stroke-dashoffset: 0;
     stroke-width: .5;  // todas las propiedades de path son modificables
  }  
  90% {
      stroke-width: 2;
      opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

Icono de analíticas

Puedes descargar este SVG dinámico desde el enlace inferior, o echar un ojo a otras entregas de la serie de tutoriales SVG.

Descargar ejemplo de trazado SVG

En adelante, el único límite es tu creatividad, ¡A experimentar!