svg animation

Create a new SVG animation now!

New project

Animate an element

Once you’ve started a new project and you have at least one element visible on the canvas, you can start working on your animation.

Before you would add an animator, it’s a good idea to center the origin point. By default, the origin point is at 0 X 0 Y position on the canvas for each element you add, but it’s a lot easier to work on the animation if the origin point is centered. Simply select the element and use the shift + cmd/ctrl + O shortcut. You can always change it later.

Now, let’s get a bit familiar with the three most important tools:

svg animation

Select - use this tool to select elements on the canvas. By using this tool you can reposition elements or change their sizes.

Transform - meant to change Transform properties like Position, Anchor, Scale, Skew or Rotate.

Node - use this tool to select and drag the nodes of a path element.

To make things easy in this case, we will use a simple Rotate animator, but you can find plenty of information about other animators on our Help center.

You can add an animator by selecting the element and opening the Animators list. You will find this here:

svg animation

In this case, simply click on the Rotate animator. Alternatively, you can also use the cmd/ctrl + R shortcut.

The element will be automatically added to the timeline with the first keyframe right where the playhead is positioned on the timeline:

svg animation

Now, move the playhead to the next second and select the Transform tool. Hold and rotate any corner of the bounding box:

svg animation

You can also use the Rotate inputs from the Transform panel:

svg animation

As you can see, a new keyframe has been added to the timeline:

svg animation

Hit play to see the animation and repeat these steps to continue your project.


More articles:

Change the element’s origin point

Use ease effects

Animators and keyframes


Related features:

Create your own animated SVG icons

SVG logo animation made easy with SVGator


Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.