What is the difference between SMIL and CSS animation?

SMIL ( tags) is defined inside the SVG itself and works even in tags. CSS animations require the SVG to be inline in the HTML but offer better browser DevTools support and easier JavaScript control.

How does the 'Draw Path' animation work?

It uses the stroke-dasharray and stroke-dashoffset trick: the path stroke is initially hidden by a large dash offset, then animated to zero so the stroke appears to draw itself.

Can I animate multiple elements?

Currently the tool adds the selected animation to all , , and elements found in the SVG. For per-element control, edit the generated code directly.

Will the animation work in all browsers?

CSS animations have near-universal support. SMIL has good support in modern browsers but is not supported in Internet Explorer.

SVG Animator

关于此工具

Paste SVG markup or upload an .svg file, then choose an animation type — draw path, fade in, bounce, rotate, or pulse. Configure duration, delay, and repeat count, and the tool injects the appropriate <animate> SMIL tags or CSS keyframes into your SVG. A live preview renders in the browser so you can see the animation immediately. Copy the resulting code with one click and drop it straight into your project. Ideal for adding life to icons, illustrations, and loading indicators without a heavy animation library.

使用方法

1 Paste SVG code into the editor or click 'Upload SVG' to load a file.
2 Choose an animation type from the dropdown: Draw Path, Fade In, Bounce, Rotate, or Pulse.
3 Set duration (seconds), delay (seconds), and repeat count (0 = infinite).
4 Click 'Generate Animation'. The live preview updates and the annotated SVG code appears below.
5 Click 'Copy Code' to copy the animated SVG to your clipboard.

Two ways to animate an SVG, and when to use each

An SVG is just XML, so animating it means adding instructions that change properties over time. There are two mainstream techniques, and this tool can emit both. CSS animations attach @keyframes and an animation rule to each shape through a <style> block inside the SVG. SMIL (Synchronized Multimedia Integration Language) embeds <animate> and <animateTransform> elements directly inside each shape. CSS is the safer default for the web — it is fully supported everywhere and easy to override with stylesheets. SMIL is self-contained, so the animation survives even when the SVG is used as an <img> source or a CSS background, where external CSS cannot reach it. Choose CSS for inline SVG in a page; choose SMIL when the SVG must animate on its own.

The five animation types

Type	What it does	How it works under the hood
Draw Path	Strokes appear as if hand-drawn	Sets `stroke-dasharray`/`stroke-dashoffset` to the path length, then animates the offset to 0
Fade In	Shapes appear from transparent	Animates `opacity` from 0 to 1
Bounce	A gentle vertical hop	CSS translates on the Y axis; SMIL approximates with opacity steps
Rotate	Spins a full turn	CSS `rotate(360deg)`; SMIL `animateTransform` around the shape's centre
Pulse	Rhythmic grow/shrink	CSS `scale(1.15)` at the midpoint; SMIL pulses opacity

Note the honest detail: SMIL handles stroke-dashoffset, opacity, and rotation natively, but it has no clean equivalent for CSS transforms on individual shapes, so the tool approximates Bounce and Pulse with opacity changes in SMIL mode. If you need a true scaling pulse or vertical bounce, pick CSS output.

How "Draw Path" works — a concrete example

The draw effect is the cleverest of the set. Load the built-in Path sample (a curved line) and choose Draw Path. The tool measures the real geometric length of the stroke with the browser's getTotalLength() API — say it returns 312. It then sets stroke-dasharray: 312 and stroke-dashoffset: 312, which pushes the entire dash off the end of the line so nothing is visible. The animation tweens stroke-dashoffset from 312 down to 0, sliding the visible dash back into place and producing a clean "being drawn" effect. Because the dash length equals the true path length, the line draws exactly once with no gap or overlap.

Duration, delay, and repeat

Four settings shape the timing. Duration is how long one cycle takes (e.g. 1.5s). Delay postpones the start. Repeat sets how many cycles run, where 0 means infinite — this maps to infinite in CSS and indefinite in SMIL. The tool finds every animatable element (path, circle, rect, ellipse, polygon, polyline, line) and applies the chosen animation to each. The result renders in a live preview, and a "Replay animation" button re-triggers it so you can review the effect without regenerating.

Practical tips

Draw needs strokes, not fills. The draw effect animates the outline. Give your shapes a stroke and fill="none" (as the built-in samples do) or you will see the fill appear instantly with no draw motion.
Set a transform origin for rotate and pulse. The CSS output adds transform-box: fill-box; transform-origin: center; so each shape spins or scales around its own centre rather than the SVG's top-left corner. Keep those declarations if you hand-edit the output.
Use SMIL for icons used as images. If you reference the SVG via <img src> or background-image, external CSS cannot animate it — SMIL keeps the motion embedded.
Mind reduced-motion users. Infinite pulse and bounce can be distracting. For production, wrap CSS animations in a prefers-reduced-motion media query.

Common mistakes

Pasting invalid SVG. The tool parses your input with a real XML parser and reports a parse error if tags are unbalanced. Fix the markup before generating.
No animatable elements. If your SVG contains only groups, text, or images with none of the supported shape elements, there is nothing to target and you will get an error.
Expecting JS-driven complexity. This produces declarative CSS/SMIL animations. For physics, scroll-linked motion, or interaction, you still need a JavaScript animation library.

Everything runs locally in your browser using the built-in DOM parser and serializer — your SVG is never uploaded.