Translate every layer and keyframe into a self-contained animated SVG (SMIL <animate> tags) you can add as a vector element, copy, or download — no video file needed.
Where: canvas → left rail → Add → Export → SVG Render — Add an SVG Render node and wire a composer into its Composition In handle
Key ideas
- Keyframes → SMIL: Each layer's x/y/width/height/opacity/rotation/scale keyframes are emitted as <animate> / <animateTransform> tags with spline easing; start/end timing becomes <set> visibility, video layers use <foreignObject>, and inline SVG sources are embedded.
- Loop & yoyo: Repeat is configurable (indefinite / play-once / a count); the Yoyo option doubles the duration and mirrors keyframes so animations play forward-then-back.
- Three output actions: From the result you can Add SVG (a true vector element on the page), add it as a raster Image, Paste to Replace the selected element, plus Copy SVG markup to clipboard or Download a .svg file.
- SVG Render card: SvgRenderNode uses the generic shared-card path. Render an animated SVG from a connected composition.
- Properties sidebar: renderAudioNodes.tsx
- Opened surfaces: SVG/image lightbox; Add to canvas; Paste to Replace
Steps
- Add an SVG Render node (Add → Export → SVG Render) and connect a composer to Composition In.
- Confirm the 'renderable layers' count (only visible layers are exported).
- Click Generate SVG; the vector preview renders with a size badge.
- Choose Add SVG for a crisp vector element, or Image to rasterize it onto the page.
- Use Copy to grab the markup or Download to save the .svg file.
SVG Render controls and presets
- Add path: Flowgen → Add → Export → SVG Render.
- Card: SvgRenderNode.
- Properties: renderAudioNodes.tsx.
- Controls: Canvas; duration; repeat; yoyo; output.
- Opened surfaces: SVG/image lightbox; Add to canvas; Paste to Replace.
FAQ
Will the animation play after export?
Yes — animation is encoded as native SVG SMIL (<animate>/<animateTransform>) with freeze fill and your chosen repeat count, so it animates standalone in any SVG-capable viewer or browser.
Are video layers supported in the SVG?
Video layers are wrapped in <foreignObject> with an autoplay/loop/muted <video>; SVG sources are inlined, other images become <image> hrefs. Heavily video-laden compositions are better served by Video Render.