SVG Path Editor & Visualizer

About the SVG Path Editor & Visualizer

An SVG path’s d attribute packs a whole drawing into one line of letters and numbers: M moves the pen, L, H and V draw straight lines, C, S, Q and T draw Bézier curves, A draws an elliptical arc and Z closes the shape. Paste that data, a <path> element or a whole SVG file, and this editor draws it on a canvas with every point and control handle, lists each command with its values in a table, and lets you drag the points or type exact numbers.

Transform moves, scales, rotates and flips the path, bakes in an SVG transform list, fits it inside the viewBox, reverses its direction or rewrites it with cubic curves only. The result is written out as clean path data: absolute, relative or the shortest mix, rounded to the decimals you choose without the drift that rounding relative numbers one by one causes, as path data, a <path>, an SVG file, a JSX component or a CSS clip-path or offset-path. Everything runs in your browser; nothing is uploaded. Without a pass, the free preview draws the result under a watermark and shows the first lines of its code.

Common uses

• Fixing or fine-tuning an icon’s path by hand, point by point, before it goes into a design system.
• Moving, scaling or mirroring a path so it fits a 24 × 24 or 16 × 16 icon grid.
• Baking a transform attribute into the coordinates, so the path can be reused without it.
• Shortening path data for inline SVG, CSS clip-path and JavaScript animations, or writing it with cubic curves only for libraries that need them.
• Reversing a path’s direction for a stroke-drawing animation or a cutting machine.

The path commands

• M x y: move to a point and start a subpath. Pairs after it are straight lines.
• L x y, H x and V y: a straight line, a horizontal one and a vertical one.
• C x1 y1 x2 y2 x y: a cubic Bézier curve with two control points. S x2 y2 x y is a smooth one whose first control point mirrors the previous curve’s second.
• Q x1 y1 x y: a quadratic Bézier curve with one control point. T x y mirrors the previous one’s control point.
• A rx ry rotation large-arc sweep x y: part of an ellipse with radii rx and ry, turned by the rotation; the two flags choose which of the four possible arcs is drawn.
• Z: a straight line back to the start of the subpath.

Upper-case letters take absolute coordinates; lower-case ones are relative to the point before them. A letter may be left out when the same command repeats.

How the transform and the rounding work

• Exact transforms: every point and control point goes through the same matrix, so curves keep their shape. A horizontal or vertical line that the matrix tilts becomes an L; each arc gets the radii and angle of the transformed ellipse, and a mirror flips its sweep flag.
• The order: the transform list first, then flip, scale and rotate around the point you choose, then the move, then the fit inside the viewBox, then the reversal.
• Rounding without drift: points are rounded in absolute coordinates first, and relative numbers are the differences between rounded points, so errors never add up along the path.
• Shortest: each command is written absolute or relative, whichever takes fewer characters. With the options on, straight horizontal and vertical lines become H and V, and curves that mirror the previous control point become S and T.
• Arcs as curves: “Only M, L, C and Z” replaces each arc with cubic curves of at most 90°, as the implementation notes of the SVG specification describe, for programs and animation libraries that cannot read arcs.

Pasting SVG markup

An SVG file or element is read for its <path> elements and its basic shapes (rect, circle, ellipse, line, polyline and polygon), which are turned into path data. With several shapes, pick one in the list. The transform attributes of the shape and its groups go into Apply an SVG transform first, and the root’s viewBox is used. The markup is only read as data: nothing in it is run or loaded.

Reading the canvas

• Squares are the points where commands end; the ring marks where a subpath starts.
• Filled dots are control points, joined to their curve by thin handle lines; dashed rings are the control points that S and T mirror (they move with the curve before them).
• The dashed frame is the viewBox. Your path is drawn in the text colour; once a transform changes it, the result is drawn over it in the tool’s colour and your path turns dashed.

Rules used

• SVG 2: Paths — the path data grammar, the commands and the handling of errors (the path is drawn up to the first error).
• SVG 2: Elliptical arc parameter conversion — arcs from their end points to their centre, and radii that are too small.
• CSS path() function — the syntax of the CSS snippets (a fill rule only in clip-path).

Limitations

• One path is edited at a time: styles, gradients and the other elements of a pasted SVG are not kept, and nested <svg> elements and <use> references are not followed.
• Path data of up to 2 MB; the Commands table shows 100 commands at a time.
• Lengths and bounds are calculated, not measured by a browser: curves are measured numerically and rounded for display, which can differ from a browser’s own measure in the last decimals.
• CSS path() reads every number as a pixel, so make the path in the pixel size of the element it is used on.
• Arc flags without spaces are valid SVG 2, but a few older programs misread them: leave that option off when you are unsure.

Privacy

On this device: nothing is sent

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.