One SVG file that moves by itself.
Make an animated SVG in your browser, nothing uploaded: set keys on a timeline and save one SVG file that plays with no script, written with CSS and SMIL.
By Suraj Kumar5 min read
An animated SVG is one file that plays in a browser with no script and stays sharp at any size. Writing one by hand means writing CSS and SMIL. KeepSimp's animated SVG maker writes it for you from keys you set on a timeline, in your browser.
Start from a logo that moves.
The animated SVG maker opens on a moving logo: a badge that grows in and words that rise under it. Change its words, colours and shapes, or bring in your own SVG and give it keys.
How the file moves.
Movement, turns, sizes, colour and opacity are written as CSS animations inside the SVG. Shapes that change their outline are written with SMIL, SVG's own animation elements. Both play in current browsers without a script.
Words are written as their letters' outlines, so they look the same on a computer without the font.
Where it plays.
Browsers play an animated SVG on a web page or opened on its own, and your browser opens the file to check it before it is offered.
For a chat or a social post, save a GIF or an MP4 from the same project. For an app's code, save a Lottie.
Further reading
Topics: animated svg · animated svg maker · svg animation · css svg animation · smil animation · make svg animation
A little less theory. A little more doing.
Try it on your own terms, with a free browser tool.
Try the tool