SVG Animation

Learn more about SVG animations

What are SVG animations?

SVGs (scalable vector graphics) are visual elements that look pixel-perfect at any scale. Perfect for icons, logos, and other visual elements that flex in size, they look crisp and clean on small and large screens alike. They are also used to create SVG animations.

While regular bitmap or raster images are made up of many small pixels, SVGs only contain a set of instructions that a processor uses to re-draw and scale the image when it loads.

Because they’re vector files based on points and shapes, SVG animations are scalable. Better yet, because they’re code-based rather than pixel-based, they’re easier to modify and adapt later.

The best part of SVGs, though? They’re small and quick to load. This makes SVG animations perfect for a wide range of uses in modern web design.

A brief history on animating SVGs

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. Until recently, though, you needed a separate program or plugin to view SVG on the web, which is likely why it’s takenso long for SVG animators to find themselves in the spotlight.

All major web browsers began to support SVG animations in 2011. 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.

SVG Animations with JavaScript and HTML

Since then, SVG web animations have grown to challenge the once-ubiquitous GIF. Just as the use of GIFs has fallen in the last 10 years, SVG animations in JavaScript and HTML5 have risen in popularity.

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?

Animating SVGs is simply a matter of providing an SVG animator with a clear set of instructions. Imagine 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 distinct beginning, end, and of course length.So in addition to drawing an SVG at any scale, rotation or color, we can also indicate that we want to draw an SVG path only up to a certain length. By animating this length from zero 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 all the behind-the-scenes work to help us create beautiful SVG animations. Simply connect it to an SVG on the canvas and configure the animation settings of the component in the Properties panel to bring it to life.

Get Started with our SVG Animator Tool

Whether you want to animate SVGs with CSS, JavaScript, or HTML, here’s a quick SVG animation tutorial for Framer’s SVG Animation tool.

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 high number to see it replay seemingly endlessly.

Try adding dynamic visuals to your next design project with SVG animation. Framer’s Animator component helps to bring your ideas to life.