Animación SVG

La animación de gráficos vectoriales escalables (SVG) , un formato estándar de gráficos vectoriales abierto basado en XML , es posible a través de diversos medios:

• Programación mediante scripts : ECMAScript es un medio fundamental para crear animaciones e interfaces de usuario interactivas dentro de SVG.
• Estilo : Desde 2008, el desarrollo de las animaciones CSS como una característica de WebKit ha hecho posible la animación implícita, controlada por hojas de estilo, de archivos SVG desde dentro del Modelo de Objetos del Documento (DOM).
• SMIL : Synchronized Multimedia Integration Language, un medio recomendado ^{[ 1 ] [ 2 ] [ 3 ] [ 4 ]} para animar hipermedia basada en SVG , compatible con los navegadores web Amaya (2003) ^{[ 5 ]} Opera (2006), ^{[ 6 ]} Mozilla Firefox (2011), ^{[ 7 ]} Google Chrome (2016) y Safari (2017) , ^{[ 8 ]} y cualquier navegador que aspire a pasar la prueba de estándares web Acid3 de 2008 (es decir, antes de la "simplificación" de la prueba en 2011), ya que esto requiere compatibilidad con SMIL para las pruebas 75 y 76.

También se han escrito bibliotecas como un adaptador para brindar soporte SMIL a los navegadores actuales compatibles con SVG. ^{[ 9 ]} Este método también se conoce como SVG+Time.

Dado que SVG admite imágenes rasterizadas PNG y JPEG , se puede utilizar para animar dichas imágenes como alternativa a APNG y a los gráficos de red de imágenes múltiples (MNG).

Los elementos de animación SVG se desarrollaron en colaboración con el grupo de trabajo que publicó varias versiones del Lenguaje de Integración Multimedia Sincronizada (SMIL). El Grupo de Trabajo SYMM (en colaboración con el Grupo de Trabajo SVG) desarrolló la especificación de animación SMIL, que define un conjunto de características de animación de propósito general basado en XML. SVG incorpora las características de animación definidas en la especificación de animación SMIL y proporciona algunas extensiones específicas de SVG.

En junio de 1998, el "Grupo de Trabajo Multimedia Sincronizado" (conocido como "SYMM" ^{[ 10 ]} ) dentro del Consorcio World Wide Web ("W3C") publicó la primera versión recomendada de la especificación conocida como "SMIL 1.0". ^{[ 11 ] [ 12 ]} Poco después de la publicación de SMIL 1.0 en 1998, un grupo de empresas lideradas por Microsoft publicó " Extensiones Multimedia Interactivas Temporizadas para HTML (HTML+TIME); Extendiendo SMIL al Navegador Web ". ^{[ 13 ]} Durante los dos años siguientes, el autor principal de HTML+TIME (Patrick Schmitz) trabajó con el grupo de trabajo SYMM, mientras que también trabajó con el grupo de trabajo SVG. Poco después de la publicación de SMIL 2.0, Schmitz y su coautor Aaron Cohen (de Intel ) publicaron SMIL Animation el 4 de septiembre de 2001. ^{[ 14 ] [ 15 ]} SVG 1.0 también se convirtió en una recomendación del W3C el 4 de septiembre de 2001.

Algunos navegadores web añadieron compatibilidad con animaciones SVG durante la década de 2000, incluido Amaya ya en 2003, pero las animaciones SVG solo fueron compatibles con los navegadores más utilizados a partir de la década de 2010, en particular Firefox 4 (2011). Internet Explorer admite animaciones ECMAScript, y su sucesor, Microsoft Edge, admite animaciones ECMAScript y CSS a partir de la versión 42.17134.

Los siguientes fragmentos de código muestran tres técnicas para crear imágenes SVG animadas en navegadores compatibles. Las partes relevantes están resaltadas en amarillo. Haz clic en las miniaturas de las imágenes para ver sus versiones animadas.

Animación SVG usando SMIL

Consulte el archivo de animación SVG usando SMIL.svg .

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"ancho= "100%" alto= "100%" viewBox= "-4 -4 8 8" ><title> Animación SVG usando SMIL </title><círculo cx= "0" cy= "1" r= "2" trazo= "rojo" relleno= "ninguno" ><animateTransformattributeName= "transform"attributeType= "XML"tipo= "rotar"desde= "0"a= "360"dur= "1s"repeatCount= "indefinido" /></círculo></svg>

Animación SVG usando CSS

Consulte el archivo SVG animation using CSS.svg .

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"ancho= "100%" alto= "100%" viewBox= "-4 -4 8 8" ><title> Animación SVG usando CSS </title><style>@keyframes rot_kf { desde { transformar: rotar(0 grados); } a { transformar: rotar(360 grados); } } .rot { animación: rot_kf 1s lineal infinito; } </style><circle class= "rot"cx= "0" cy= "1" r= "2" stroke= "blue" fill= "none" /></svg>

Animación SVG mediante ECMAScript

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "-4 -4 8 8" onload= "rotate(evt)" ><title> Animación SVG usando ECMAScript </title><script>función rotar(evt) { const object = evt.target.ownerDocument.getElementById('rot'); setInterval(() => { const ahora = nueva fecha(); const milisegundos = ahora.getTime() % 1000; const grados = milisegundos * 0.36; // 360 grados en 1000 ms objeto.setAttribute('transform', `rotate(${degrees})`); }, 20); } </script><circle id= "rot"cx= "0" cy= "1" r= "2" stroke= "green" fill= "none" /></svg>

Aunque el ejemplo anterior funciona, no es la implementación óptima; la animación está limitada a 50 fotogramas por segundo (FPS). El uso de requestAnimationFrameproporciona un mejor rendimiento y puede alcanzar los 60 FPS:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "-4 -4 8 8" onload= "init()" ><title> Animación SVG usando requestAnimationFrame() </title><script>objeto ;función init() { objeto = document.getElementById('rot');ventana.solicitarMarcoDeAnimación(rotar); } función rotar(marca de tiempo) { const milisegundos = marca de tiempo % 1000; const grados = milisegundos * 0.36; // 360 grados en 1000 ms objeto.setAttribute('transform', `rotate(${degrees})`); ventana.solicitarMarcoDeAnimación(rotar); } </script><circle id= "rot" cx= "0" cy= "1" r= "2" stroke= "green" fill= "none" /></svg>

A continuación se muestran los atributos de animación que identifican el atributo de destino para el elemento de destino dado, cuyo valor cambia con el tiempo. attributeName = "<attributeName>"Se especifica el nombre del atributo de destino. Se puede usar un prefijo XMLNS para indicar el espacio de nombres XML del atributo. El prefijo se interpretará dentro del ámbito del elemento de animación actual.

attributeType = "CSS | XML | auto"especifica el espacio de nombres en el que se definen el atributo de destino y sus valores asociados. CSSespecifica que el valor de 'attributeName' es el nombre de una propiedad CSS definida como animatable en esta especificación . XMLespecifica que el valor de 'attributeName' es el nombre de un atributo XML definido en el espacio de nombres XML predeterminado para el elemento de destino. El atributo debe estar definido como animatable en esta especificación . auto El valor predeterminado es 'auto'. La implementación debe hacer coincidir el 'attributeName' con un atributo para el elemento de destino. La implementación debe primero buscar en la lista de propiedades CSS un nombre de propiedad coincidente y, si no se encuentra ninguno, buscar en el espacio de nombres XML predeterminado para el elemento.

• 
  Animación SMIL que muestra el cambio en la transformación (escala) y los atributos CSS (opacidad y desplazamiento del guion).
• 
  Animación SMIL que demuestra el movimiento a lo largo de una trayectoria y la simulación de 3D.
• 
  Animación SMIL que muestra la transformación de formas (trayectorias).
• 
  Animación CSS3 que demuestra cambios en la transformación (rotación, escala y traslación) y simulación de 3D.

El software wiki MediaWiki genera automáticamente miniaturas estáticas, sin animación, de imágenes SVG. Al visualizar la imagen .svg original desde la página de descripción correspondiente, se mostrará su animación en un navegador compatible.

Existen varias bibliotecas de JavaScript para trabajar con animaciones SVG. Una ventaja de usar estas bibliotecas es que suelen resolver problemas de incompatibilidad en los navegadores mediante la abstracción . Algunos ejemplos de bibliotecas son Raphaël y Velocity.js.

• animaciones CSS
• D3.js
• Animación Flash
• Animación GIF