What do the letters in an SVG path d attribute mean?

Each letter is a drawing command followed by its numbers: M moves the pen, L draws a straight line, H and V draw horizontal and vertical lines, C draws a cubic Bézier curve with two control points, S a smooth cubic curve, Q a quadratic curve with one control point, T a smooth quadratic curve, A an elliptical arc and Z closes the shape. Capital letters use absolute coordinates; lowercase letters are relative to the current point.

Which commands can I drag in the preview?

Every point of lines, curves and arcs: the end of each segment is a round point, and the control points of C and Q curves are orange squares joined to their points by dashed guide lines. Arc radii and rotation are edited in the text box. Shorthand commands are shown as their full forms, so an S becomes a C with the reflected control point written out and an H or V becomes an L.

Why did my path text change when I dragged a point?

The editor needs one consistent form to move points in, so the first drag or edit rewrites the text as absolute M, L, C, Q, A and Z commands with up to three decimals. The drawn shape is the same until you move something. Your original text is kept in Undo, and the output tabs can write the path back as relative, compact or one command per line.

What is the difference between absolute and relative coordinates?

Absolute commands (capital letters) say where to go on the page, so moving one point does not change the others. Relative commands (lowercase) say how far to go from the current point, which usually gives shorter text for shapes with small steps. Both draw the same shape; pick relative with the Compact layout for the smallest file.

How do I make an SVG path smaller?

Lower the number of decimals (one or two is enough for most icons), switch the layout to Compact so separators and leading zeros are dropped, and keep "Use H / V for straight lines" on. Relative coordinates often shorten the text further. The result can be copied from the Path d tab or downloaded as an SVG file.

Does it work with a path from Figma, Illustrator or Inkscape?

Yes, as long as you paste a single path's d value (the text inside d="…"). Paths with several subpaths work too. It does not read a whole SVG file, transforms on the element, or shapes such as rect and circle, so copy only the d attribute, and apply any transform in your editor first.

Are my paths uploaded anywhere?

No. Parsing, editing and drawing all happen in your browser with plain JavaScript, so nothing you paste is sent to a server. A shareable link stores a path of up to 1,200 characters in its address, which is only used when you copy the link yourself.

SVG PATH EDITOR

Paste a path, drag its points and curve handles, then copy the d value, SVG or CSS.

In short

Paste an SVG path (the d attribute) and see it drawn, then drag its points and Bézier control handles to reshape it, or load a preset such as a heart, star or arrow. You can split or delete points, flip, scale and move the shape, fit it to a view box, and copy the result as a path d value, a standalone SVG or CSS path(). It runs in your browser and nothing is uploaded.

Drag the round points and orange squares, or focus one and use the arrow keys.

Path (d attribute)

7 points · 1 subpath · 84 × 80 · length ≈ 267.01

Select a point, then split its segment in two or delete it. Editing in the preview rewrites the text as absolute commands; shorthand commands (H, V, S, T) become L, C and Q.

Move control points with their anchor

View & look

Min XMin YWidthHeight

Snap to gridStroke widthStroke color

Fill

Transform

Scale ×Move XMove Y

Scaling is from the SVG origin (0, 0); the path moves by the amounts after it is scaled. Use “Fit path to view” to centre a pasted icon in the view box.

CoordinatesLayoutDecimals: 2

Use H / V for straight lines

M50 88 C20 62 8 44 8 29 C8 16 18 8 29 8 C38 8 46 13 50 21 C54 13 62 8 71 8 C82 8 92 16 92 29 C92 44 80 62 50 88 Z

Example output (default settings)

Path d

M50 88 C20 62 8 44 8 29 C8 16 18 8 29 8 C38 8 46 13 50 21 C54 13 62 8 71 8 C82 8 92 16 92 29 C92 44 80 62 50 88 Z

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <path d="M50 88 C20 62 8 44 8 29 C8 16 18 8 29 8 C38 8 46 13 50 21 C54 13 62 8 71 8 C82 8 92 16 92 29 C92 44 80 62 50 88 Z" fill="none" stroke="#ff6a35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>

How to edit an SVG path

1
Paste your path into the text box, or pick a preset (Heart, Star, Wave, Arrow, Speech bubble, Pie slice or a 24 × 24 icon). Set the view box if your path uses a different coordinate range, or press "Fit view to path".
2
Drag the round points (where the path passes) and the orange squares (Bézier control handles) in the preview. Turn on snap to grid for clean numbers, or focus a point and nudge it with the arrow keys.
3
Select a point and press "Split segment" to add a point in the middle of that line or curve without changing its shape, or "Delete point" to remove it. Use Undo if you go too far.
4
Use the Transform panel to flip the shape, scale and move it, or press "Fit path to view" to centre and size it inside the view box.
5
Choose absolute or relative coordinates, a layout (spaced, compact or one command per line) and the number of decimals, then copy the Path d, SVG or CSS tab, or download the SVG. Copy link shares your path and settings.

Questions

What do the letters in an SVG path d attribute mean?: Each letter is a drawing command followed by its numbers: M moves the pen, L draws a straight line, H and V draw horizontal and vertical lines, C draws a cubic Bézier curve with two control points, S a smooth cubic curve, Q a quadratic curve with one control point, T a smooth quadratic curve, A an elliptical arc and Z closes the shape. Capital letters use absolute coordinates; lowercase letters are relative to the current point.
Which commands can I drag in the preview?: Every point of lines, curves and arcs: the end of each segment is a round point, and the control points of C and Q curves are orange squares joined to their points by dashed guide lines. Arc radii and rotation are edited in the text box. Shorthand commands are shown as their full forms, so an S becomes a C with the reflected control point written out and an H or V becomes an L.
Why did my path text change when I dragged a point?: The editor needs one consistent form to move points in, so the first drag or edit rewrites the text as absolute M, L, C, Q, A and Z commands with up to three decimals. The drawn shape is the same until you move something. Your original text is kept in Undo, and the output tabs can write the path back as relative, compact or one command per line.
What is the difference between absolute and relative coordinates?: Absolute commands (capital letters) say where to go on the page, so moving one point does not change the others. Relative commands (lowercase) say how far to go from the current point, which usually gives shorter text for shapes with small steps. Both draw the same shape; pick relative with the Compact layout for the smallest file.
How do I make an SVG path smaller?: Lower the number of decimals (one or two is enough for most icons), switch the layout to Compact so separators and leading zeros are dropped, and keep "Use H / V for straight lines" on. Relative coordinates often shorten the text further. The result can be copied from the Path d tab or downloaded as an SVG file.
Does it work with a path from Figma, Illustrator or Inkscape?: Yes, as long as you paste a single path's d value (the text inside d="…"). Paths with several subpaths work too. It does not read a whole SVG file, transforms on the element, or shapes such as rect and circle, so copy only the d attribute, and apply any transform in your editor first.
Are my paths uploaded anywhere?: No. Parsing, editing and drawing all happen in your browser with plain JavaScript, so nothing you paste is sent to a server. A shareable link stores a path of up to 1,200 characters in its address, which is only used when you copy the link yourself.

Related tools

All Color & CSS Tools →

Updated November 5, 2026