Svg2fbf

<!-- Animated Header with FBF.SVG Title --> <p align="center"> <img src="assets/panther_bird_header.fbf.svg" alt="FBF.SVG Animated Header - Panther and Bird Animation with Title" width="100%" style="max-width: 1280px; height: auto;"/> </p> <h1 align="center">svg2fbf</h1> <p align="center"> <strong>SVG Frame-by-Frame Animation Generator</strong> </p> <p align="center"> <a href="https://opensource.org/licenses/Apache-2.0"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a> <a href="https://www.python.org/downloads/"><img src="https://img.shields.io/badge/python-3.10+-blue.svg" alt="Python"></a> <a href="https://github.com/Emasoft/svg2fbf/releases"><img src="https://img.shields.io/github/v/release/Emasoft/svg2fbf?include_prereleases" alt="Version"></a> </p> <p align="center"> <a href="https://github.com/opentoonz/opentoonz"><img src="https://img.shields.io/badge/Part%20of-OpenToonz%20Open%20Source%20Effort-ff6b35?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4em0tNS01bDctNC00IDd6Ii8+PC9zdmc+" alt="Part of OpenToonz Open Source Effort"></a> </p> <p align="center"> <em>FBF.SVG format is discussed here: <a href="https://github.com/opentoonz/opentoonz/issues/5346">OpenToonz Issue #5346</a> - bringing vector frame-by-frame animation to the web</em> </p>

---

⚠️ ALPHA SOFTWARE: svg2fbf is currently in alpha development. While functional and tested, the API, command-line interface, and FBF format specification may change between releases. Use in production with caution and expect breaking changes until the stable 1.0 release. Check the releases page for the latest version.

---

Table of Contents

• About FBF.SVG Format
  • Design Principles
  • Format Specification & Schema
• FBF.SVG Official Logo
• Comparison to Other Web Vector Animation Formats
  • 🏆 FBF.SVG vs. The Competition: Web & Mobile
  • 💡 The Verdict
  • Understanding the Difference: Formats vs. Implementation Methods
  • Why FBF.SVG Stands Out: A Standard Image File, Not Code
  • 📚 Full Documentation
• Description
  • Key Features
• Output Examples
• Requirements
• Installation
  • Install uv
  • Install svg2fbf
  • Alternative Installation Methods
  • Verify Installation
  • Upgrading
  • Uninstalling
• SVG ViewBox Repair Utility
  • Why ViewBox Repair?
  • Automatic Dependency Installation
  • Usage
  • Animation Sequence Mode
  • Example Output
• Quick Start
  • Basic Usage
  • Using FBF Generation Cards
  • Animation Types
  • Generate an Animated Button
• CLI Parameters
  • Core Options
  • Advanced Options
  • Metadata Options
  • Animation Types
• FBF Generation Cards
  • What Are Generation Cards?
  • Using Generation Cards
  • How svg2fbf Works
  • Advanced Capabilities: Streaming & Interactive Visual Communication
  • SVG 2.0 Mesh Gradient Support
• Input Frame Requirements
  • File Naming
  • SVG Format Requirements
  • Resources and Assets
• Documentation
• Tools & Scripts
• Troubleshooting
• Contributing
• License
• Acknowledgments
• Origin

---

About FBF.SVG Format

FBF.SVG (Frame-by-Frame SVG) is a proposed candidate substandard of the SVG specification, analogous to SVG Tiny and SVG Basic. It defines a constrained, optimized profile for declarative frame-by-frame animations that are valid SVG 1.1/2.0 documents with additional structural and conformance requirements.

<p align="center"> <img src="assets/quote_aqua_transparent.svg" alt="Why we need a vector video format - quote from FBF.SVG creator" width="100%" style="max-width: 1200px; height: auto;"/> </p>

Design Principles

The FBF.SVG format is designed around eight core principles:

1. SVG Compatibility - Every FBF.SVG document is a valid SVG document
2. Declarative Animation - Uses SMIL timing, not imperative scripting
3. Security First - No external resources; strict Content Security Policy compliance
4. Optimization - Smart deduplication and shared definitions minimize file size
5. Validatability - Mechanically validatable against formal schema
6. Self-Documentation - Comprehensive embedded metadata in RDF/XML format
7. Streaming Architecture - Unlimited real-time frame addition without playback interruption
8. Interactive Visual Communication - Bidirectional LLM-to-user visual interaction protocol

Format Specification & Schema

📂 FBF.SVG Format Standard — Complete format specification in dedicated folder

Core documents:

• 📋 Specification - Complete format specification
• 📐 XML Schema (XSD) - Formal schema definition for validation
• 📊 Metadata Spec - RDF/XML metadata requirements
• 📝 Format Guide - Technical implementation details
• 📄 Proposal - Original proposal with use cases

The specification defines two conformance levels:

• FBF.SVG Basic - Core structural and animation requirements
• FBF.SVG Full - Adds comprehensive RDF/XML metadata

The svg2fbf tool generates FBF.SVG Full conformant documents.

---

FBF.SVG Official Logo:

<div align="center"> <a href="https://github.com/Emasoft/svg2fbf"> <picture> <source media="(prefers-color-scheme: light)" srcset=".github/images/fbf_svg_logo_plain_white.svg"> <source media="(prefers-color-scheme: dark)" srcset=".github/images/fbf_svg_logo_plain_black.svg"> <img alt="FBF.SVG Official Logo" src=".github/images/fbf_svg_logo_plain_white.svg" width="100%" style="max-width: 80%; height: auto;"> </picture> </a> </div>

---

Comparison to Other Web Vector Animation Formats

🎯 FBF.SVG is a Perfectly Standard SVG Image File

FBF.SVG files are 100% standard SVG images — nothing more, nothing less:

• ✅ NO JavaScript code inside the file
• ✅ NO CSS code inside the file
• ✅ NO external dependencies
• ✅ Just pure, standard SVG markup (XML)

Compatible with millions of software tools:

• Opens in any web browser (Chrome, Firefox, Safari, Edge)
• Opens in any SVG editor (Inkscape, Illustrator, Affinity Designer, CorelDRAW)
• Opens in any image viewer that supports SVG
• Opens in video editors (Premiere, Final Cut, DaVinci Resolve, Kdenlive)
• Opens in design tools (Figma, Sketch, Canva)
• Works in mobile apps (iOS, Android native SVG support)

The ZERO CODE Advantage: FBF.SVG is the only web vector animation format that contains ZERO CODE:

• ✅ 0 CODE to create — Use visual tools (Inkscape, Krita, OpenToonz, Blender)
• ✅ 0 CODE in the file — Pure SVG image, no JavaScript, no CSS
• ✅ 0 CODE to edit — Edit output in any SVG graphic application
• ✅ 0 CODE to play — Native browser support, open and it animates

This comparison highlights what makes FBF.SVG unique in the web animation ecosystem. Questions are framed to show capabilities that matter for professional animation workflows.

📊 View Full Detailed Comparison Tables — Complete comparison with separate detailed tables for web formats and mobile platforms, plus all formats, tools, pricing, and 78 documented references

🏆 FBF.SVG vs. The Competition: Web & Mobile

One format. Zero code. Works everywhere. This comparison evaluates the most popular alternatives across web and mobile to show why FBF.SVG is superior.

| What Makes a Great Animation Format? | 🎯 FBF.SVG | Lottie (Bodymovin) | OCA (Open Cel) | Rive | Spine | Alembic (.abc) | |---|:---:|:---:|:---:|:---:|:---:|:---:| | Output is a standard SVG image file? | ✅ YES! | ❌ NO, outputs JSON | ❌ NO, outputs JSON+PNG | ❌ NO, outputs .riv binary | ❌ NO, outputs binary+atlas | ❌ NO, outputs .abc scene data (interchange format) | | Compatible with millions of SVG tools? | ✅ YES! (Inkscape, Illustrator, etc.) | ❌ NO, proprietary format | ❌ NO, limited to animation tools | ❌ NO, proprietary format | ❌ NO, proprietary format | ❌ NO, requires 3D/VFX tools | | Playable in any app that supports SVG 1.1? | ✅ YES! | ❌ NO, requires JavaScript library | ❌ NO, must export to video first | ❌ NO, requires runtime library | ❌ NO, requires runtime library | ❌ NO, requires 3D