Vivus работает поверх стандартного SVG DOM и использует JavaScript-анимацию для поэтапного прорисовывания путей. Это означает, что совместимость библиотеки напрямую зависит не от наличия специализированных графических API, а от поддержки браузером базовых веб-стандартов: SVG 1.1, DOM Level 2, requestAnimationFrame и корректной работы CSS/JS-движка.
Основой работы Vivus является манипуляция атрибутами SVG-элементов, в
первую очередь stroke-dasharray и
stroke-dashoffset. Эти свойства поддерживаются всеми
современными браузерами без исключения:
SVG DOM в этих движках реализован полноценно, включая методы доступа
к узлам (getElementById, querySelector) и
изменение атрибутов в реальном времени. Vivus не использует
экспериментальные API, поэтому ограничений на уровне спецификаций SVG
нет.
Ключевым требованием является корректная интерпретация inline-SVG.
Внешние SVG-файлы, подключаемые через <img>, не
подходят для анимации, поскольку их DOM недоступен. Браузеры одинаково
поддерживают inline SVG, что делает поведение Vivus предсказуемым во
всех современных окружениях.
Анимационный цикл Vivus основан на
requestAnimationFrame. Этот механизм синхронизирует
обновления с частотой обновления экрана и присутствует во всех
актуальных браузерах.
requestAnimationFrame(callback);Поддержка:
Отсутствие requestAnimationFrame в старых браузерах
компенсируется полифилами, однако в контексте современных сред это не
требуется. Vivus не реализует собственный таймерный цикл через
setInterval, что снижает нагрузку и устраняет проблемы с
рассинхронизацией кадров.
SVG-анимации исторически могли использовать SMIL
(<animate>, <animateMotion>),
однако поддержка этого механизма была ограничена и постепенно
исключалась из браузеров.
Vivus не использует SMIL вообще. Вся анимация реализована через JavaScript и изменение атрибутов путей. Это обеспечивает стабильность поведения:
Safari долгое время поддерживал SMIL частично, что создавало расхождения между движками. Vivus обходит этот слой полностью, поэтому различий в анимации между браузерами нет.
В браузерах на Blink Vivus работает без ограничений. Особенности:
getTotalLength() у
SVGPathElementBlink эффективно обрабатывает изменения DOM-атрибутов, что делает анимацию плавной даже при сложных SVG с десятками сегментов.
Важно учитывать, что при чрезмерно сложной геометрии (тысячи узлов path) возможна нагрузка на main thread, но это уже архитектурное ограничение SVG, а не браузера или Vivus.
Firefox демонстрирует стабильную и эталонную поддержку SVG-спецификации. Vivus в Gecko-движке ведёт себя идентично Chrome, но с некоторыми особенностями:
Firefox редко оптимизирует SVG-операции агрессивно, что делает производительность предсказуемой, но иногда менее высокой по сравнению с Chromium.
Safari исторически имеет наиболее чувствительную реализацию SVG-анимаций и DOM-операций. Vivus в WebKit работает корректно, однако есть характерные особенности:
getBBox() и
getTotalLength() в старых версиях SafariСовременный Safari (14+) устраняет большинство проблем. Vivus не использует deprecated API, поэтому поведение стабильно, но при сложных SVG на мобильных устройствах возможны просадки FPS.
На мобильных платформах Vivus опирается на те же механизмы, что и на десктопе, поскольку движки унифицированы:
Ключевой фактор на мобильных устройствах — ограниченные ресурсы CPU и энергопотребление. Vivus использует лёгкую модель анимации без WebGL и без canvas-рендеринга, что снижает нагрузку на GPU, но увеличивает зависимость от CPU.
Особенности мобильной работы:
Internet Explorer (включая IE11) формально поддерживает SVG частично, но Vivus не гарантирует корректную работу.
Причины:
stroke-dasharray анимацииVivus не содержит встроенных полифилов для IE, поскольку архитектура библиотеки рассчитана на современные браузеры. Использование в таких средах требует значительных внешних полифилов и часто приводит к деградации производительности.
Vivus не использует inline-eval, динамическое создание функций или небезопасные конструкции. Это упрощает интеграцию в проекты с жёсткими Content Security Policy.
Допустимые политики:
script-src 'self''unsafe-eval'Анимация реализуется через прямые вызовы функций и DOM-операции, что делает библиотеку совместимой с современными security-ограничениями.
При отключённом JavaScript SVG остаётся полностью отображаемым, но анимация не выполняется. Vivus не модифицирует исходную структуру SVG таким образом, чтобы нарушить базовое отображение.
Это важный аспект совместимости: SVG остаётся валидным даже без
исполнения скрипта, поскольку Vivus не разрушает исходные
stroke-значения, а только динамически изменяет их в
процессе работы.
Несмотря на единый стандарт, визуальное поведение SVG может отличаться:
Vivus не компенсирует эти различия, поскольку работает на уровне геометрии и длины пути, а не пиксельного рендера. Это означает, что анимационная логика идентична, но визуальная подача может слегка отличаться между движками.
Современные браузеры оптимизируют SVG-операции по-разному, но общие характеристики можно выделить:
Vivus масштабируется линейно относительно количества SVG-узлов,
поскольку каждый шаг анимации — это изменение атрибута
stroke-dashoffset.
Vivus не имеет собственных аппаратных ускорителей. Всё вычисляется на main thread, что приводит к следующим ограничениям:
getTotalLength()Современные браузеры частично компенсируют это оптимизациями layout engine, но фундаментальная модель остаётся неизменной: SVG-анимация в Vivus — это DOM-операции, а не GPU-рендеринг.
Vivus корректно работает внутри:
Поскольку библиотека не зависит от виртуального DOM и не вмешивается в жизненный цикл фреймворков, она может быть интегрирована как side-effect слой. Единственное требование — доступ к реальному DOM SVG-элемента после рендеринга компонента.
В React это обычно означает использование useEffect, в
Vue — mounted, в Angular —
ngAfterViewInit.
Vivus опирается исключительно на стабильные стандарты веб-платформы: SVG DOM, базовые CSS-атрибуты и requestAnimationFrame. Это обеспечивает единообразное поведение во всех современных браузерах без необходимости адаптивных слоёв или сложных полифилов.