SVG Path Diff & Compare

Paste two SVG path data to see highlighted line-by-line differences, a change summary, and a similarity percentage. Everything is processed on your device.

Options
or press Ctrl+Enter
Result
Fill A and B, then click Compare.

Everything runs in your browser. Your data is never sent to our servers.

728 × 90Ad Space AvailablePlace your ad here

Example

Example Input

two SVG path data

Example Output

changed path commands

How to Use

  1. 1Paste the first SVG path data (A) in the left box and the second (B) in the right box.
  2. 2Adjust the options if needed (ignore case, whitespace, or empty lines).
  3. 3Click Compare (or press Ctrl+Enter).
  4. 4See the highlighted differences, a summary of how many changes there are, and the similarity percentage. Switch between side-by-side / unified / inline views.

About SVG Path Diff & Compare

SVG Path Diff & Compare focuses on differences in the elements and the "d" attribute of an SVG — the path commands that draw the shapes. Useful for tracking small changes to icons or vector shapes.

Because it is parsed as a structure, text-formatting differences are not counted as changes.

FAQ

What is the difference between "diff" and "compare"?

Both are done by the same tool. "Diff" highlights the lines/parts that changed (added/removed), while "compare" shows how similar the two inputs are (similarity percentage + summary). You get both at once here.

Is my data sent to a server?

No. The entire comparison is computed in your browser with JavaScript. Nothing is uploaded, logged, or stored on our servers — safe for sensitive data.

Related Tools

Related Categories