Cómo crear un logotipo animado con SVG y CSS

Se ha demostrado que el uso selectivo de animaciones bien diseñadas mejora la experiencia del usuario , y aunque la web está haciendo una transición lenta hacia HTML5 para animaciones web, su uso también genera algunas complicaciones .

Los gráficos vectoriales escalables (o SVG) brindan una alternativa accesible, con una excelente API junto con muchos otros beneficios, y se pueden animar con un poco de uso creativo de las hojas de estilo en cascada.

En el transcurso de este artículo, profundizaremos en todos los demás beneficios del uso de SVG y le enseñaremos exactamente cómo usarlos en combinación con CSS para crear logotipos animados.

Por qué los gráficos vectoriales escalables son tan geniales

A pesar de lo que su nombre implica, Scalable Vector Graphics no es un tipo de formato de archivo de imagen; es un lenguaje de marcado XML (muy parecido a XHTML o XOXO ). Este lenguaje de marcado específico se utiliza para crear imágenes bidimensionales basadas en vectores, que se pueden ampliar o reducir sin pérdida de resolución.

Para poner esto en perspectiva, echemos un vistazo al código detrás de un archivo SVG simple antes de pasar a hablar sobre más propiedades de este formato.

El siguiente ejemplo reproduce una copia del logotipo de Adobe al trazar una ruta vectorial y usar el atributo de relleno  para colorearlo. Siéntase libre de copiarlo usando su editor de texto preferido (guardándolo como un archivo .svg) y luego ábralo dentro de su navegador web para ver el resultado final (observe cómo el logotipo se escala sin problemas como discutimos anteriormente).

01
02
03
04
<svg viewBox='0 0 105 93' ></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
 
</svg>

SVG en acción.

Como puede imaginar, esto puede ser muy útil al crear un sitio web receptivo. Sin embargo, dado que los gráficos se representan mediante vectores, tienden a ocupar más datos de los necesarios cuando se trata de imágenes complejas. Debido a este hecho, los SVG no se usan a menudo fuera de gráficos como logotipos, infografías o gráficos regulares (aunque sucede ) .

Además de ser receptivos, los gráficos vectoriales escalables también tienen algunos efectos gráficos integrados (como filtros o modos de mezcla) y tienen una API DOM muy accesible. De hecho, si ya está familiarizado con CSS y JavaScript (que por supuesto lo está, estrella de rock), debería poder manipular archivos SVG sin demasiados problemas. Esta flexibilidad le permite, por ejemplo, crear archivos SVG del lado del servidor y modificarlos fácilmente sin tener que recurrir al uso de herramientas dedicadas (que veremos más adelante).

Por último, los SVG se pueden animar fácilmente usando CSS, lo cual puede haber deducido del título de este artículo (o de las repetidas referencias que hemos hecho a este hecho), y llegaremos a eso en un momento. Pero primero, repasemos el proceso real de manipulación de SVG usando herramientas dedicadas.

Cómo trabajar con SVG

Como mencionamos anteriormente, puede sumergirse en SVG con sus propias manos si eso es de su agrado. Aunque es un método completamente válido, existen excelentes herramientas disponibles para crear y manipular directamente SVG, lo que hace que sea ineficiente lidiar con el código para cualquier otra cosa que no sea un simple estilo CSS o animaciones.

Adobe Illustrator , Inkscape  y Sketch para Mac son las opciones más populares. En el caso de Illustrator, el proceso de creación es tan simple como preparar su imagen y luego exportarla usando la opción ‘ Guardar como ‘ SVG. Al hacer esto, es posible que observe una opción denominada Perfiles SVG  con varias opciones enumeradas en un menú desplegable, como SVG Tiny (más adecuado para teléfonos inteligentes) y SVG Básico (un perfil obsoleto destinado a ser utilizado para PDA), pero vamos a seguir con SVG 1.1.

Un subproducto desafortunado del uso de herramientas como estas para crear archivos SVG es que pueden agregar una gran cantidad de metadatos al código subyacente, lo que da como resultado archivos más grandes de lo que deberían ser. Naturalmente, esto es un problema en el diseño web, ya que no desea que aumenten los tiempos de carga debido a una mala optimización de su parte. Los gráficos vectoriales escalables deben optimizarse (en la mayoría de los casos) antes de poder incorporarlos a su sitio web.

Echemos un vistazo a un ejemplo de un archivo SVG que muestra el logotipo de Android antes y después de la optimización para ilustrar este punto:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"></pre>
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
 
<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
 
<path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
 
</g>
 
<path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
 
<g fill="#FFF">
 
<circle cx="36" cy="22" r="2"/>
 
<circle cx="59" cy="22" r="2"/>
 
</g>
 
</svg>

Ahora trabajaremos un poco de magia de optimización eliminando espacios, atributos predeterminados, estilos y otros datos no esenciales y obtendremos:

01
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"><g style="fill:#97C024;stroke-linejoin:round;stroke:#97C024"><path d="M14 40v24M81 40v24M38 68v24M57 68v24M28 42v31h39v-31z" stroke-width="10"/><path d="M32 5l5 10M64 5l-6 10" stroke-width="2"/></g><path d="M22 35h51v10h-51zM22 33c0-31 51-31 51 0" fill="#97C024"/><g fill="#FFF"><circle cx="36" cy="22" r="2"/><circle cx="59" cy="22" r="2"/></g></svg>

Aunque el archivo SVG original era bastante compacto al principio (0,5 kB), el proceso de optimización pudo reducir su tamaño de archivo en un 12,5 % (a 0,4 kB). En imágenes más complejas, notará reducciones aún más extremas en el tamaño del archivo y mejoras en los tiempos de carga cuando los SVG se implementan en su sitio web.

En aras de la simplicidad, recomendamos utilizar herramientas como el Optimizador de SVG en línea  creado por Peter Collingridge o SVGO , una aplicación de código abierto basada en Node.js.

Ahora que hemos aprendido qué hace que los SVG sean tan útiles y cómo trabajar con ellos, veamos cómo puede usar CSS para animar gráficos creados con este lenguaje de marcado.

Creación de un logotipo animado con SVG y CSS

Como mencionamos al hablar sobre lo que hace que los SVG sean tan geniales, vienen con algunos efectos gráficos integrados que incluyen capacidades de animación. De hecho, SVG tiene una sintaxis nativa únicamente para animaciones, conocida como SMIL (lenguaje de integración multimedia sincronizada), que le permite animar los atributos de sus gráficos directamente dentro del marcado XML.

Sin embargo, Internet Explorer nunca introdujo soporte para SMIL y los desarrolladores de Chrome han hablado de eliminar el soporte para esta sintaxis a favor de CSS y animaciones web. El uso de CSS para animar SVG también tiene la ventaja de ser bastante simple en comparación con SMIL o JavaScript (aunque existen algunas bibliotecas, como Snap o Velocity , que tienen como objetivo simplificar este proceso).

Ahora, mientras que los gráficos vectoriales escalables se pueden integrar en sitios web como imágenes incrustadas, fondos CSS o gráficos en línea, solo puede usar animaciones CSS para la última opción. Esto significa que solo podemos animar el marcado SVG que está directamente dentro de nuestro código HTML.

Echemos un vistazo a algunos ejemplos. ¿Recuerdas el logo SVG de Adobe que vimos antes? Vamos a utilizar una animación de desplazamiento y un efecto de transición simples para cambiar su color. Comenzamos especificando una clase para la ruta del vector (que llamaremos amablemente adobe-logo ), luego agregamos los efectos a esa clase en nuestro archivo de estilo. Así es como se vería el HTML:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
<!DOCTYPE html></pre>
<html>
 
<head>
 
<title>SVG Transitions</title>
 
<link rel="stylesheet" href="css/style.css">
 
</head>
 
<body>
 
<!-- The Adobe Logo recreated using SVG -->
 
<svg viewBox='0 0 105 93' >
 
<path class="adobe-logo" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
 
</svg>
 
</body>
 
</html>

Ahora pasamos a nuestro archivo styles.css :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* --------------------------
 
Here we add a little padding and specify a width.
 
--------------------------- */
 
body {
 
padding-top: 5em;
 
}
 
svg {
 
width: 33.32%;
 
float: left;
 
}
 
/* --------------------------
 
Now we add the actual animation.
 
--------------------------- */
 
.adobe-logo {
 
transition: .3s ease-out;
 
}
 
.adobe-logo:hover {
 
fill: #3881cc;
 
}

Que se vería así:

Si en lugar de una animación flotante, desea agregar un efecto de relleno y trazos al mismo gráfico SVG, el código sería algo como:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
/* --------------------------
 
Fill and strokes.
 
--------------------------- */
 
.adobe-logo {
 
stroke: #fee16e;
 
}
 
.adobe-logo:hover {
 
fill: #feae6e;
 
stroke-width: 8;
 
}
 
.adobe-logo {
 
transition: .3s ease-out;
 
}

Cuando todo esté listo, así es como se vería:

Estos son solo un par de ejemplos simples de lo que puede lograr usando CSS cuando se trata de animar gráficos SVG, pero si quiere inspiración real, echemos un vistazo a un ejemplo de lo que se puede lograr usando otras técnicas como agrupaciones, transformaciones, rotación, escalado e incluso fotogramas clave CSS:

Finalmente, cabe mencionar que la animación CSS tiene algunas limitaciones. Por ejemplo, no le permitirá cambiar la forma real de un elemento; para eso necesitarás recurrir a animaciones JavaScript. Para obtener más información sobre este tema, eche un vistazo a  8 bibliotecas de JavaScript para animar SVG .

Conclusión

Si se usan correctamente, las animaciones pueden mejorar la experiencia del usuario y el diseño general de un sitio. Aunque los SVG en combinación con CSS brindan una forma elegante de implementarlos, hay muchos otros métodos que también puede probar hasta que encuentre el que mejor satisfaga sus necesidades.

Si elige utilizar animaciones CSS para SVG, recuerde seguir los consejos anteriores:

  1. Elija una herramienta de edición de gráficos compatible.
  2. Recuerda siempre optimizar tu código SVG.
  3. Tenga en cuenta que solo puede implementar animaciones ‘simples’ usando esta técnica.

Consulte los recursos adicionales que enumeramos anteriormente si desea ver algunos de los increíbles efectos que los diseñadores han logrado al usar CSS en combinación con gráficos vectoriales escalables. ¿Quién sabe? Puede que encuentres algo de inspiración allí.

¿Cuál es tu método de animación preferido para tus diseños? ¡Háganos saber en la sección de comentarios!

Imagen en miniatura del artículo por Giingerann / shutterstock.com