An icon can look blue on a website and black when you save its SVG. The shape may be perfectly intact: its color came from the surrounding page. Before rebuilding the artwork, find out whether the standalone file contains the intended paint or expects another document to supply it.

This guide uses a single outline icon as a diagnostic example. The goal is a predictable, fixed-color source for a Telegram sticker. It does not assume that every CSS style fails during conversion; SVG to TGS resolves many ordinary SVG styles during import.

Find where the intended color comes from

Inspect a copy of your SVG in a text editor. Look for currentColor, class names, var(...), a style element, and explicit fill or stroke values. According to MDN, currentColor draws its value from the CSS color property. Setting color alone does not paint a shape unless its fill or stroke uses that value.

For example, an icon with stroke="currentColor" can inherit blue from a website button. Saving only the icon leaves the button and its stylesheet behind. Open the saved SVG directly in a browser: if its color already differs there, the dependency was lost before TGS export.

Create three versions that answer different questions

Keep the original export unchanged. Make a second copy containing the same single icon and any styles required inside the SVG. Make a third copy with the intended paint written directly on that icon. Use names such as icon-original.svg, icon-contained.svg, and icon-explicit.svg so that a comparison never depends on remembering which file you last changed.

Compare them on the same background and at the same scale. A white icon on a white page can look missing even when its color is correct. A neutral contrasting background is useful for inspection, but should not become an exported background rectangle.

  1. Open each standalone SVG and record the visible stroke and fill.
  2. Import the files one at a time without assigning animation.
  3. Compare a simple TGS export only after the SVG and import preview agree.

Replace the dependency while preserving an outline

The following original example is a fixed blue chevron. Its empty interior is deliberate: fill="none" keeps it an outline. Replace a missing inherited stroke with the chosen color, rather than applying a global fill that closes every open shape.

When changing an existing icon, inspect CSS declarations too. A class rule or inline style can override a presentation attribute. Edit the competing declaration on the diagnostic copy, or remove it after transferring every appearance property the icon still needs. Do not discard stroke width, line caps, joins or opacity accidentally.

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
  <path d="M28 18 L58 48 L28 78" fill="none"
        stroke="#1976d2" stroke-width="8"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Distinguish a missing color from a different paint problem

If every file has the right hue but one looks pale, compare opacity and overlapping shapes. If a gradient becomes flat, isolate its definition and references instead of replacing unrelated solid fills. If the outline disappears while the inside remains visible, examine stroke separately from fill.

For a two-color badge, write down the role of each color before simplifying: blue outer mark, white internal highlight, no background. A global replacement of every white value would remove the highlight as well as any unwanted background. Repair by element and role, then compare the silhouette.

Confirm the fixed source before adding movement

Use the explicit-color copy as a control, not as proof that all styling must always be removed. If the original now works too, retain the simplest version that preserves the intended artwork. If only the control works, you have narrowed the problem to the appearance dependency rather than the geometry.

Conversion requires Telegram login, and selected SVG files are sent to the service for diagnostics. Once the static appearance matches, choose any needed motion and review the downloaded TGS. Check the final icon against both light and dark chat backgrounds; a fixed blue stroke stays blue rather than inheriting the website color it originally used.

Sources & further reading