SVG stands for Scalable Vector Graphics. Which means you can scale the graphic and it will never ever pixelate. This post I am going to be diving into animating these SVGs!
Animating SVGs is SUPER EXCITING! There are so many attributes you can animate and you can even style the animation with CSS! Its like animating with a shape layer in After Effects. Its like having a GIF that you can scale, style and tweak! Its basically a GIF on steroids.
There are many applications that export SVG (like InkScape, Fireworks< and Webcode), but the most popular are Illustrator & Sketch. When exporting from these applications I noticed some of differences. Overall, Illustrator exports messy SVG code and Sketch exported clean code with some extra perks. So overall when exporting SVG file — I recommend Sketch.
If you want to know more about SVG Exporting, Alex Walker did a post about this on Sitepoint.
There are so many properties you can use when animating SVGs its AMAZING! You can look at the SVG Styling Properties Documentation to see all the attributes. Some of these styling you might be familiar with from CSS. Below I have pulled out the styling properties that are unique to SVGs.
SVG Animation Syntax
What is SMIL
Now for the nerdy stuff: what is SMIL and how does it relate to SVG? SMIL Stands for Synchronized Multimedia Integration Language, and it is the animation language to which SVG is a host. SVG’s animations have the constraints and features that are permitted by the SMIL Animation Spec but thats not all! In addition to SMIL constraints SVG’s have additional capabilities defined by W3 SVG Animation Spec, such as animateTransform, path, & keyPoints.
See the rest of this post on Medium