Uma mentalidade de motor de navegador, levada ao SVG no Flutter.

Denis criou e mantém o full_svg_flutter, um runtime de renderização autônomo para times que precisam que assets SVG existentes continuem sendo SVG dentro do Flutter.

1.4.2release atual
140pub points
12versões públicas
MITlicença open source

O asset funciona no navegador. No Flutter, a animação some.

Muitos pipelines resolvem essa lacuna convertendo o asset para Lottie, Rive, GIF, WebP ou código de animação Flutter feito à mão. São boas ferramentas – mas a conversão é o custo errado quando o SVG já é a fonte da verdade.

Um único motor que preserva o DOM para SVG estático e animado

O pacote faz o parsing do modelo do documento, do CSS, do timing, dos filtros, do texto e do estado de interação, e então pinta dentro do Flutter. Exportações do SVGator controladas por JavaScript rodam em um motor QuickJS embarcado; SVGs sem scripts não pagam nenhum custo de inicialização de JavaScript.

O que o runtime cobre

  • Geometria estática, gradientes, patterns, clipping e máscaras
  • Animação SMIL e CSS @keyframes
  • Path morphing, motion paths e controle de reprodução
  • Todas as 17 primitivas de filtro do SVG
  • Texto rico, textPath, bidi/RTL e metadados de acessibilidade
  • JavaScript inline e exportações do SVGator
  • Migração da API estática compatível com flutter_svg
  • Android, iOS, macOS, Windows e Linux
Animated Flutter logo built from one SVG file

Um único arquivo SVG. Animação nativa do navegador aqui; renderização nativa do Flutter no pacote.

Esta página exibe no navegador o asset SVG animado do próprio projeto. Em um aplicativo Flutter, o full_svg_flutter renderiza o mesmo formato de origem dentro do Flutter, sem WebView e sem etapa de conversão.

Um caminho de migração prático

O uso estático existente de SvgPicture muitas vezes migra com uma simples troca de import. FSvgPicture detecta automaticamente marcadores de animação, e AnimatedSvgController adiciona pausa, seek, velocidade, direção e controle de views do SVG quando o produto precisa.

Documentação dos runtimes por trás de edge cases reais.

v1.4.2

full_svg_flutter

Mantenha o SVG como formato de origem dentro do Flutter.

v0.1.0

woff2

Carregue contêineres de web fonts pelo FontLoader do Flutter.

v0.1.3

quickjs_engine

Rode o mesmo motor JavaScript moderno em todas as plataformas Flutter.

O problema: o suporte a SVG no Flutter costuma ser estático

Uma explicação prática da lacuna de renderização, das soluções alternativas mais comuns, do controle de reprodução, dos trade-offs de performance e de quando manter SVG como SVG é a escolha certa.

Ler a análise técnica (abre em uma nova aba)

Precisa construir, modernizar ou destravar um produto digital?

Traga a restrição real – web, mobile, entrega do time ou um fluxo de trabalho com IA que precisa ficar pronto para produção.

Conversar sobre um projeto