Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить

В сфере искусственного интеллекта произошло заметное событие. denisdandy 1 минуту назад Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить Уровень сложности Средний Время на прочтение 9 мин Охват и читатели 0 Flutter * Dart * Векторная графика * Google Chrome Дизайн мобильных приложений * Кейс Из песочницы Для контекста: я Flutter-инженер и техлид, последние годы работаю с production-приложениями на Flutter — мобильными, web и гибридными. В моей практике были fintech, маркетплейсы, food delivery и iGaming-продукты, где к UI обычно предъявляют довольно жёсткие требования: сложная графика, анимации, дизайн-системы, производительность, стабильность и предсказуемая доставка фич. full_flutter_svg (пришлось рисовать через ai из меня плохой художник) Веб-команда отдаёт SVG.

В Chrome он работает. Во Flutter — внезапно превращается в статичную картинку, частично ломается или требует обходных путей вроде GIF, видео, Lottie или ручной переписи анимации. Я попробовал решить именно этот класс проблем и в итоге написал пакет full_svg_flutter — SVG-рендерер для Flutter, который старается приблизить поведение SVG к тому, как его ожидаешь увидеть в браузере.

Технические детали

В статье расскажу, почему animated SVG — это совсем не “просто нарисовать path”, какие подсистемы пришлось реализовать, где это реально полезно, а где лучше использовать совсем другие инструменты. В какой-то момент я столкнулся с задачей, которая звучит просто: “взять SVG, который работает в браузере, и показать его во Flutter”. Но оказалось, что если внутри есть SMIL, CSS-анимации, path morphing, masks, filters или сложные стили, это уже не просто картинка, а почти маленький браузерный пайплайн.

Так появился full_svg_flutter — моя попытка приблизить поведение SVG во Flutter к тому, как мы привыкли видеть его в браузере. Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить Веб-команда отдаёт SVG. В Chrome он работает.

Во Flutter — внезапно превращается в статичную картинку, частично ломается или требует обходных путей вроде GIF, видео, Lottie или ручной переписи анимации. Я попробовал решить именно этот класс проблем и в итоге написал пакет full_svg_flutter — SVG-рендерер для Flutter, который старается приблизить поведение SVG к тому, как его ожидаешь увидеть в браузере. В статье расскажу: почему animated SVG — это не “просто нарисовать path”; какие подсистемы приходится реализовывать; где такой пакет реально полезен; где он, наоборот, не нужен; и почему в какой-то момент начинаешь понимать, что внутри делаешь маленький браузер.

Пакет Откуда вообще берётся проблема иногда мы даже не видим ничего (даже первого кадра) Если говорить про обычные статичные SVG, экосистема Flutter давно уже закрывает много задач достаточно хорошо. Но как только речь заходит о реальных SVG из production , быстро выясняется, что «поддержка SVG» и «поддержка SVG примерно как в браузере» — это совсем разные уровни.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.