How to svg path precision: why less is almost always more
- Step 1Inspect your SVG's path data — Open the SVG in a text editor and look at the d attribute of a path element. Count the decimal places on a few coordinates — Figma exports typically show 6–10 digits after the decimal.
- Step 2Test at different precision levels — Use the Precision Tuner to generate versions at 0, 1, 2, and 3 decimal places. Compare visually at your intended display size to find the minimum safe precision.
- Step 3Apply consistently across your project — Once you've found the right precision for your SVG type, apply it uniformly to your entire icon set or asset library for consistent file sizes.
Frequently asked questions
Why does Figma export so many decimal places?+
Figma uses floating-point arithmetic for all vector calculations. Rather than round at export, it outputs the full floating-point result. This preserves maximum fidelity but creates unnecessarily verbose path data for web use.
At what point does rounding become visible?+
At screen resolutions, rounding becomes visible when the error exceeds 0.5px in any coordinate. For a 24px icon at 1x resolution, 1 decimal place gives ±0.05px accuracy — far below the perceptible threshold.
Is precision reduction the same as path simplification?+
No. Precision reduction rounds existing coordinates. Path simplification (Ramer–Douglas–Peucker) removes entire control points. Precision reduction is lossless for display purposes; path simplification can alter subtle curves.
Does reduced precision affect SVG animation?+
Not for typical web animations. CSS keyframe and SMIL animations interpolate between values — at 1–2 decimal places, interpolation is smooth and visually indistinguishable from 8-decimal-place originals.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.