Open
the SVG file.
Import the .svg file directly, paste the SVG code as a new composition, or place it inline in an HTML page with other content.
SVG ANIMATION TO VIDEO
Export SVG animations
as video.
Turn animated SVG logos, icons, line drawings and illustrations into MP4, transparent MOV or WebM. Animate them with CSS, GSAP or JavaScript and render every frame in HD or 4K.
How to convert an SVG animation to video
Open
Animate it
any way.
SVG <animate> tags, CSS keyframes, GSAP (including DrawSVG and MorphSVG) or JavaScript. All of them follow the studio clock exactly.
Choose
any size.
Vectors scale cleanly. Use 4K for logo reveals, or a square or vertical size for social posts.
Export
MP4 or alpha.
Render MP4, or transparent MOV or WebM to place a logo sting over footage.
A line-drawing logo with CSS
A stroke that draws itself, rendered frame by frame:
<style>
html, body { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; background: #0b1020; }
svg { width: 50vmin; }
path { fill: none; stroke: #7aa7ff; stroke-width: 4; stroke-dasharray: 600; stroke-dashoffset: 600;
animation: draw 2s ease-in-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<svg viewBox="0 0 200 200"><path d="M20 160 L100 30 L180 160 Z M60 110 H140"/></svg>Tips for SVG video renders
- SMIL works frame by frame. <animate>, <animateTransform>, <animateMotion> and <set> are paused and moved to each frame's exact time, so scrubbing and export match.
- Set a viewBox. A viewBox lets the SVG scale to any export size without blurring.
- Embed images in the SVG. An imported .svg becomes its own composition, so images it links to by relative path should be embedded or placed next to an HTML page instead.
- Use transparency for logo stings. Export ProRes 4444 MOV to place a logo reveal over footage.
Export formats for SVG motion
| Format | Best for | Transparency |
|---|---|---|
| MP4 (H.264) | YouTube, social media, websites, presentations | No |
| MOV (ProRes 4444) | Premiere Pro, DaVinci Resolve, Final Cut, After Effects | Yes |
| WebM (VP9) | Web pages and lightweight overlays | Yes |
| PNG sequence | Compositing and frame-by-frame editing | Yes |
SVG animation to video questions
Can I import an .svg file directly?
Yes. Choose Import HTML or SVG, or drag the .svg file into the studio. It opens as a composition you can preview and export like any HTML page.
Do SMIL animations (animate, animateTransform) work?
Yes. The studio pauses each SVG timeline and sets it to the exact time of every frame, so <animate> motion renders smoothly and matches the preview when you scrub.
Can I export an animated SVG logo with a transparent background?
Yes. Keep the page background transparent and export ProRes 4444 MOV, WebM or a PNG sequence.
Does GSAP DrawSVG or MorphSVG work?
Yes. Load the plugins in the page; GSAP animations follow the studio clock and render frame by frame.
More ways to make video from code
Try it free for 7 days.
Free download from the Microsoft Store. No payment card needed for the trial.