SVG Animation Editor

Animate SVG paths, shapes, and groups with a keyframe timeline and SMIL/CSS output.

Tested tool guide Tested browser tools Checked August 16, 2026

What SVG Animation Editor does, with a checked example

An SVG file is static by default; this editor adds time to it. You pick elements on the canvas, set keyframes along a timeline - position, rotation, scale, opacity, fill, stroke-dashoffset - and the tool interpolates between the values, then hands back the finished animation as SMIL elements or CSS keyframes, ready to paste into your markup. The animation is plain declarative markup, so it runs in any browser without a line of JavaScript. The surprise most people hit first: morphing one path into another only interpolates when both keyframes use the same number of path commands, so most shape changes snap instead of flowing.

Worked example

A concrete input and expected output from the current implementation.

Input

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10" fill="#007AFF"/>
</svg>

Expected output

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10" fill="#007AFF">
    <animate attributeName="r" from="10" to="20" dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

Two keyframes were set on the circle: r = 10 at the start and r = 20 one second in, looping. The SMIL export carries those numbers through verbatim: from is the resting radius, to is the end keyframe, dur is the gap between them, and repeatCount makes the animation loop.

How the result is produced

Keyframe timeline

Each element on the canvas is an animatable target. You place keyframes at chosen times, set the property value to hold at each one, and choose an easing curve for the segment between them. Properties animate on independent tracks - position, rotation, scale, opacity, fill, and stroke-dashoffset can each hold their own keyframes - and the timeline shows the total duration and whether the animation loops.

SMIL and CSS output

The SMIL export writes animate, animateTransform, and animateMotion elements inside the SVG itself, encoding the keyframe values and timing as SMIL attributes. The CSS export produces @keyframes rules plus the class or inline style that applies them. The two formats behave differently in the wild: SMIL runs even when the SVG is displayed as an image, while CSS animations need the SVG inline in the page.

Good uses

Reveal a hand-drawn line or logo: keyframe stroke-dashoffset so the path appears to draw itself on page load.
Add a looping pulse or bounce to a status dot, notification icon, or loading spinner inside an existing SVG.
Generate reusable CSS keyframes for icons in a component library, then paste the SVG inline into the components that use them.

Limits and checks

Shape morphing needs matching geometry: the start and end paths must use the same number of commands and points, or the result snaps between states instead of interpolating. Two paths that merely look similar are not enough - their command lists have to align.
CSS output goes inert in image contexts. When the SVG is loaded through an img tag or a CSS background-image, page styles never reach the SVG's internal elements, so CSS animations do not run; the SMIL export is the one that keeps animating there.
The end state does not persist by default. When an animation finishes, the property returns to its pre-animation value unless the output carries fill="freeze" in SMIL or animation-fill-mode: forwards in CSS - so a fade-in needs an explicit freeze, or the element reverts after playing.

Common questions

My animation plays once, then the shape jumps back to its original state. What did I miss?

The frozen end state is opt-in. SMIL defaults to fill="remove" and CSS to animation-fill-mode: none, and both restore the resting value when the animation ends. Set fill="freeze" on the SMIL animate element, or use forwards (or both) as the fill-mode in the CSS output, and the final keyframe value is held.

Does the CSS output work if I use the SVG in an img tag?

No. CSS animations run only on SVG that is inline in the page. Loaded as an img source or a background image, the SVG renders a static frame and its CSS animations do not play. Use the SMIL export for those cases, or inline the SVG where you want CSS-driven motion.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.