SVG to TGS Telegram sticker animation
English

svg animation online

Animate SVG online: choose what should move

Use a moving arrow to compare translation with scaling, then plan motion for the supported elements in your own SVG.

Animate SVG

SVG input and TGS output after Telegram login. This editor does not import CSS or SMIL animation.

Animate SVG Static vector SVG. Embedded images and text are ignored during export.
Animate SVG
Browser-based editor Vector SVG inputPreview before exportTGS download

A worked source example

Measured vertical travel: 56 pixels

This seven-point arrow moves vertically without changing shape, scale or angle. It starts below the SVG centre. The three frames distinguish a layer offset from a change in the artwork.

Measured vertical travel: 56 pixels — Frame 0
Frame 0
Measured vertical travel: 56 pixels — Frame 60
Frame 60
Measured vertical travel: 56 pixels — Frame 119
Frame 119
Canvas
512 × 512
Timeline
2 s · 60 FPS
TGS size
381 bytes
Y position
276 → 220 → 276
Vertical travel
56 px

  1. Read position relative to the source

    The SVG places the arrow around 256, 256. In the animation the layer moves through Y positions 276, 220 and 276. Offsets are +20, −36 and +20 pixels; X stays at 256.

  2. Measure travel, not distance from the edge

    The vertical travel is 56 pixels: 276 minus 220. The arrow itself is 204 pixels high, so that travel must be added to its occupied range. A small position change can still clip a large illustration.

  3. Check both extreme positions

    Across this motion the path reaches Y coordinates 124 through 384 on the 512-pixel canvas. That leaves 124 pixels above and 128 below. Recalculate this clearance if you resize the shape, add a stroke or increase the travel.

This programmatic teaching animation is not an editor preset export. Editor results may differ. Structural checks do not guarantee Telegram acceptance.

Move the arrow without changing its shape

Our bounce-arrow teaching animation moves one purple shape vertically. Its position is (256, 276) at frame 0, (256, 220) at frame 60 and (256, 276) at frame 119. X remains fixed, scale stays at 100% and rotation stays at zero.

The distance between the extreme positions is 56 pixels: the arrow travels upward and then returns. The source SVG is centered at Y = 256, so 56 pixels is the animation travel, not an offset measured from the original SVG position.

Position, scale and separate layers solve different tasks

Position moves a shape across the canvas. Scale changes its size around an anchor. In the reference JSON these are separate properties: ks.p for position and ks.s for scale. Compare the arrow with the pulsing circle to see the difference without extra effects.

For a multi-part icon, decide which parts should move together before exporting the SVG. Inspect the elements that actually appear in the converter: SVG groups are not a guarantee that every design-editor layer will become a separate editable layer. Apply motion only to the supported elements you can identify in the preview.

  • Use translation when an arrow should keep its silhouette and size.
  • Use scaling when a symbol should grow and shrink around a stable center.
  • Use separate supported layers when one part should move while another remains still.

Budget space for the complete path of motion

The arrow path extends from local Y = -96 to Y = 108. With its animated position, the total vertical extent across this example is Y = 124 to Y = 384, inside the 512-pixel canvas. That space is intentional; centering the first frame alone would not prove that later frames fit.

The 381-byte TGS was authored programmatically as a teaching example. It runs at 60 FPS for 120 frames, or two seconds. Its last position key is at frame 119. The editor presets use their own motion curves; importing the SVG does not recreate these exact keyframes or import the reference TGS.

How it works

Plan and test your SVG motion

Use a moving arrow to compare translation with scaling, then plan motion for the supported elements in your own SVG.

  1. Choose the property to change

    Decide whether the shape should move, resize or rotate. Start with one property so you can tell which change caused an unexpected result.

  2. Prepare and import a static SVG

    Keep enough canvas space for movement. Select the SVG and sign in with Telegram. A diagnostic copy of the selected source is sent to the service; conversion runs in the browser.

  3. Inspect the supported elements

    Check which shapes can be selected and animated. Confirm that fixed parts remain still when you apply motion to a selected element.

  4. Try the available controls

    Choose a suitable preset and review its actual path. Preset availability depends on your plan; the bounce preset is a Pro option. The teaching file remains available to study independently.

  5. Review all positions and export

    Watch the complete loop, including the extreme positions. Download the TGS, run the checker and inspect the final animation in Telegram before publishing.

Use cases

Where this workflow fits

Create vector artwork for Telegram stickers, custom emoji and branded packs.

Directional arrows

Translate the whole shape while keeping its dimensions and orientation unchanged.

A symbol on a fixed base

Keep the background or supporting shape still and move one supported element.

A logo with several parts

Compare whole-logo movement with selective motion, checking that the result still reads as one mark.

Format

Static SVG artwork in, TGS animation out

This editor builds new motion from supported SVG geometry. It does not preserve an existing CSS, JavaScript or SMIL timeline, and it does not export web-animation code. A browser animation visible in the source SVG therefore needs to be recreated with the available controls.

The checker can flag structural issues in the exported TGS but cannot prove that every moving shape stays inside the canvas. Inspect the complete visual motion as well as the file report.

Tips and requirements

When the motion looks wrong

  • Unexpected size changes: check whether the chosen preset changes scale as well as position.
  • A part moves independently: inspect the selected elements and the source grouping.
  • Edges disappear: reduce the motion or source size, and leave room for any stroke width.
  • The SVG starts in a different place: compare its viewBox and group transforms before adding animation.
  • Motion disappears after import: check whether the source relied on CSS or SMIL rather than static geometry.

Try a sample SVG and TGS

Download the SVG to try the converter, or inspect a small animated TGS export.

FAQ

Frequently asked questions

What is the difference between moving and scaling an SVG?

Position changes where the shape appears; scale changes its size around an anchor. The arrow reference changes only position, while the circle reference changes only scale.

Does the arrow move 56 pixels from its SVG center?

No. Its SVG source is at Y = 256. The TGS position ranges between Y = 276 and Y = 220, so 56 pixels is the distance between the two extremes.

Can I animate every SVG group as its own layer?

Not necessarily. Editable elements depend on the imported structure and supported SVG features. Inspect the actual layer selection and preview rather than assuming a one-to-one mapping from your design editor.

Will the bounce preset reproduce the downloadable arrow?

No. The reference TGS was created programmatically with three position keys. The Pro bounce preset has its own trajectory and timing, so evaluate your export separately.

Can I keep the CSS or SMIL animation in my SVG?

No. This workflow imports supported static SVG geometry and builds new TGS motion. It does not carry a CSS, JavaScript or SMIL animation timeline into the export.

Start now

Choose one part and one motion

Upload a static SVG, sign in with Telegram and inspect the available elements before applying a preset.

Animate SVG