Animated and Interactive SVG: Tips You Should Keep in Mind

SVG Animado e Interactivo: Consejos Esenciales

El formato SVG se ha convertido en una alternativa contemporánea a Flash en muchos aspectos. No solo está basado en vectores, sino que también hace posibles las animaciones y las interacciones. Debido a las diferentes formas de crear animaciones e integrar SVG en un proyecto web, debes tener en cuenta los siguientes consejos para asegurarte de que todo funcione como quieres.

¿Animaciones a través de JavaScript, CSS o SMIL?

Hay tres opciones cuando se trata de poner en movimiento los SVG. Ciertamente, el más fácil es usando SMIL: “Lenguaje de Integración Multimedia Sincronizada”. Aquí, elementos únicos como “” están disponibles, lo que le permite interpolar y transformar cualquier forma SVG. Sin embargo, Google lo ha marcado como «obsoleto» en su navegador Chrome, por lo que probablemente debería renunciar a SMIL.

<rect x="0" y="0" width="50" height="20">
  <animate attributeName="x" from="0" to="100" dur="5s"/>
</rect>

Usando CSS, puedes animar elementos de una manera similar a como lo haces en combinación con HTML. Los atributos «transición», «animación» y «@fotogramas clave» están disponibles. Sin embargo, aquí solo puede cambiar valores a través de una animación que se puede definir a través de CSS, es decir, posición y color, por ejemplo. Las formas de un polígono o una ruta no se pueden modificar mediante una animación CSS.

rect {
  animation: animation 5s infinite;
}

@keyframes animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Tanto el ejemplo de SMIL como el de CSS dan como resultado la misma animación.

Como las opciones de animación a través de CSS son limitadas, existen muchos marcos de JavaScript que se utilizan para realizar animaciones SVG complejas. JavaScript le otorga acceso a todos los elementos y atributos de un elemento SVG.

var i = 0;

function animation() {
  document.getElementsByTagName("rect")[0].setAttribute("width", i++);
  window.requestAnimationFrame(animation);
}

En el ejemplo, el ancho de un rectángulo se mejora mediante una animación. Por supuesto, también serían posibles animaciones significativamente más complejas.

La forma en que debe implementar SVG en su proyecto web depende de si elige JavaScript, CSS o incluso SMIL. En general, tiene la opción de usar gráficos o archivos SVG como imágenes normales mediante el elemento ««, o mediante la función «url()», como una «imagen de fondo», por ejemplo.

Sin embargo, los navegadores manejan de manera muy diferente las tres opciones de animación, dependiendo del método de implementación.

Cuando se utiliza un SVG animado como un archivo de imagen normal, las animaciones CSS y SMIL solo se ejecutan en Chrome. Firefox solo admite animaciones SMIL, e Internet Explorer y Edge no admiten animaciones en ese caso.

Implementación de SVG a través de un elemento «» o en línea

La integración mediante un elemento “” proporciona el mayor soporte posible entre todas las opciones de animación. Alternativamente, también puede incrustar directamente un SVG dentro de su documento HTML, incluso guardando una solicitud al hacerlo. En este caso, Firefox admite los tres métodos de animación.

Sin embargo, Internet Explorer y Edge generalmente no admiten animaciones CSS y SMIL. Por lo tanto, solo te quedará la opción de JavaScript.

Interacciones usando JavaScript

Aparte de las animaciones, JavaScript también puede crear un gráfico SVG interactivo. De esta manera, puede integrar detectores de eventos que reaccionan a los clics del mouse, por ejemplo. Para que JavaScript funcione dentro de un SVG, debe implementarse en el documento HTML con un elemento «» o directamente.

document.getElementsByTagName("circle")[0].addEventListener("click", function() {
  alert("Hello");
}, false);

En el ejemplo, un clic en un círculo activa una “alerta()”.

Al vincular un archivo SVG como fondo a través del elemento ««, o al usar CSS y «url()», el JavaScript que contiene no se ejecuta.

Incluso al integrar un archivo SVG con un elemento ««, puede controlar los elementos marcados en el interior utilizando un JavaScript del documento HTML integrado. Para ello se dispone del atributo “contentDocument”, que permite acceder a los elementos de los archivos integrados a través de “” o “