SVG to TGS Telegram sticker animation

svg to telegram sticker

Prepare an SVG for a Telegram sticker

Start with a clean static preview. Use a simple check mark to understand paths, stroke thickness and canvas spacing before adding motion.

Upload your SVG

Free SVG conversion and TGS download after Telegram login.

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

A worked source example

An open path: keep the check mark a stroke

This check mark separates stroke preparation from animation. Its three points form one open path, with no fill. Compare the SVG and static TGS: check the line, rounded ends and corner.

An open path: keep the check mark a stroke — Frame 0
Frame 0
Canvas
512 × 512
Timeline
3 s · 60 FPS
TGS size
342 bytes
Path
3 points, open
Stroke
32 px, round caps
  1. Keep the path open

    The source joins three points without returning to the first. Closing it would add a third edge and change the symbol. Check the path itself before adjusting colour or trying to add motion.

  2. Allow room for the stroke

    The line is 32 pixels wide, so its visible outline extends beyond its centreline. Rounded caps and joins matter too. Keep space around the artwork rather than aligning just the path points with the canvas edge.

  3. Compare a still result

    The TGS has a three-second timeline at 60 FPS, but its artwork does not move. A timeline alone does not make an animation. Inspect the same corner and endpoints in the SVG and a TGS preview.

This is a programmatically authored teaching file, not a named editor preset export. Your editor result may differ. Structural checks do not guarantee acceptance by Telegram.

A check mark with three points and one stroke

Our static-check.svg is a small preparation exercise: a 512 × 512 canvas, one open path, no fill and a green stroke 32 units wide. The path uses three points, with round caps at its ends and a round join at its corner.

The group is translated to (256, 256). Its local path is M-100 0 L-28 72 L108-84. Keeping the path open preserves the check-mark shape; adding a closing segment would draw an unwanted line between its ends.

Check geometry before choosing animation

Compare the original SVG with the static preview in the converter. If the corner becomes sharp, an endpoint disappears or the line changes thickness, resolve that difference before adding motion. Animation makes a source problem harder to isolate.

  • Keep fill="none" when the artwork is a stroked line.
  • Inspect stroke-width, stroke-linecap and stroke-linejoin together.
  • Leave room for the stroke itself: a 32-unit round stroke extends 16 units from its centerline.
  • Convert text to paths and replace embedded bitmap images with actual vector shapes.

Use the files as a controlled comparison

The downloadable static-check.tgs is a programmatically authored teaching example, with matching readable Lottie JSON. It contains no motion, has a three-second timeline at 60 FPS and is 342 bytes. It is a vector TGS even though it looks still.

This reference is not a recording of an editor preset or a promise that importing its SVG produces identical JSON or the same file size. Use the source to test your own export, then compare the visible shape and structural checks.

How it works

Prepare and test your SVG source

Start with a clean static preview. Use a simple check mark to understand paths, stroke thickness and canvas spacing before adding motion.

  1. Inspect the source

    Open the example SVG or your own file in a vector editor. Check the viewBox, open and closed paths, fills, strokes and empty space around the artwork.

  2. Import and sign in

    Select the SVG and sign in with Telegram to use the converter. A copy of the selected SVG is sent to the service for diagnostics; conversion is computed in the browser.

  3. Compare without motion

    Choose static mode. Look closely at the check-mark ends and corner, then inspect the whole shape at a small preview size.

  4. Export a baseline TGS

    Read any export warnings and download the file. Open that TGS in the checker to review its format and measured properties.

  5. Add motion after the shape is correct

    Try supported animation controls, inspect the moving result and export again. Use the publication guide when your final file is ready.

Use cases

Where this workflow fits

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

Line icons

Compare cap, join and width settings on checks, arrows and other open strokes.

Lettering

Turn editable text into vector paths so the sticker does not depend on an installed font.

A first troubleshooting file

Test one simple path before investigating a larger logo with nested groups or effects.

Format

A still TGS and a static image are different files

SVG is the source artwork for this converter. TGS stores compressed vector animation data, and that data can also describe a shape that stays still. Static mode does not turn the file into a PNG or WebP.

If your goal is a conventional static image sticker, follow the separate Telegram image-sticker workflow. Here, the still reference helps check vector geometry before a TGS animation is introduced.

Tips and requirements

Source checks that prevent avoidable rework

  • Do not close an open path just to make it look more like a filled icon.
  • A bitmap wrapped in an SVG file is still a bitmap; trace or redraw it first.
  • Keep a copy with editable text before converting lettering to paths.
  • If you outline a stroke in your design editor, compare the resulting shape and point count before exporting.
  • Fix a shifted viewBox or clipped stroke in the source rather than compensating with extra animation.

Try a sample SVG and TGS

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

FAQ

Frequently asked questions

Must every SVG path be closed?

No. Our check mark intentionally uses an open path with no fill and a 32-unit round stroke. Closing it would add a segment and change the artwork.

Should I outline every stroke?

Not automatically. First compare the imported stroke with the source. Outlining can be useful when stroke appearance does not transfer as intended, but it changes a simple line into filled geometry and may add points.

Why does text disappear or change?

Live SVG text depends on text and font handling. Convert it to paths in the source editor, save a separate SVG and inspect the imported result.

Why is the example TGS still?

It is a deliberate geometry baseline. Its three-second, 60 FPS timeline has no animated properties, so you can compare the stroke without motion distracting from the result.

Does the example prove my SVG will export correctly?

No. It is a small programmatic reference. Your own artwork may use different features, and both its preview and exported TGS need checking.

Start now

Test your SVG geometry first

Upload a vector source, sign in with Telegram and compare its static preview before adding animation.

Upload your SVG