Expand description
§svg-to-video
A simple CLI tool for converting animated SVGs to frame-perfect, mathematically (or visually) lossless video files.
By leveraging a deterministic headless browser environment and piping uncompressed PNG frames directly into ffmpeg, this tool ensures zero dropped frames and accurate timing, completely bypassing the inconsistencies of real-time screen recording.
§Prerequisites
This tool acts as an orchestrator and requires the following external dependencies to be installed and available on your system:
- Google Chrome or Chromium: Required for the
headless_chromerendering engine. - FFmpeg: Must be installed and accessible via your system’s
$PATH.
§Installation
Ensure you have the Rust toolchain installed. You can install the CLI directly via Cargo:
cargo install svg-to-video§Usage
The CLI requires an input SVG file and an output video path. By default, it renders a 5-second video at 60 FPS in 4K resolution (3840x2160) using Apple ProRes 422 HQ.
§Basic Example
svg-to-video input.svg output.mov§Advanced Configuration
You can fully customize the duration, framerate, resolution, and output codec:
svg-to-video animation.svg render.mkv \
--duration 10.5 \
--fps 30 \
--width 1920 \
--height 1080 \
--codec ffv1§CLI Arguments
| Argument | Type | Default | Description |
|---|---|---|---|
input | Path | Required | Path to the input SVG file. |
output | Path | Required | Path to the output video file. |
-d, --duration | f64 | 5.0 | Duration of the animation to capture, in seconds. |
--fps | u64 | 60 | Target framerate for the output video. |
--width | u32 | 3840 | Output video width in pixels. |
--height | u32 | 2160 | Output video height in pixels. |
-c, --codec | Enum | prores | The video codec to use for encoding. |
§Supported Codecs
All supported codecs are strictly configured via FFmpeg flags for lossless (or virtually lossless archival) quality.
prores(Default): Apple ProRes 422 HQ. Optimized for Non-Linear Editors (NLEs) like Premiere or DaVinci Resolve. Recommended container:.movffv1: Mathematically lossless. The ultimate archival format. Recommended container:.mkvh264: H.264 Lossless (-crf 0). Large file size, mathematically perfect, broad compatibility. Recommended container:.mp4or.mkvh265: HEVC / H.265 Lossless. Better lossless compression ratios than H.264. Recommended container:.mp4or.mkvvp9: Google’s open-source lossless format. Recommended container:.webmor.mkvav1: Next-generation open-source codec, mathematically perfect (-crf 0). Recommended container:.webmor.mkv
§How It Works
- Wrapper Generation: The SVG is injected into a temporary, perfectly sized HTML wrapper with a forced sRGB color profile.
- Headless Execution: A headless Chrome instance loads the HTML.
- Deterministic Stepping: The application pauses all native CSS/JS animations (
document.getAnimations()) and internal SVG SMIL animations. - Frame Extraction: It calculates the exact timestamp for each frame based on the requested FPS, advances the virtual playback head, and captures an uncompressed PNG screenshot.
- Stream Encoding: The raw PNG binaries are piped directly into
ffmpegvia standard input (stdin) to avoid massive disk I/O, compiling the final container on the fly.
§License
This project is licensed under the MIT License.
Enums§
- Codec
- Supported output codecs for the video encoding pipeline. All codecs are configured for mathematically lossless or visually lossless output.
Functions§
- capture_
frames - Executes the core capture loop: pauses animations, advances timing precisely via JS,
triggers a screenshot, and pipes the resulting PNG binary directly into
FFmpeg. - launch_
browser - Initializes an instance of Headless Chrome, enforces a consistent color profile, and navigates a new tab to the provided local HTML wrapper file.
- prepare_
html_ wrapper - Reads the SVG content and wraps it in a perfectly sized HTML document.
- spawn_
ffmpeg_ pipeline - Spawns the underlying
FFmpegprocess configured to accept continuous PNG streams viastdinand writes the output directly to the specified destination. - spawn_
progress_ monitor - Spawns a background thread to render a CLI progress bar dynamically.