Frontend, CSS & Design Tools

SVG Path Optimizer

Optimise SVG path data: parse every command, convert between absolute and relative, reduce decimal precision, drop redundant commands, and compare the before-and-after rendering and byte size.

  • Optimised path
  • Visual diff
  • Byte savings
Runs in your browser

Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics.

SVG paths workspace

1 Path data or SVG

Examples:
Drop an .svg file here or press to choose (up to 2 MB)

2 Result

Paste path data or an SVG, then press Optimise.

What the SVG Path Optimizer does

This SVG path optimiser shortens the d attribute of SVG paths: it parses every command, rounds coordinates to the number of decimal places you choose, writes each segment in whichever of absolute or relative form is shorter, turns straight horizontal and vertical lines into H and V, and removes redundant commands. You can paste a single path's data or a whole SVG file.

It then draws the original and the optimised shape side by side and on top of each other, so you can see whether rounding moved anything before you ship it. Everything runs in your browser; the SVG is never uploaded.

How to use it

  1. Paste a path's d value (with or without the d="..." wrapper), paste complete SVG markup, or drop an .svg file of up to 2 MB.
  2. Choose the decimal places. Two is usually invisible for icons drawn on a 24-unit grid; large illustrations drawn in thousands of units can often go to zero or one.
  3. Leave coordinates on 'Shortest of absolute or relative' unless a later script needs one form, then press Optimise.
  4. Check the overlay: red is the original outline and dashed blue is the optimised one. If they separate anywhere, add a decimal place.
  5. Copy the new path data, or download the optimised SVG file.

Reading the results

The size figures compare characters of path data (or bytes of the whole file). Gzip or Brotli on your server will shrink both versions further, so the saving on the wire is smaller than the raw saving shown here.

'Largest rounding shift' is the biggest distance, in the path's own user units, that any single coordinate moved. Coordinates are rounded as absolute positions and relative values are taken between rounded points, so errors do not add up along a long path.

When a whole SVG is optimised, scripts, event-handler attributes such as onclick, external references and editor metadata (for example Inkscape or sodipodi namespaces and <metadata>) are removed and listed, because they are not needed to draw the shape.

Worked example: An exported rectangle, 38 characters down to 15

A design tool exports a small bar as M 11 7 L 13 7 L 13 13 L 11 13 L 11 7 Z (38 characters). The optimiser starts at M11 7. The line to (13, 7) keeps y = 7, so it becomes a horizontal line: relative h2 (2 characters) beats absolute H13 (3). The line to (13, 13) keeps x = 13, so it becomes v6.

The line to (11, 13) is horizontal again: h-2 and H11 are both 3 characters, and on a tie the absolute form is kept. The line back to (11, 7) is vertical: V7 (2 characters) beats v-6 (3). The closing z stays. Result: M11 7h2v6H11V7z, 15 characters, with a rounding shift of 0 because every value was already whole.

Formulas and scoring rules

Rounding
x' = round(x x 10^p) / 10^p for every absolute coordinate, p = decimal placesArc flags are never rounded; arc radii and rotation are.
Relative form
dx = x'(this point) - x'(current point), taken between already-rounded pointsThis is why rounding error cannot accumulate.
Choice per segment
use relative if its text is strictly shorter than the absolute text; otherwise absolute

Limitations: what the result does not prove

  • Only the d attribute of <path> elements is rewritten. Shapes such as <circle>, <rect> and <polygon> are left as they are, and curves are not simplified or merged; this is lossless apart from the rounding you choose.
  • A precision that looks fine at 24 px can show at 512 px. The shift figure is in user units, so judge it against the size you will actually display the graphic.
  • Transforms, strokes and filters are not taken into account when estimating visual error; a scaled-up group magnifies the shift.
  • Removing scripts and handlers makes the file safer to preview, but it is not a full security review of third-party SVG. Serve untrusted SVG as an image, not inline.

Privacy: where your data goes

Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.

Standards and sources

Frequently asked questions

How many decimal places should an SVG path keep?

It depends on the coordinate scale. Icons on a 16, 20 or 24-unit grid usually look identical at two decimal places, and often at one. Illustrations drawn with coordinates in the hundreds or thousands can usually drop to zero. Use the overlay and the largest-shift figure rather than a fixed rule.

Why are relative commands often shorter than absolute ones?

A relative command stores the distance from the current point, which is usually a small number such as h2, while the absolute command stores the full coordinate such as H213.5. Short distances need fewer digits. Where the absolute value happens to be shorter, the optimiser keeps it.

Does optimising the path change how the icon looks?

Only through rounding. Converting between absolute and relative, writing lines as H or V, and dropping repeated command letters are exact. Rounding moves each point by at most half of the last kept decimal place, and the tool reports the largest movement it made.

Why is a zero-length line straight after a move kept?

With round or square line caps, a path such as M10 10 L10 10 draws a visible dot. Removing it would change the drawing, so only zero-length lines that come after other drawing commands are removed.

Is it safe to paste an SVG that someone sent me?

The file is parsed as text in your browser and never uploaded. Scripts, on... event attributes and external references are stripped before anything is drawn, and previews are shown through an image element, which cannot run scripts. Treat the output as untrusted until you have reviewed it.

How is this different from minifying the whole SVG file?

General SVG minifiers mainly remove whitespace, comments and editor metadata. Path data is usually the largest part of an icon, and it needs a parser that understands the command grammar to shorten safely. This tool does both for paths and editor clutter, but does not restructure groups or convert shapes.

Last reviewed by the A2Z.Tools team against the sources listed above.

Rate this tool

Was this tool useful? Your feedback helps us improve it.

No ratings yet — be the first to rate this tool.
Your rating (required)
0 / 2000

Please do not include passwords, payment details or other sensitive information.

Your feedback is sent privately to the A2Z.Tools team and will not be posted publicly.