This document aims to help domestic users learning Framer who face difficulties due to the lack of Korean resources by translating official blog content into Korean and adding practical information. We hope to be of some help to those using Framer.

What is SVG Animation?

SVG (Scalable Vector Graphics) is a vector-based graphic that does not pixelate at any size. It is suitable for icons, logos, and various visual elements, looking sharp on both small and large screens.

• While bitmap images are made of pixels, SVGs consist of processor-rendered command sets.

• Based on points and shapes, they can be resized freely, and since they're code-based, they're easy to modify and reuse.

• The file size is small, enabling fast loading. Therefore, they are widely used in modern web design.

The History of SVG Animation

• Late 1990s: First instances of SVG animation appear

• 2003: Support begins in some browsers

• 2011: Official support from major browsers

• 2018: SVG2 release → Expansion of user-friendly animation tools

In the past, separate programs or plugins were needed, but after SVG2, it started gaining serious attention.

SVG Animation with JavaScript and HTML

As website speed has become a crucial factor in Google's search rankings, the use of GIFs has decreased over the past decade, while JavaScript and HTML5-based SVG animations have gained popularity rapidly.

Heavy GIFs can slow down a site, lowering its rank. In contrast, SVGs are lightweight, fast, and easy to edit, making them a viable alternative to GIFs.

Principles of SVG Animation

SVG animation is similar to drawing with a pen, executing instructions to move along a path. Imagine directing someone who's drawing by saying, "Move your hand left about 7.5cm, then right 180 degrees, then move 13.5cm." That's how it works.

• An SVG path has a start point, an end point, and a length, with the process from 0 → full length animatable along the path.

• This can create visual effects where lines appear one by one or shapes fill in.

Framer's Animator component (created by Benjamin den Boer) automates this process, allowing you to easily create animations by simply connecting it to the SVG on the canvas and setting properties.

Creating SVG Animations with Framer's New Vector Tool

Framer's new vector editing feature makes it easier than ever to draw, import, manage, and animate SVGs. You can work directly on the canvas without needing to write code.

Step 1: Drawing or Importing SVGs

There are two ways to add SVGs to Framer.

1. Drawing directly: Select Insert Menu → Vector to create vector shapes directly on the canvas.

2. Importing: Drag and drop an existing SVG file, and it will automatically convert into a Vector Set (grouping icons or illustrations as a set).

Step 2: Organize with Vector Set

A Vector Set helps manage designs neatly and scalably.

1. Right-click a vector group → select Create Vector Set or create a new set from the Assets panel.

2. Organize, edit, and search through a dedicated Vector Set canvas.

Additional features include:

• Variable support: Change properties like stroke color and opacity individually.

• Enhanced icon reusability: Customize each instance without needing to duplicate the icon.

• Creating multitone icons: Produce duotone and multitone color icons within a single set.

Step 3: Applying Animation with Stroke Effects

Use the new Stroke Animation effect to bring vector graphics to life.

1. Select a vector, then go to the Properties panel.

2. Add by selecting Stroke Animation in the Effects section.

Stroke Animation Properties

• Length: Adjust the length the line draws (0 ~ 100%)

• Gap: Adjust the space between lines

• Offset: Shift the starting point to change direction/location of the animation

Loop Modes

• None: Plays once

• Loop: Repeats continuously

• Ping-Pong: Plays back and forth

Conclusion

SVG animations are small, fast, yet visually compelling. With Framer's vector tools and Animator component, creating SVG animations without coding is easier than ever.

What icons or logos will you animate next? If the above text isn't quite clear enough, watch the tutorial video below and follow along. Watching the process will help you quickly complete your own stunning SVG animations.

This article is a translated and adapted version of Framer's official blog post, ‘SVG animation mastery for designers.’