How to Animate SVG Files

Quick answer

Open the SVG in SVGSketch, open the Animations tab at the bottom of the editor, select a shape and click "+ Add" to create a track for the property you want to animate, set keyframe values on the timeline, scrub to preview, then export an animated SVG (SMIL), GIF, or video. Building the animation is free; writing an animated file out is a Pro feature.

Steps at a glance

Open the timeline

Click the Animations tab at the bottom of the editor.

Add a track

Select a shape, click + Add, and pick the property to animate.

Keyframe the property

Move the playhead and press K, or double-click a track lane; edit values and easing in the Properties sidebar.

Add a motion path

Add a Move Along Path track, then reshape the on-canvas path or link an existing one with Pick shape.

Morph shapes

Add a Path Morph track, edit the nodes, and press Capture Current Shape per keyframe.

Preview and export

Scrub to preview, then export SVG with SMIL animations, GIF, or video (Pro).

What the timeline writes into the file

A track becomes SMIL This card is not a picture of an animation - it is the exported markup, running. The ease-in-out on the keyframes is what writes calcMode="spline" and its control points.

A motion path is just a path The dot rides an <animateMotion> whose path is the curve drawn beneath it - the same shape, not a copy. Select the track and you get the anchors, Bezier handles and Path Editor panel you would get on any other path; the handles below are the editor’s own.

Easing is written into the file Each curve is plotted from the attributes the exporter wrote for that easing. Bezier easings become keySplines; one that overshoots cannot, so it is sampled into keyTimes; steps becomes calcMode="discrete".

Step 1: Open the SVG and open the timeline

Open or paste the SVG into SVGSketch. At the bottom of the editor, click the Animations tab - this is the timeline where every animated property lives. Each shape can have multiple tracks, and each track can hold any number of keyframes.

Step 2: Pick a shape and add an animation track

Select a shape on canvas. In the Tracks sidebar, click "+ Add" next to the shape name and choose what to animate: position (X and Y), rotation, opacity, fill color, stroke color, stroke width, dash offset, Path Morph for shape morphing, or Move Along Path for motion paths. A group offers its own shorter list instead - Opacity, Translate X, Translate Y, Rotation, Scale, Display and Visibility - because those are the transforms a group owns rather than its children.

A track is essentially the SVG element you would author by hand - <animate>, <animateTransform>, or <animateMotion> - but you set the values visually and the SMIL markup is generated for you. Every new track starts with two keyframes (at 0s and 2s) holding the shape's current value.

Step 3: Set keyframes and tune timing

Move the playhead and press K (Add Keyframe at Playhead) to capture the shape's current value, or double-click a track lane to insert a keyframe at that time. Select any keyframe to edit its value and easing in the Properties sidebar - easing ranges from Linear and Ease In Out to a full custom cubic-bezier editor, CSS linear() functions, and stepped easing.

Each track has Cycle controls for Duration, Repeats (or Infinite for continuous loops), and Behavior (Restart, Reverse, Alternate), plus a Begin Trigger that can be a time delay, an event, or "Never" - which exports as begin="indefinite" for animations you start from script. For hold-style animation with no interpolation, set the track's Interpolation Mode to Discrete.

Step 4: Animate along a path with motion paths

Select a shape and add a "Move Along Path" track. An editable motion path appears on canvas - reshape it with the Edit tool, or use "Pick shape" in the Properties sidebar to link an existing path in the document as the route. Keyframes on the track set progress along the path from 0 to 1, so easing controls the speed profile.

That motion path is a path in the full sense. It gets the same anchor nodes and Bezier handles as any shape you drew yourself, and the Path Editor panel switches to it while you are editing - so the command table, per-command type conversion, arc flags and row insert and delete all work on the trajectory. There is no separate, thinner set of controls to learn.

Step 5: Morph between shapes

Select a path and add a "Path Morph" track. Edit the path's nodes with the Edit tool, then press "Capture Current Shape" on a keyframe to store that geometry. SVGSketch interpolates between the captured d strings using SVG-spec path morph rules - if the command structures differ between keyframes, the editor warns you that the animation will snap discretely instead of morphing smoothly.

Step 6: Preview, then export

Use the play button (or Space while the timeline has focus) and drag the playhead to scrub live on canvas. Toggle the Preview button (Ctrl+Enter) to exercise event-triggered tracks the way a viewer will, rather than only scrubbing time. When the motion looks right, open the Export panel. Choose SVG and enable "Include animations (SMIL)" for a self-contained file that runs in browsers without JavaScript, or pick GIF, APNG, animated WebP, or a video format (MP4, WebM, and more) for platforms that need raster output. Animated exports are SVGSketch Pro features - everything up to this point is not.

FAQ

Does SVGSketch export native SVG animation?

Yes. The default animated export is SMIL - declarative <animate>, <animateTransform>, and <animateMotion> elements that run in browsers without JavaScript.

Can I animate path morphing between two shapes?

Yes. Add a Path Morph track, edit the path nodes, and capture the geometry at each keyframe. SVGSketch warns if the path command structures differ, since per SVG 2 the animation then snaps discretely instead of morphing.

Can I export the animation as GIF or MP4?

Yes. SVGSketch Pro renders the timeline to GIF or MP4 frame by frame for environments that do not support animated SVG.

Does the animated SVG need JavaScript at runtime?

No. SMIL animation runs natively in the browser DOM. JavaScript is only needed if you want to start, pause, or seek the animation programmatically.

Can I animate text along a path?

Yes. Put the text on a path with the Text on Path tool, then animate its Text Path Start Offset track so the lettering slides along the curve.

How big is an animated SVG compared to GIF?

A SMIL SVG is usually one to two orders of magnitude smaller than the equivalent GIF because the geometry stays vector and only keyframe values are stored.