A stroke draws a border along a path; an outlined stroke represents that border as filled geometry. Both can look similar in a design editor, but they behave differently when transformed, exported or simplified. Choose the representation that preserves your intended appearance with the least unnecessary complexity.
Understand what you are exporting
A simple line with a stroke has a centerline and a width. Converting that stroke to an outline creates the outer boundary of the visible band. This may be useful when another renderer interprets stroke placement differently, but it usually introduces more geometry than the original centerline.
Consider a ring icon. A stroked circle describes a centerline and width; an outlined version needs inner and outer contours. Keep the original version in your master so you can change the ring thickness easily. Compare the exported result before deciding that outlining every stroke is necessary.
Inspect line caps and corner joins
The endpoints and corners of a stroke affect its visible bounds. Round caps extend differently from butt caps, and an acute miter join can protrude well beyond the nearby path. These details can matter when an icon is placed close to the canvas edge.
Use a checkmark as a practical example. The long diagonal may fit, but its pointed join or rounded endpoint can still be clipped during a scale animation. Inspect the visible painted shape, not just the path centerline.
- Check both endpoints of open paths.
- Inspect sharp corners at high zoom.
- Preview the outline at its final display size.
- Leave motion room for the visible stroke thickness.
Compare the exported SVG with the source
Design tools may represent inside and outside strokes differently when exporting SVG. Figma documents stroke simplification and the possibility of masks when some stroke settings are preserved. That means a border can become more than a simple stroke attribute in the resulting file.
If the SVG contains masks solely to maintain a border appearance, try a simplified or outlined copy and compare it. Keep the version that preserves the important silhouette and exports reliably. Do not replace a clean stroke with dozens of tiny shapes merely to make the markup look uniform.
Choose a border for light and dark chats
A border should help the sticker remain legible against different backgrounds. Test a light character against both light and dark surfaces. A white border alone may disappear on a pale chat; a dark border may feel heavy on a dark one. The appropriate solution depends on the actual design.
For a blue speech symbol, compare a plain silhouette, a modest light border and a layered border. Evaluate readability before animating. If two versions are equally clear, the simpler geometry is easier to maintain and gives you more room for expressive movement.
Measure the result after outlining
Create two export copies when the choice is uncertain: one with the straightforward stroke, one with the stroke converted to geometry. Keep the canvas and motion unchanged, then compare appearance and final TGS size. This is a controlled design comparison, not a promise that one representation is always smaller.
If outlining produces filled holes or overlapping seams, inspect the compound path and fill rule. If the appearance is correct but the export grows substantially, simplify the outline carefully or return to a supported stroke. Preserve the version that solves the actual visual problem.