How do you animate SVG for the web?

Question

Vector graphics are now taking over the web and even mobile applications. Icons, buttons and elements of web pages or mobile apps are now becoming increasingly vector based, dropping bitmaps because of the need to be rendered on all kind of screen resolutions, dpi, ratios, etc. and because the useful ability to "zoom" to better read pages on mobile browsers made the bitmaps assets ugly and unusable anymore. So it's time to start creating animated icons, backgrounds and controls in SVG but how do you animate SVG files?

Answer 1

It depends what you mean exactly. If you want to animate an SVG that's already on a website, there are javascript libraries that are great for this.

mo.js

gsap by greensock

jQuery drawSVG

lazy line painter

I would recommend using one of these. If you want to create an animated SVG that you can add to any website you can use SVGator.com to create the animation without code

Hope this helps!.