Подход браузерного движка — к SVG во Flutter.

Денис создал и поддерживает full_svg_flutter — самостоятельный рендерер для команд, которым важно оставить существующие SVG-ассеты в исходном формате внутри Flutter.

1.4.2текущий релиз
140pub points
12публичных версий
MITлицензия

В браузере ассет работает. Во Flutter анимация пропадает.

Обычно эту дыру закрывают конвертацией в Lottie, Rive, GIF, WebP или ручной Flutter-анимацией. Это неплохие инструменты, но конвертация — лишняя плата, когда источником истины уже является SVG.

Один движок с сохранением DOM для статического и анимированного SVG

Пакет разбирает модель документа, CSS, тайминги, фильтры, текст и состояние интерактива, а затем рисует средствами Flutter. JavaScript-экспорты SVGator выполняются во встроенном QuickJS; SVG без скриптов не тратят время на запуск JavaScript.

Что покрывает рантайм

  • Статическая геометрия, градиенты, паттерны, обрезка и маски
  • Анимация SMIL и CSS @keyframes
  • Path morphing, motion paths и управление воспроизведением
  • Все 17 примитивов SVG-фильтров
  • Rich text, textPath, bidi/RTL и метаданные доступности
  • Встроенный JavaScript и экспорты SVGator
  • Миграция со статического API flutter_svg
  • Android, iOS, macOS, Windows и Linux
Animated Flutter logo built from one SVG file

Один SVG-файл. Здесь — анимация браузера, в пакете — нативный рендеринг Flutter.

На этой странице анимированный SVG проекта показывает браузер. В приложении на Flutter full_svg_flutter отрисовывает тот же самый файл без WebView и без конвертации.

Практичный путь миграции

Существующий статический SvgPicture часто переезжает одной заменой импорта. FSvgPicture сам распознаёт признаки анимации, а AnimatedSvgController добавляет паузу, перемотку, скорость, направление и переключение SVG-видов, когда это нужно продукту.

Документация рантаймов, выросших из реальных пограничных случаев.

v1.4.2

full_svg_flutter

Оставить SVG исходным форматом внутри Flutter.

v0.1.0

woff2

Загружать веб-шрифты через FontLoader во Flutter.

v0.1.3

quickjs_engine

Один и тот же современный JavaScript-движок на каждой платформе Flutter.

Проблема: поддержка SVG во Flutter обычно статическая

Практический разбор: в чём разрыв в рендеринге, какие есть обходные пути, как управлять воспроизведением, чем платить за производительность и когда SVG стоит оставить SVG.

Читать технический разбор (откроется в новой вкладке)

Нужно создать, модернизировать или сдвинуть с места цифровой продукт?

Расскажите о реальной задаче: веб, мобильное приложение, работа команды или ИИ-процесс, который пора довести до продакшена.

Обсудить проект