La animación de gráficos vectoriales escalables , un formato de gráficos vectoriales estándar abierto basado en XML , es posible a través de varios medios:
También se han escrito bibliotecas como complemento para brindar soporte SMIL a los navegadores actuales compatibles con SVG. [9] Este método también se conoce como SVG+Time. [ cita requerida ]
Dado que SVG admite gráficos de red portátiles (PNG) e imágenes rasterizadas JPEG , se puede utilizar para animar dichas imágenes como alternativa a APNG y gráficos de red de múltiples imágenes (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 representa un conjunto de características de animación XML de propósito general . 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 "Synchronized Multimedia Working Group" (conocido como "SYMM" [10] ) dentro del World Wide Web Consortium ("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 en 1998 de SMIL 1.0, un grupo de empresas lideradas por Microsoft publicó " Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser ". [13] Durante los dos años siguientes, el autor principal de HTML+TIME (Patrick Schmitz) trabajó con el grupo de trabajo SYMM, mientras también trabajaba con el grupo de trabajo SVG. Poco después de la publicación de SMIL 2.0, Schmitz y el 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 la animación SVG durante la década de 2000, incluido Amaya en 2003, pero la animación SVG solo fue compatible con los navegadores más utilizados a partir de la década de 2010, en particular con Firefox 4 (2011). Internet Explorer admite la animación 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 demuestran tres técnicas para crear imágenes SVG animadas en navegadores compatibles. Las partes relevantes están resaltadas en amarillo. Haga clic en las miniaturas de las imágenes para ver sus versiones animadas.
<?xml version="1.0" encoding="UTF-8" independiente="sí"?><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> <circle cx= "0" cy= "1" r= "2" stroke= "rojo" fill= "ninguno" > <animarTransformar atributoName= "transformar" tipoDeAtributo= "XML" tipo= "rotar" desde= "0" a= "360" dur= "1s" repeatCount= "indefinido" /> </círculo></svg><?xml version="1.0" encoding="UTF-8" independiente="sí"?><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> <estilo> @fotogramasclave rot_kf { desde { transformar: rotar(0deg); } para { transformar: rotar(360deg); } } .rot { animación: rot_kf 1s lineal infinito; } </estilo> <circle class= "podredumbre" cx= "0" cy= "1" r= "2" stroke= "azul" fill= "ninguno" /> </svg><?xml version="1.0" encoding="UTF-8" independiente="sí"?><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= "rotar(evt)" > <title> Animación SVG con ECMAScript </title> <guión> función rotar(evt) { objeto constante = evt.target.ownerDocument.getElementById('rot'); establecerIntervalo(() => { const ahora = nueva Fecha(); const milisegundos = ahora.getTime() % 1000; const degrees = milisegundos * 0.36; // 360 grados en 1000 ms objeto.setAttribute('transformar', `rotar(${grados})`); }, 20); } </script> <circle id= "podredumbre" cx= "0" cy= "1" r= "2" stroke= "verde" fill= "ninguno" /> </svg>Aunque el ejemplo anterior funciona, no es la implementación óptima; la animación está limitada a 50 cuadros por segundo (FPS). El uso de requestAnimationFrameproporciona un mejor rendimiento y puede alcanzar los 60 FPS:
<?xml version="1.0" encoding="UTF-8" independiente="sí"?><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" onload= "init()" > <title> Animación SVG usando requestAnimationFrame() </title> <guión> dejar objeto; función init() { objeto = documento.getElementById('rot'); ventana.requestAnimationFrame(rotar); } función rotar(marca de tiempo) { const milisegundos = marca de tiempo % 1000; const degrees = milisegundos * 0.36; // 360 grados en 1000 ms objeto.setAttribute('transformar', `rotar(${grados})`); ventana.requestAnimationFrame(rotar); } </script> <circle id= "rot" cx= "0" cy= "1" r= "2" stroke= "green" fill= "none" /> </svg>Los siguientes son 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>"especifica el nombre del atributo de destino. Se puede utilizar un prefijo XMLNS para indicar el espacio de nombres XML para el atributo. El prefijo se interpretará en el á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 animable 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 definirse como animable en esta especificación. autoEl valor predeterminado es 'auto'. La implementación debe hacer coincidir el 'nombre del atributo' con un atributo para el elemento de destino. La implementación primero debe buscar en la lista de propiedades CSS un nombre de propiedad coincidente y, si no se encuentra ninguno, buscar el elemento en el espacio de nombres XML predeterminado.
El software wiki MediaWiki genera automáticamente miniaturas estáticas y no animadas de imágenes SVG. Al ver la imagen SVG real desde cada página de descripción respectiva, se mostrará su animación en un navegador compatible.
Existen varias bibliotecas de JavaScript para trabajar con animaciones SVG. Una ventaja de usar dichas bibliotecas es que a menudo resuelven problemas de incompatibilidad en los navegadores mediante la abstracción . Algunos ejemplos de bibliotecas son Raphaël y Velocity.js.
