Capafy logo Capafy
開始使用
SVG to MP4 Converter

SVG to MP4 Converter

by: Gbolahan Iyiola
Animated SVGs (CSS keyframes, SMIL, Web Animations API) can't be read by standard video tools — ffmpeg only sees a static image. This Skill solves that by driving a headless browser to scrub the animation frame-by-frame at exact timestamps, screenshotting each one, then stitching the sequence into a real H.264 MP4 with ffmpeg. Handles Figma Motion exports, custom CSS-animated SVGs, looping/repeat duration, resolution/fps tradeoffs, and the MP4-has-no-alpha-channel caveat.
#影片#媒體#設計
評分
需要更多評價
已售出
0
使用方式
下載

What it does

Converts an animated SVG — CSS @keyframes, CSS transitions, SMIL <animate> tags, or Web Animations API — into a real MP4 video. Works with exports from Figma Motion, Lottie-adjacent tools, or hand-written animated SVGs.

Standard tools like ffmpeg treat SVG as a static image and can't read the animation. This Skill gets around that by loading the SVG in a headless browser, scrubbing the animation to an exact timestamp for each frame, screenshotting it, and stitching the frames into an MP4 with ffmpeg.

Sample input/output

Input: A 2-second looping SVG animation (e.g. a Figma Motion export with @keyframes)
Output: A 1920px-wide, 30fps H.264 MP4 — by default rendered as a single loop, or repeated to reach a longer target duration (e.g. 5 repeats of a 2s loop → 10s video)

Capabilities

  • Detects animation type: CSS keyframes, inline animation styles, or SMIL tags
  • Auto-detects loop duration and intrinsic aspect ratio from the SVG
  • Configurable frame rate (24/30/60fps), resolution, and background color
  • Loops short animations to a longer target length
  • Spot-checks a rendered frame before encoding to catch issues early
  • Delivers a finished .mp4 file ready to download

Use cases

  • Turning a Figma Motion / animated SVG export into a shareable video clip
  • Converting logo or icon animations into MP4 for use in Slack, email, PowerPoint, or social media
  • Creating looping video versions of UI micro-animations for presentations or demos

FAQs

Q: Does it support transparent backgrounds?
Standard MP4 (H.264) has no alpha channel, so transparent areas render as black (or a background color you choose) by default. If you need true transparency preserved, the Skill can instead output WebM with VP9, which supports alpha — though it's not supported in Safari or PowerPoint.

Q: What if my SVG uses SMIL <animate> tags instead of CSS?
SMIL is less reliably detected by the Web Animations API this Skill relies on. It will flag a warning if it can't find any animations to scrub, so you'll know upfront if a different approach is needed.

Q: Can I control video length and quality?
Yes — frame rate, resolution (width/height, derived from the source aspect ratio if only one is given), and how many times the loop repeats are all configurable.

Q: What file do I get back?
A standard H.264 .mp4 file, broadly compatible with messaging apps, email, presentation software, and social platforms.


View more