Refract

SVG path visualiser and editor

Paste the d attribute of any SVG path, or a whole SVG, to see exactly how it’s built. Drag points and curve handles to reshape it, and copy the updated path.

Free · no sign-up · copy and paste

Settings

Commands

    Path
    

    



    

    

    How to use the svg path visualiser & editor
    

    1. Paste a path. Paste the value of a path’s d attribute, or a complete SVG with a single path. A heart shape is loaded as a sample.
    2. Read the structure. Blue squares are the points the path passes through. Pink circles are Bézier control handles that pull curves towards them. The list shows every command in order.
    3. Drag to edit. Drag a point to move it along with its handles, or drag a handle to change the curve. Use Fit to view if the shape moves out of frame.
    4. Copy the result. Copy the path as absolute commands, which are easier to read and edit, or relative commands, which are usually shorter. Copy as SVG wraps it in a ready-to-use SVG with a fitted viewBox.
    

    How SVG paths work
    An SVG path is a series of drawing commands. M moves the pen, L draws a straight line, C draws a cubic Bézier curve with two control points, Q a quadratic curve with one, A an elliptical arc and Z closes the shape. Uppercase letters use absolute coordinates; lowercase letters are relative to the previous point.
    Why visualise a path?
    Path data exported from design tools is a dense string of numbers that’s almost impossible to read. Seeing the points and handles makes it easy to find a stray point, simplify a shape, fix an icon that’s slightly off the grid, or understand how a logo was drawn before animating it.
    Absolute or relative output
    Shorthand commands such as S, T, H and V are expanded to full curves and lines so every handle can be dragged. On output, horizontal and vertical lines are shortened back to H and V. Relative commands with fewer decimal places usually give the smallest result; run the full SVG through the SVG optimiser for the most savings.
    

    Frequently asked questions
    

    Can I edit arcs?
    You can drag an arc’s end point. Its radius and rotation stay as they are.
    What about SVGs with several paths?
    The editor works on one path at a time. Paste each path’s d attribute separately.
    Does it change the shape when I just copy the output?
    No. Without edits, the output draws exactly the same shape; only the formatting and rounding change.