SVG Path Editor

The SVG Path Editor is a free online tool that parse, visualize, and transform svg path d-attribute strings with live preview, editable command table, and path tools. It runs entirely in your browser with no installation or sign-up needed.

All SVG path commands: M, L, H, V, C, S, Q, T, A, Z — both absolute and relative.

Yes. The Commands tab shows each segment with editable argument inputs. Changes update preview in real time.

No. All parsing, rendering, and transforms run in your browser.

Yes, the SVG Path Editor is 100% free with no registration, no hidden fees, and no usage limits. All processing happens locally in your browser, ensuring complete privacy.

Yes, the SVG Path Editor is fully responsive and works on smartphones and tablets. You can use it on any device with a modern web browser -- no app download required.

No account or registration is needed. Simply open the SVG Path Editor in your browser and start using it immediately. There are no sign-up walls or usage restrictions.

The SVG Path Editor supports a wide range of popular formats and languages. Check the tool interface for the full list of supported options.

Simply enter your input in the provided field, adjust any settings to your preference, and the tool will process it instantly. You can then copy the result to your clipboard or download it.

The SVG Path Editor works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For the best experience, use the latest version of your preferred browser.

In an SVG path, an uppercase command letter is absolute and a lowercase one is relative. Absolute commands position the pen at exact coordinates measured from the SVG's origin, so "L 90 90" always draws a line to the point 90,90. Relative commands move by an offset from the current pen position instead, so "l 90 90" draws 90 units right and 90 down from wherever the pen currently sits. Relative paths often produce smaller files and are easy to translate as a unit, while absolute paths are easier to read and reposition precisely. This editor parses both forms and includes a one-click Transform that converts every command between absolute and relative without changing the rendered shape, so you can switch styles and compare the output side by side.

The path length in the stats panel is an approximation, not an exact arc length. For straight segments like L, H, and V it is precise, but for curves — cubic (C, S), quadratic (Q, T), and arc (A) commands — the tool estimates the length by sampling points along the curve rather than solving the curve's geometry analytically. The result is close enough to compare two paths or judge whether a shape is roughly the size you expect, but it should not be used where exact measurement matters, such as setting stroke-dasharray for a precise draw-on animation. For that, read the value back from the rendered element with getTotalLength() in the browser. Paste a path here to get a quick, useful length estimate alongside the bounding box and command count.

Most oversized path strings come from design tools exporting coordinates with many decimal places, like "M 50.000123 4.998761". The biggest quick win is rounding that precision: this editor's Transform tab rounds every coordinate to a number of decimal places you choose, often cutting the string length dramatically while keeping the shape visually identical at normal sizes. Converting absolute commands to relative can shave further bytes because offsets tend to be shorter numbers, and the minified output option strips the spacing into a single compact line. Removing redundant commands and using shorthand like H and V for axis-aligned lines helps too. When the path is tuned, copy the minified version straight into your markup. Paste a path above, round to two or three decimals, and watch the byte size drop in the stats panel.

The elliptical arc command takes seven values: "A rx ry x-axis-rotation large-arc-flag sweep-flag x y". After the two radii and the rotation, the two single-digit flags decide which of four possible arcs is drawn between the start and end points. The large-arc-flag chooses the shorter arc (0) or the longer one (1) covering more than 180 degrees. The sweep-flag chooses the direction the arc curves: 0 sweeps counter-clockwise, 1 sweeps clockwise. The final x and y are the arc's endpoint. Because both flags are booleans, swapping either one flips the curve to a completely different path while keeping the same endpoints. This editor lists each A command in the Commands tab with a labelled, editable input for every value, so you can toggle a flag and instantly see which arc it produces in the live preview.

SVG uses a coordinate system where Y increases downward, the opposite of standard math graphs, so shapes built with a bottom-up mindset often appear flipped. A path can also vanish simply because its coordinates fall outside the viewBox, which defines the visible window into the canvas. This editor helps on both counts: the bounding box and min/max X and Y values in the stats panel tell you exactly where your shape actually sits, and the tool auto-fits the viewBox so the path is always visible in the preview. The optional grid with a marked origin makes the coordinate directions obvious at a glance. If the orientation is wrong, the Transform tab can flip the path vertically or horizontally in one click. Paste your path above to see precisely where it lands and correct it.