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.

How to Animate SVGs with Framer’s All-New Vector Tools

Framer’s new vector editing experience makes it easier than ever to create, manage, and animate SVGs—right on the canvas, no code required. Here’s how to get started:

1. Draw or Import Your SVGs

You now have two ways to bring vector graphics into Framer:

• Draw from scratch using the new Vector menu. Just open the Insert Menu and select Vector to start drawing directly on the canvas.

• Import existing SVGs by dragging them onto the canvas. Framer will automatically turn them into a Vector Set—a smart collection of icons or illustrations grouped in one place.

2. Organize with Vector Sets

Vector Sets help keep your designs tidy and scalable. Right-click any group of vectors and choose Create Vector Set, or build a new one from the Assets panel. You’ll get a dedicated canvas to organize and edit your graphics, with easy browsing and search built in.

Vector Sets support variables, like stroke color and opacity, so you can customize each instance of an icon without duplicating your designs. You can even build duotone or multicolored icons with a single set.

3. Animate with Stroke Effects

Bring your vectors to life using Framer’s new Stroke Animation effect. This gives you access to powerful new properties:

• Length

• Gap

• Offset

You can also choose from three looping modes to create seamless animations. From infinite logo loops to dynamic micro interactions, it all happens with just a few clicks.