Learn more about SVG animations
What are SVG animations?
On the web, scalable vector graphics — or SVGs — are commonly used for icons, logos, and other elements that need to look pixel-perfect at any scale. They are also used to create SVG animations.
In contrast to regular “bitmap” or “raster” images - which are made up of many small pixels - SVGs only contain a set of instructions that the computer will use to re-draw the image when it loads.
Being vector files, the advantage of SVG animations is, firstly, that they are scalable. And secondly - because they are entirely based upon code - they can easily be tweaked and edited further down the road.
Perhaps the most valuable attribute of SVGs, however, is simply the fact that they are very small - and therefore exceedingly quick to load. This makes SVG animations ideally suited to a wide variety of applications in modern web design.
The first SVG animation examples were developed in the late ’90s, and some web browsers already supported use of SVG animations as far back as 2003. But if it’s taken so long for SVG animators to find themselves in the spotlight, it’s because until recently you still needed a separate program or plugin to view SVG on the web.
Thankfully though, in 2011 all major web browsers began to support SVG animations. And following the release of SVG2 in 2018, we started to see much greater investment in the development of powerful and easy to use SVG animation software.
Since then, SVG web animations have grown to challenge the once ubiquitous GIF. In fact, just as the use of GIFs has fallen in the last 10 years, SVG animation has risen in popularity - meaning that the two technologies are now about neck and neck.
Why SVG animation?
SVG animations undoubtedly offer a developer or designer several advantages. However, if today SVGs look set to replace GIFs, it is largely due to the fact that site speed is now one of the most important factors determining Google ranking.
Overload a site with heavy and sluggish GIFs, and you can expect to see it drop in search results. Suddenly a fast, lightweight, and easy to use format like SVG starts to look very appealing.
How do SVG animators work?
To animate SVGs it’s simply a matter of providing an SVG animator with a clear set of instructions. In effect it’s a bit like giving directions to someone drawing with a pen; move your hand 3 inches to the left; now go right at 180 degrees, continue for 5 inches; and so on.
These instructions may describe shapes like squares and circles, but they are usually compressed into“paths” or curved lines that describe arbitrary forms.
SVG paths have a beginning and end—and, consequentially, a length. So in addition to drawing an SVG at any scale, rotation or color, we can also tell the computer to draw an SVG path only up to a certain length. And, by animating this length from zero up to the path’s full length, you can watch the path come together as an SVG animation.
Framer’s Animator component, created by Benjamin den Boer, handles that work for us to create beautiful SVG animations. All we need to do is connect it to an SVG on the canvas and configure the animation settings of the component in the Properties panel.
Animate an SVG image in Framer
To bring SVG images into Framer and use them with the Animator component, drag an SVG image onto the canvas, then double click on the icon to convert the icon into a Custom Icon.
To create SVG images directly inside Framer, open the Insert Menu and select Custom Icon. Once you have your SVG and the Animator component on the canvas, you can connect the Animator to the SVG with the connector.
While there isn’t an option to loop the animation, you can always set the Count property to a very high number and hope that it’s enough!
SVG animation is a great way of adding dynamic, responsive elements to any design project. Framer’s Animator component helps to bring your ideas to life.