How to create animation with svg format file?

How to create svg animation like this?

I search on google but I can’t any way to create animation with svg format file like this. Adobe After Effects, Adobe Animate and Adobe Edge Animate can’t export file by svg format for animation!!


It seems that the svg you link to is animated using CSS Animations. Read about it on W3Schools and CSS-Tricks.

Inspecting the moving elements with browser Developer Tools by pressing F12 is revealing:

These animations could be hand coded by editing the SVG file in a text editor. But the source code contains tons of animation keyframes.

This seems like too much work to do manually. It must have been generated by some kind of SVG animating software.

Searching Google for “svg animation” gives a lot of results. For example the first on my list: svgator, which seems to be a paid application which enables you to make SVG animations in a graphical interface without coding. There might be free alternatives too, although I couldn’t find any which didn’t require coding.

To my knowledge (please correct me if I’m wrong) none of Adobe’s applications are capable of exporting SVG animations. The closest thing i found is this plugin for Adobe Animate, but sadly it seems to be discontinued.

Source : Link , Question Author : mghhgm , Answer Author : Wolff

Leave a Comment