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.

Design 無料サインアップ不要

SVG Animator

Generate CSS or SMIL animations for SVG elements

ツールを読み込み中…

このツールについて

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.

このツールについて

使い方

よくある質問