- FRONTEND
- BEST PRACTICES
- FEBRERO 2020
Cómo animar un SVG con CSS
Suscríbete a Insights
Déjanos tu email y te mantendremos al tanto de todas nuestras publicaciones. Solo recibirás una comunicación al mes aproximadamente. Tranquilo, no mandamos spam ;)
SVG es el acrónimo de ‘Scalable Vector Graphics’, y se trata de un estándar desarrollado por el W3C que utiliza un lenguaje de marcado basado en XML. Esa es al menos la definición técnica oficial, pero en la práctica es utilizado como un etiquetado especial para dibujar vectores, describiendo coordenadas dentro de un lienzo.
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
.
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.
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.
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.
Boream insights
Descubre tendencias y sigue el día a día de nuestros proyectos.
Ver todos los insights-
Backend Best practices
Aplicando soluciones de Inteligencia Artificial para la creación de Chatbots en Drupal
Con la rápida evolución de la Inteligencia Artificial (IA), las empresas y organizaciones buscan cada vez más formas de automatizar la atención al cliente y mejorar la experiencia del usuario. Los chatbots, impulsados por tecnologías de IA, se han convertido en una solución popular para estas necesidades. Drupal, con su arquitectura modular y flexible, es una plataforma ideal para integrar estas soluciones.
-
UX-CX
Solid, UX y datos personales. ¿Una utopía o una realidad?
Solid es una tecnología basada en los estándares actuales de Internet que permite la organización de datos e identidades en las aplicaciones que desarrollemos. Hasta aquí poca cosa nueva. La revolución viene dada porque con esta tecnología es el propio usuario quien tiene el control de sus datos y quien da el permiso de uso a las compañías a través de un WebID.
-
Diseño UX-CX Research
Sesgos cognitivos y prejuicios en los procesos de diseño de interfaz: como combatirlos
Como diseñadores de interfaz y de experiencia de usuario debemos tomar decisiones rápidas que impactan de manera notable en el resultado final de nuestros productos digitales. Generalmente no somos conscientes de que estas decisiones pueden verse profundamente afectadas por una interpretación errónea de la realidad, sesgada por nuestra propia experiencia y alejada de una comprensión racional del entorno.
-
Backend Best practices
Desarrollo Drupal conexión con LDAP: control de acceso.
Tras el primer insight donde comentamos los pasos básicos de conexión de un desarrollo Drupal con un Sistema LDAP, en esta nueva entrega profundizamos en algunos aspectos más avanzados o particulares.