SVG Studio is a browser-based animation editor that turns your static vectors into buttery-smooth keyframe animations - and exports clean, self-contained SVGs. No After Effects subscription required.
We didn't add a blockchain. We didn't add AI. We added a timeline, some keyframes, and a really satisfying playhead. You're welcome.
A proper timeline with per-property tracks for opacity, position, rotation, and scale. Drag keyframes around like the professional you almost are.
Animate Position, Rotation, Scale, and Opacity independently per layer. Mix and match. Go wild. Your designer will be impressed or horrified - usually both.
Drop an SVG onto the canvas and watch it explode into individual animatable layers. Drag-and-drop or use the file picker - we support both your energy levels.
One click. Out comes a self-contained animated SVG with embedded CSS keyframes. Paste it anywhere. It just works. No runtime, no JS, no tears.
Linear, Ease In, Ease Out, Ease In/Out - per property track. Because linear animations are technically correct and also spiritually empty.
Set any track to loop N times or infinitely (shown as ∞, because math is cool). Mix looping and non-looping tracks on the same layer. Total chaos. Totally intentional.
Click, drag, rotate, and scale elements directly on the canvas. Corner handles for scale, a floating handle for rotation. It feels exactly as good as you hope it does.
Turn on Record mode and every canvas manipulation automatically drops a keyframe at the playhead. No manual button pressing. Just move things and it remembers.
SVG groups become parent/child layers you can collapse, hide, reorder with drag-and-drop. A full layer stack, minus the Photoshop price tag.
100-step undo history. Make bold choices. Reverse them immediately. Repeat until you've achieved something your past self would find baffling.
Animations from 0.5s to 60,000s. Whether you're making a snappy micro-interaction or an ambient loop that outlasts your attention span.
Zoom the canvas from 10% to 500%. Zoom the timeline to see individual frames or a bird's eye view of your whole animation. Control is beautiful.
Select multiple layers and hit ⌘G to group them into a
native SVG <g> element. Ungroup with ⌘⇧G to
flatten them back out. Hierarchy, on your terms.
Toggle 3D mode on any layer to unlock Rotate X, Rotate Y,
and Z Depth. Group layers into a
preserve-3d
context and animate real 3D flips, rotations, and depth — exported
as pure CSS. No Three.js, no runtime.
Drag the anchor point directly on the canvas to set the exact center of rotation and scale. Not locked to the geometric center — put it wherever the motion demands it.
Smart snap guides appear as you drag, aligning to layer edges, centers, and canvas bounds. Toggle snapping on or off at any time. Pixel-perfect positioning without the squinting.
Click the rename icon on any layer to give it a meaningful name. The name carries through to the exported SVG's element IDs — clean, readable output by default.
Move selected layers with arrow keys at 1 px precision, or hold Shift for 10 px jumps. Tiny adjustments without dragging, reaching for the mouse, or losing your mind.
ScaleX and ScaleY are separate animatable tracks. Stretch horizontally, squeeze vertically, or animate them out of sync — non-uniform scaling with full keyframe control.
Shift-click any number of layers to build a multi-selection. Move, transform, group, or delete them all at once. Works with record mode too — keyframes land on every selected layer simultaneously.
Select any layers and hit ⌘G — they collapse into a real
SVG <g>
element you can animate as one unit. Hit ⌘⇧G to dissolve it
and send the children back to the top level.
Click + ⇧click to select any layers, then ⌘G wraps them in a
native SVG
<g>
element. The hierarchy updates instantly.
Move, rotate, or scale the entire group on a single timeline track. The children follow along without a complaint.
Dissolves the group and hoists every child back to the top level. No data lost. No regrets.
Each keyframe is a promise to your animation. We take those promises seriously. You probably shouldn't break them.
Drop keyframes with the K key or the keyframe button. Drag them left or right on the timeline to adjust timing.
⌘C / ⌘X / ⌘V works exactly as expected. Paste a keyframe at a completely different time. Surprise your layer.
⌘← and ⌘→ snap the playhead to the previous/next keyframe. Navigate your animation like a professional scrubber.
Context menu on any keyframe. One click to remove it. No confirmation dialog, because we trust you. (We maybe shouldn't.)
SVG Studio is fully keyboard-driven. Once you learn these, you'll feel like a film editor from a 90s hacker movie. The good kind.
SVG Studio exports a single self-contained SVG file with
embedded CSS
@keyframes
animations. Drop it in a webpage, an email, a Notion doc, a Figma
comment - it'll animate everywhere CSS runs. Which is everywhere.
It runs in your browser.
There's nothing to install, no account
to create, and absolutely nothing that will send you a newsletter.