Open Source
Browser-Engine-Denken für SVG in Flutter.
Denis hat full_svg_flutter entwickelt und pflegt es weiter: eine eigenständige Rendering-Runtime für Teams, deren vorhandene SVG-Assets in Flutter SVG bleiben müssen.
Öffentlicher Stand · 17. August 2026
01 · Problem
Im Browser funktioniert das Asset. In Flutter verschwindet die Animation.
Viele Pipelines schließen diese Lücke, indem sie das Asset nach Lottie, Rive, GIF, WebP oder in handgeschriebenen Flutter-Animationscode konvertieren. Das können gute Werkzeuge sein – aber Konvertierung ist der falsche Preis, wenn SVG ohnehin die Quelle der Wahrheit ist.
02 · Engine
Eine DOM-erhaltende Engine für statisches und animiertes SVG
Das Paket parst Dokumentmodell, CSS, Timing, Filter, Text und Interaktionszustand und zeichnet dann in Flutter. JavaScript-basierte SVGator-Exporte laufen in einer gebündelten QuickJS-Engine; SVGs ohne Skripte zahlen keine JavaScript-Startkosten.
03 · Runtime
Was die Runtime abdeckt
- Statische Geometrie, Verläufe, Muster, Clipping und Masken
- SMIL- und CSS-@keyframes-Animation
- Path Morphing, Motion Paths und Playback-Steuerung
- Alle 17 SVG-Filterprimitive
- Rich Text, textPath, Bidi/RTL und Accessibility-Metadaten
- Inline-JavaScript und SVGator-Exporte
- flutter_svg-kompatible Migration des statischen APIs
- Android, iOS, macOS, Windows und Linux
04 · Demo
Eine SVG-Datei. Hier nativ im Browser animiert, im Paket nativ in Flutter gerendert.
Diese Seite zeigt das animierte SVG-Asset des Projekts im Browser. In einer Flutter-App rendert full_svg_flutter dieselbe Quelldatei direkt in Flutter – ohne WebView und ohne Konvertierung.
Ein praktikabler Migrationspfad
Bestehende statische SvgPicture-Aufrufe lassen sich oft mit einem geänderten Import übernehmen. FSvgPicture erkennt Animationsmarker automatisch, und AnimatedSvgController ergänzt Pause, Seek, Geschwindigkeit, Richtung und den Wechsel von SVG-Views, wenn das Produkt sie braucht.
05 · Runtime stack
Dokumentation für Runtimes, die aus echten Grenzfällen entstanden sind.
Technische Beiträge
Das Problem: SVG-Unterstützung in Flutter ist meist statisch
Eine praxisnahe Erklärung der Rendering-Lücke, der üblichen Workarounds, der Playback-Steuerung, der Performance-Trade-offs – und wann es richtig ist, SVG als SVG zu belassen.
Technischen Deep-Dive lesen (öffnet in neuem Tab)Kontakt
Ein digitales Produkt bauen, modernisieren oder wieder in Bewegung bringen?
Beschreiben Sie das eigentliche Problem – Web, Mobile, die Auslieferung im Team oder ein KI-Workflow, der produktionsreif werden muss.
Projekt besprechen