Open the editor

Home/Help

HELP & TUTORIALS

Learn it by
doing it.

Every tool and feature, step by step. Topics marked Guided tour also run inside the editor: it opens a practice scene, points at each control and waits while you do it. The same pages are in the editor too, under ☰ › Help.

Getting startedInterfaceCreateStyleAnimateRiggingTimingImport and exportDesign agent
START HERE

Guided tour3 min · 5 steps

Keyframes and tracks

Every property in the inspector can be animated. Start a track on it with ◆, then change the value at another time: a keyframe lands under the playhead, and the editor fills in everything between.

Start in the editor

Guided tour3 min · 5 steps

Easing

Easing is how a property gets from one keyframe to the next: at an even speed, speeding up, slowing down, overshooting or bouncing. Each keyframe has its own, for the way to the next key.

Start in the editor
EVERY TOOL AND FEATURE

Getting started

Start here

Your first animationGuided tour4 minThe editor at a glanceGuided tour3 minProjects, saving and files

Interface

Find your way around

Moving around the canvasGuided tour2 minCopy, paste and the right-click menuGuided tour3 minCanvas and animation settingsGuided tour3 minSnapping, guides and rulersGuided tour3 minKeyboard shortcutsThumbnails for Windows and Linux

Create

Make the artwork

Select and transformGuided tour3 minPen and pencilGuided tour4 minShapesGuided tour3 minText and fontsGuided tour3 minImages and assetsGuided tour2 minBooleans and alignGuided tour2 minLayers and groupsGuided tour3 minSymbolsGuided tour3 minSelect sameGuided tour2 minHyperlinksGuided tour2 min

Style

Colour, strokes, effects

Fill and gradientsGuided tour3 minStrokes and dashesGuided tour4 minFiltersGuided tour3 minMasks and clippingGuided tour3 minAppearance and blendingGuided tour3 min

Animate

Put it in motion

Keyframes and tracksGuided tour3 minFreezing a trackGuided tour2 minShape morphingGuided tour3 minMotion pathsGuided tour3 minTrim pathGuided tour3 minAnimation presetsGuided tour3 minEditing many layersGuided tour3 min

Rigging

Bones, rigs and pins

Build a rig: bones and attaching artworkGuided tour5 minEdit bone toolGuided tour3 minScale bone toolGuided tour3 minA rig's own draw orderGuided tour2 minPose and animate a rig: FK and IKGuided tour4 minLimits and IK stopsGuided tour3 minPins and mesh warpGuided tour3 minEdit pins toolGuided tour2 minPins on images, text and groupsGuided tour3 minPins that follow bonesGuided tour3 min

Timing

When, and how it gets there

The timelineGuided tour3 minEasingGuided tour3 minGraph editorGuided tour3 minOnion skinGuided tour2 minStaggering instancesGuided tour3 min

Import and export

Bring it in, ship it out

Opening and importing SVGGuided tour3 minExport an animated SVGGuided tour3 minWhen it starts: load, hover, click, scrollGuided tour3 minLinked to scrollGuided tour3 minImages and photos in exportsGuided tour2 minThe player APIVideoGuided tour3 minGIF and animated WebPGuided tour3 minStill imagesGuided tour2 min

Design agent

Describe it, watch it animate

Connect your own API keyUse your AI assistantPictures and vector

In the editor too.

☰ › Help › Help & tutorials (Shift F1) opens these pages in a panel beside the inspector. They come with the editor, so they work offline, and a guided tour opens beside the panel without touching your project.

ANSWERS

Common questions.

Short answers to what people ask most, each with the topic that goes further.

QUESTIONS

How do I make an animated SVG?

Draw or import your artwork, click beside a property to start its track, move the playhead and change the value: the editor fills in the motion between the keyframes. Then Export › Animated SVG gives you one file. Your first animation →

How do I put an animated SVG on my website?

Paste its code into your page, or load the file in an object tag. Embed in your site, in the Export window, has ready code for HTML, React, Next.js, Vue, Angular and Svelte. A CSS-only export also plays in an img tag. Export an animated SVG →

Animated SVG, GIF or video: which should I use?

An animated SVG for websites: a small file, sharp at any size, and it can start on hover, click or scroll. A GIF or animated WebP where SVG doesn't play, like email and chat apps. A video for social sites and slides. One project exports all of them. GIF and animated WebP →

Can an SVG animation start on hover, click or scroll?

Yes. In the Export window, Playback › Starts plays it on load, on mouse over, on click, when it scrolls into view, linked to the page's scroll, or when your own script says so (the JavaScript export). When it starts: load, hover, click, scroll →

Can I animate an SVG from Figma, Illustrator or Inkscape?

Yes. Drop the file on the canvas, or paste Figma's Copy as SVG. Its layers, shapes, gradients and text come in ready to edit, and CSS animations come in as keyframes. Opening and importing SVG →

Does an animated SVG need JavaScript?

Not always. A CSS-only export needs no script and plays even as an image, but it animates less (a gradient only changes its colours, for one). The JavaScript export, with a small player inside the file, animates everything. Export an animated SVG →

Is SVGcinema free? Do I need an account?

It's free, with no account and no sign-in. It runs in your browser and can be installed as an app; your projects stay in your browser and in the .SVGcinema files you save. Projects, saving and files →