Анимация масштабируемой векторной графики , открытого стандартного формата векторной графики на основе XML , возможна различными способами:
Библиотеки также были написаны как оболочка , обеспечивающая поддержку SMIL в современных браузерах с поддержкой SVG. [9] Этот метод также известен как SVG+Time. [ нужна цитата ]
Поскольку SVG поддерживает переносимую сетевую графику (PNG) и растровые изображения JPEG , его можно использовать для анимации таких изображений в качестве альтернативы APNG и сетевой графике с несколькими изображениями (MNG).
Элементы анимации SVG были разработаны в сотрудничестве с рабочей группой, опубликовавшей несколько версий Synchronized Multimedia Integration Language (SMIL). Рабочая группа SYMM (в сотрудничестве с рабочей группой SVG) разработала спецификацию SMIL Animation, которая представляет собой набор функций XML - анимации общего назначения. SVG включает в себя функции анимации, определенные в спецификации SMIL Animation, и предоставляет некоторые расширения, специфичные для SVG.
В июне 1998 года «Рабочая группа по синхронизированному мультимедиа» (известная как «SYMM» [10] ) в рамках Консорциума Всемирной паутины («W3C») опубликовала первую рекомендуемую версию спецификации, известную как «SMIL 1.0». [11] [12] Вскоре после публикации SMIL 1.0 в 1998 году группа компаний во главе с Microsoft опубликовала « Интерактивные мультимедийные расширения по времени для HTML (HTML+TIME); расширение SMIL в веб-браузере ». [13] В течение следующих двух лет ведущий автор HTML+TIME (Патрик Шмитц) работал с рабочей группой SYMM, а также с рабочей группой SVG. Вскоре после публикации SMIL 2.0 Шмитц и соавтор Аарон Коэн (из Intel ) опубликовали SMIL Animation 4 сентября 2001 года. [14] [15] SVG 1.0 также стал рекомендацией W3C 4 сентября 2001 года.
Некоторые веб-браузеры добавили поддержку анимации SVG в 2000-х годах, включая Amaya еще в 2003 году, но анимация SVG поддерживалась только широко используемыми браузерами, начиная с 2010-х годов, особенно Firefox 4 (2011). Internet Explorer поддерживает анимацию ECMAScript, а его преемник Microsoft Edge поддерживает анимацию ECMAScript и CSS, начиная с версии 42.17134.
Следующие фрагменты кода демонстрируют три метода создания анимированных изображений SVG в совместимых браузерах. Соответствующие части выделены желтым цветом. Нажмите на миниатюры изображений, чтобы просмотреть их анимированные версии.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" ширина = "100%" высота = "100%" viewBox= "-4 -4 8 8" > <title> SVG- анимация с использованием SMIL </title> <круг cx= "0" cy= "1" r= "2" инсульт = "красный" fill = "нет" > <аниматетрансформ имя_атрибута = "преобразование" тип атрибута = "XML" тип = "поворот" от = "0" до = "360" начало = "0 с" продолжительность = "1 с" повтореCount= "неопределенно" /> </круг></svg>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" ширина = "100%" высота = "100%" viewBox= "-4 -4 8 8" > <title> SVG- анимация с использованием CSS </title> < тип стиля = "текст/css" > @keyframes rot_kf { from { transform: Rotate (0deg); } в { преобразование: поворот (360 градусов); } } .rot { анимация: rot_kf 1 с линейная бесконечность; } </стиль> <круг класса = "гниль" cx= "0" cy= "1" r= "2" Stroke= "blue" fill= "none" /> </svg>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" высота = "100%" viewBox= "-4 -4 8 8" onload= "rotate(evt)" > <title> SVG- анимация с использованием ECMAScript </title> < тип сценария = "текст/ecmascript" > функция Rotate(evt) { var object = evt.target.ownerDocument.getElementById('rot'); setInterval(функция () { вар сейчас = новая дата(); вар миллисекунды = now.getTime() % 1000; вар градусов = миллисекунды * 0,36; // 360 градусов за 1000 мс object.setAttribute('transform', 'rotate(' + градусов + ')'); }, 20); } </скрипт> <circle id= "гниль" cx= "0" cy= "1" r= "2" Stroke= "green" fill= "none" /> </svg>
Хотя приведенный выше пример работает, это не оптимальная реализация; анимация ограничена 50 кадрами в секунду (FPS). Использование requestAnimationFrame
обеспечивает лучшую производительность и может достигать 60 FPS:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" высота = "100%" viewBox= "-4 -4 8 8" onload= "init()" > <title> SVG- анимация с использованием requestAnimationFrame() </title> <скрипт> объект вар ; функция инициализации() { объект = document.getElementById('rot'); window.requestAnimationFrame(повернуть); } функция Rotate(метка времени) { вар миллисекунды = временная метка % 1000; вар градусов = миллисекунды * 0,36; // 360 градусов за 1000 мс object.setAttribute('transform', 'rotate(' + градусов + ')'); window.requestAnimationFrame(повернуть); } </скрипт> <circle id= "rot" cx= "0" cy= "1" r= "2" штрих= "зеленый" fill= "нет" /> </svg>
Ниже приведен атрибут анимации, который идентифицирует целевой атрибут для данного целевого элемента, значение которого меняется со временем. attributeName = "<attributeName>"
указывает имя целевого атрибута. Префикс XMLNS может использоваться для указания пространства имен XML для атрибута. Префикс будет интерпретироваться в рамках текущего элемента анимации.
attributeType = "CSS | XML | auto"
указывает пространство имен, в котором определены целевой атрибут и связанные с ним значения. CSS
указывает, что значение «attributeName» — это имя свойства CSS, определенного в этой спецификации как анимируемое. XML
указывает, что значение 'attributeName' является именем атрибута XML, определенного в пространстве имен XML по умолчанию для целевого элемента. В этой спецификации атрибут должен быть определен как анимируемый. auto
Значение по умолчанию — «авто». Реализация должна сопоставлять «Имя атрибута» с атрибутом целевого элемента. Реализация должна сначала выполнить поиск соответствующего имени свойства в списке свойств CSS, а если оно не найдено, выполнить поиск элемента в пространстве имен XML по умолчанию.
Программное обеспечение MediaWiki автоматически генерирует статические неанимированные миниатюры изображений SVG. При просмотре фактического изображения .svg на каждой соответствующей странице описания его анимация будет отображаться в совместимом браузере.
Существует несколько библиотек JavaScript для работы с анимацией SVG. Преимущество использования таких библиотек состоит в том, что они часто решают проблемы несовместимости в браузерах посредством абстракции . Примеры библиотек: Raphaël и Velocity.js.