How to trim excess decimal places from svg path data
- Step 1Drop in your SVG or paste the source — Drag an
.svgfile onto the upload box, click to browse, or paste the raw SVG markup into the textarea below the drop zone. The tool accepts a single SVG per run (.svg/image/svg+xml). A pasted source must parse as valid SVG XML or you will get anInvalid SVGerror before processing starts. - Step 2Set the decimal-places slider — Drag the Decimal places slider — it steps in whole numbers from 0 to 4, defaulting to 2. The live value appears next to it. There is no separate field for path vs attribute precision; the one value applies to everything the tool rounds.
- Step 3Pick a value for your use case — Use 1 for icons shown at 16–64px, 2 (the default) for logos and most illustrations, 0 only for simple geometric icons (arrows, checks, rectangles). Higher precision such as 3–4 keeps more detail but saves fewer bytes — useful for large hero artwork or anything zoomed well past 100%.
- Step 4Click Process SVG — The tuner runs the rounding pass in your browser. On Pro+ tiers with a paired @jadapps/runner it routes to your local runner instead, falling back to the browser automatically if the runner is unavailable — either way the file stays on your machine.
- Step 5Check the metrics and preview — The result panel shows the chosen Decimal places, Original size, Output size, and Saved percentage, plus a rendered preview of the tuned SVG and an expandable source view. Compare the preview against your expectation at the size you actually ship the asset.
- Step 6Download or copy the tuned SVG — Click Download SVG to save
{name}-tuned.svg, or Copy to clipboard to paste the rounded markup straight into a component. For a deeper size cut, chain it through the SVG minifier afterwards to collapse whitespace and structural bloat.
What the slider value does
The single Decimal places slider (integer, 0–4, default 2). Rounding is Math.round(v * 10^places) / 10^places, then the result is re-serialised, so trailing zeros are dropped (2.50 → 2.5).
| Decimal places | Input 0.70710678118 becomes | Best for |
|---|---|---|
| 0 | 1 | Simple geometric icons — arrows, checkmarks, plain rectangles where every coordinate snaps to whole units |
| 1 | 0.7 | Standard icon sets shown at 16–64px; near-imperceptible and a big byte win |
| 2 (default) | 0.71 | Logos and most illustrations; safe general cleanup with no visible change |
| 3 | 0.707 | Large illustrations or assets viewed well above 100% where fine curves must stay smooth |
| 4 (max) | 0.7071 | Engineering-style or very large artwork; minimal savings but maximum retained detail |
What gets rounded and what does not
The tuner is a regex rewrite, not a DOM/SVGO pass. It edits the d path string and a fixed list of numeric attributes. Anything not in that list is preserved verbatim.
| Target | Rounded? | Notes |
|---|---|---|
d="..." path data | Yes | Every numeric token in the path (M/L/C/Q/A coordinates, arc radii, etc.) is rounded |
cx cy x y r rx ry x1 y1 x2 y2 width height points | Yes | Covers <circle>, <rect>, <ellipse>, <line>, <polyline>, <polygon> coordinates |
stroke-width, data-x, and similar | Yes (side effect) | The attribute match uses a word boundary before width/x/y etc., so stroke-width and data-x get caught too — usually harmless but worth knowing |
viewBox="..." | No | Not in the attribute list — viewBox coordinates are left exactly as exported |
transform="translate(...) scale(...)" | No | Transform numbers are not touched; round these upstream in your design tool if needed |
Gradient stops, offset, CSS in <style> | No | offset, stop-color, and any numbers inside a <style> block are preserved verbatim |
IDs, class, fill, stroke colours, ARIA | No | Non-numeric attributes are never altered — text and structure round-trip unchanged |
Cookbook
Real before/after fragments. Coordinates are exactly what the tuner produces — Math.round, re-serialised, trailing zeros dropped.
A Figma path at 2 decimal places
The classic Figma export: a handful of coordinates carrying ten-plus digits of floating-point noise. At the default 2 places the path collapses to clean two-decimal numbers with no visible change.
Before: <path d="M12.000039062500002 4.99998 C18.5 4.99998 23.00000001 9.5 23 16"/> Decimal places = 2 After: <path d="M12 5 C18.5 5 23 9.5 23 16"/>
Icon snapped to whole units at 0 places
A simple 24px chevron. At 0 decimal places every coordinate rounds to a whole number — perfect for crisp pixel-aligned icons, but only use it where you are sure the shape has no sub-pixel detail that matters.
Before: <path d="M8.4 6.1 L15.6 12 L8.4 17.9"/> Decimal places = 0 After: <path d="M8 6 L16 12 L8 18"/>
Shape attributes, not just paths
A circle and a rect with verbose coordinates. The tuner rounds the listed attributes (cx, cy, r, x, y, width, height, rx) in the same pass as the path data.
Before: <circle cx="12.0000123" cy="12.0000123" r="9.4999998"/> <rect x="3.111" y="3.111" width="18.0001" height="18.0001" rx="2.4999"/> Decimal places = 1 After: <circle cx="12" cy="12" r="9.5"/> <rect x="3.1" y="3.1" width="18" height="18" rx="2.5"/>
viewBox and transform survive untouched
Proof of what the tuner leaves alone. The path is rounded; the viewBox and the transform keep every original digit because neither is in the rounding scope.
Before:
<svg viewBox="0 0 24.0000123 24.0000123">
<g transform="translate(2.9999999 5.0000001)">
<path d="M0.123456 0.987654 L9.999 9.001"/>
</g>
</svg>
Decimal places = 1
After:
<svg viewBox="0 0 24.0000123 24.0000123">
<g transform="translate(2.9999999 5.0000001)">
<path d="M0.1 1 L10 9"/>
</g>
</svg>Then minify for the full saving
Precision tuning shrinks the numbers; minification removes whitespace, comments, and structural bloat. Run the tuner first, then the minifier — the order that consistently wins.
1. /svg-tools/svg-precision-tuner → round coordinates (e.g. 1 place) 2. /svg-tools/svg-pro-minifier → strip whitespace + structure 3. /svg-tools/svg-compression-estimator → check the gzip/brotli payload Result: smaller raw bytes AND better compression downstream.
Edge cases and what actually happens
Coordinate uses scientific notation (1.2e-4)
Left as-isThe number regex matches the mantissa but not the exponent suffix, so a token like 1.2e-4 is rounded only on the 1.2 part and the e-4 is left attached. The exponent survives intact rather than being collapsed to a decimal. Most design-tool exports use plain decimals, not exponents, so this is rare — but if your file has them, they will not be normalised. Round those upstream or convert to plain decimals first.
viewBox still has long decimals after tuning
By designviewBox is intentionally outside the rounding scope, so viewBox="0 0 24.0000123 24.0000123" is preserved exactly. This is correct — changing the viewBox can shift the whole coordinate system. If you need a clean viewBox, edit it by hand or use the relevant viewBox tooling; the Precision Tuner deliberately will not touch it.
stroke-width got rounded unexpectedly
ExpectedThe attribute match keys on a word boundary before width, x, y, etc., so stroke-width (ending in width) and data-x (ending in x) are also rounded. At sensible precision this is harmless — stroke-width="1.500003" becoming 1.5 is fine. If you depend on a high-precision stroke-width, choose a higher decimal-places value.
Path with C/Q/A curves loses smoothness at 0 places
Over-roundedAt 0 decimal places, control points of a Bézier or arc snap to whole units and smooth curves can develop visible kinks. The tuner does not refit curves — it only rounds the existing numbers. For curve-heavy artwork keep at least 1–2 places, and if you want to genuinely reduce node count instead, use the SVG path simplifier.
Pasted source is not valid SVG
Invalid SVGIf you paste markup that cannot be parsed as valid SVG XML, the tool throws Invalid SVG — could not parse the pasted content as valid SVG XML and does not run. Fix the markup (matched tags, a real <svg> root) or upload the original .svg file instead.
No file and no pasted text
RejectedPressing Process with nothing provided returns Please upload an SVG file or paste SVG source code. The tuner needs an input; it is not a generator.
File exceeds the tier size limit
413-style blockFree tier caps input at 5 MB per job. A larger file is blocked before processing with a message naming the limit and tier. Pro raises this to 50 MB. SVGs almost never approach these limits, but a giant auto-traced illustration could — minify or split it first.
Already-clean SVG, nothing to round
No-opIf every coordinate already has fewer decimals than your slider value, the output is byte-identical to the input and Saved shows 0%. That is correct behaviour — there is no precision to remove.
Output looks identical but bytes barely dropped
ExpectedMost of a real SVG's bytes are often tag names, attributes, and colours, not coordinate digits. Precision tuning only shrinks the numeric portion. For the rest, follow up with the minifier and the unused-defs purger.
Numbers inside a <style> block unchanged
PreservedThe tuner only rewrites the d attribute and the listed presentation attributes on elements. Numbers inside a CSS <style> block (e.g. stroke-width: 1.5px in a rule) are not rounded. Move presentation to attributes, or accept that CSS-driven values are out of scope.
Frequently asked questions
How many decimal places should I use for icons?
1 decimal place is almost always imperceptible for icons viewed at 16–64px and gives a strong byte saving. The slider defaults to 2, which is the safe choice for logos and illustrations. Drop to 0 only for simple geometric icons (arrows, checkmarks, rectangles) where you are sure no sub-pixel detail matters.
Will rounding coordinates break my animation?
For CSS keyframe and SMIL animations, 1–2 decimal places is more than enough — interpolation between rounded values is visually indistinguishable from the original. Note the tuner rounds the path/shape geometry, not transform attributes or CSS, so transform-based animation values are left exactly as they were.
Does it round non-path elements too?
Yes. Beyond the d path data, it rounds the numeric attributes cx cy x y r rx ry x1 y1 x2 y2 width height points, which covers <circle>, <rect>, <ellipse>, <line>, <polyline> and <polygon>. It does not touch viewBox or transform.
Can I use 0 decimal places for everything?
For simple geometric icons, yes — 0 places snaps coordinates to whole units and can look crisp. For anything with smooth curves (Bézier C/Q or arc A commands), 0 places can introduce visible kinks because the tuner rounds numbers without refitting curves. Use at least 1 place for curve-heavy shapes.
Does this use SVGO under the hood?
No. It is a focused regex rewrite that rounds numbers in the d attribute and a fixed list of numeric attributes — not the full SVGO convertPathData pipeline. That keeps it fast and predictable: it will never reorder commands, convert command types, or change structure. For SVGO-style structural minification, run the minifier afterward.
Why does my viewBox still have long decimals?
By design. viewBox is deliberately excluded from rounding because altering it shifts the whole coordinate system and can move or scale your artwork. The tuner only rounds the path data and the listed presentation attributes. Clean the viewBox by hand if you need to.
Will it change my colours, IDs, or classes?
No. Only numeric coordinate values are rewritten. fill, stroke, hex colours, id, class, ARIA attributes, and element order are preserved exactly. If you need to recolour, use a sibling tool like the hex swapper instead.
Is my SVG uploaded to a server?
No. The tuner runs in your browser. On Pro+ tiers with a paired @jadapps/runner it routes to your own local runner, falling back to the browser if the runner is unavailable. Either way the file content never reaches JAD servers — the result panel even shows a '0 bytes uploaded' badge.
What is the largest SVG I can tune?
Up to 5 MB on the free tier and 50 MB on Pro, per job (with even larger limits on higher tiers). SVGs rarely get near these sizes; if a heavily auto-traced illustration does, simplify or minify it first.
How much smaller will my file get?
It depends on how much of the file is coordinate digits. Coordinate-heavy paths from Figma/Illustrator can shrink noticeably; files dominated by tags, classes, and colours change less. The result panel shows the exact Saved percentage. Pair with the minifier for the full reduction.
What does the output file get named?
The download is {originalName}-tuned.svg (for pasted source, input-tuned.svg). The MIME type is image/svg+xml, so it opens directly in browsers and design tools.
Is precision reduction the same as path simplification?
No. Precision reduction rounds existing coordinates and never removes points. Path simplification (the Ramer–Douglas–Peucker method in the path simplifier) removes whole points to cut node count. Tune precision first for a lossless-looking cleanup; simplify only when you specifically want fewer nodes.
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.