tool / svg pathruns in your browser
SVG path editor
Edit a path’s d on a canvas or as text. Drag its points and handles, type into any command, turn the whole path absolute or relative, round it, move it, scale it or reverse it, with undo all the way back. Then watch it draw and copy the SVG or the scroll code.
- Commands read
- 20
- Operations
- 7
- Code
- 3 + a page
- Library
- 2.23.7
Edit a path
The sample uses every command once, absolute and relative mixed. The selected command is drawn in colour; its row in the list is marked. Below the editor, scrollDraw draws the path as it stands, moved with seek() instead of the page’s scroll.
Drag a point (●) or a control (■). Dashed arms are implied by S and T, mirrored from the curve before. With a point focused, arrow keys move it: Shift ×10, Alt ×0.1; [ and ] step through the points.
Commands · 10 · M C s q t a l v H z
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10back to the subpath’s start
- Length
- …
- Box
- x 20 · y 72.12 · 280 × 77.88
- Subpaths
- 1 · 10 commands · 96 characters
- Ends
- starts 20, 120 · ends 20, 120
- Selected
- command 2 (C) · end point · 110, 100
Preview · scrollDraw · seek(0.62)
<!-- Made with https://svg-scroll-draw.vercel.app/svg-path-editor -->
<div id="drawing">
<svg viewBox="16 68 288 86" aria-hidden="true">
<path
d="M20 120 C40 60 90 60 110 100 s60 50 80 0 q15 -30 40 -20 t40 0 a30 30 0 0 1 30 30 l0 20 v20 H20 z"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<style>
#drawing svg {
display: block;
width: min(100%, 640px);
height: auto;
margin: 0 auto;
}
</style>// Made with https://svg-scroll-draw.vercel.app/svg-path-editor
import { scrollDraw } from 'svg-scroll-draw';
// Draws the line as #drawing crosses the screen: from its top at the
// bottom of the window to its bottom at the top (the default trigger).
scrollDraw('#drawing');Only options that differ from scrollDraw’s defaults are written. Leave fill as none: the drawing is the stroke.
The commands, and what you can drag
A d string is a list of commands, each a letter and its numbers. Uppercase takes absolute coordinates; lowercase takes them relative to where the last command ended. Each row below is one command as the editor shows it; for what each draws, the path viewer’s table goes through them one by one.
| Command | Takes | On the canvas |
|---|---|---|
| M / m · Move to | x y | A point. Starts a new piece (subpath); its own numbers after it are lines. |
| L / l · Line to | x y | Its end point. |
| H / h · Horizontal line | x | Its end point, which moves across only. |
| V / v · Vertical line | y | Its end point, which moves up and down only. |
| C / c · Cubic curve | x1 y1 x2 y2 x y | Two square control points on arms, and its end point. |
| S / s · Smooth cubic | x2 y2 x y | One control point. The first is implied (a dashed arm): the last cubic’s second control mirrored, or the start point after any other command. |
| Q / q · Quadratic curve | x1 y1 x y | One control point, with an arm to each end. |
| T / t · Smooth quadratic | x y | Its end point. The control is implied (dashed): the last quadratic’s mirrored, or the start point after any other command. |
| A / a · Arc | rx ry rotation large-arc sweep x y | Its end point. Select it and its ellipse, centre and radii are drawn. |
| Z / z · Close path | — | Nothing to drag: a straight line back to where the piece started. |
How a d string is read
Path data is terse, and browsers read it more loosely than it looks: letters can be left out, numbers run together, flags are single characters. The editor reads it as Chromium and Safari do, checked against both (and Firefox) on every form below. Each “read as” is the editor writing back what it read.
| Written | Read as | Why |
|---|---|---|
| M0 0 10 10 20 0 | M0 0 L10 10 L20 0 | Numbers after M with no letter of their own are lines, L. |
| m5 5 10 0 0 10 | m5 5 l10 0 l0 10 | After m they are relative lines, l. A path’s first m is read as absolute, like M. |
| M0 0 C1 2 3 4 5 6 7 8 9 10 11 12 | M0 0 C1 2 3 4 5 6 C7 8 9 10 11 12 | Any command repeats while numbers follow: six at a time for C. |
| M.5.5 | M0.5 0.5 | A second dot starts a new number. |
| M-1-2 | M-1 -2 | So does a sign. |
| M1e-3 2E2 | M0.001 200 | Exponents, in either case. |
| M0 0a1 1 0 00 1 1 | M0 0 a1 1 0 0 0 1 1 | An arc flag is one character, so 00 is both flags. |
| M0 0a10 10 0 1020 0 | M0 0 a10 10 0 1 0 20 0 | A flag runs into what follows: 1, 0, then 20. |
| M10,10L20,20 | M10 10 L20 20 | A comma may stand between numbers, one at a time, with or without spaces. |
| M10 10 L20 | M10 10, then stops at character 11 | A command short of numbers is not drawn; the browser draws everything before it. |
| M1. 2 | nothing, then stops at character 2 | A dot needs a digit after it. |
| M10 10 Z 5 5 | M10 10 Z, then stops at character 10 | Z takes no numbers, so nothing after it can repeat it. |
| L10 10 | nothing, then stops at character 1 | A path has to start with M or m. |
The clock sample is written the way a minifier writes it. Read, it is 7 commands, each with its letter back; written absolute, every number is a position on the grid.
M12 2a10 10 0 100 20 10 10 0 100-20zm0 5v5l3 3
M12 2 a10 10 0 1 0 0 20 a10 10 0 1 0 0 -20 z m0 5 v5 l3 3
M12 2 A10 10 0 1 0 12 22 A10 10 0 1 0 12 2 Z M12 7 V12 L15 15L20 20,L0 0): Chromium and Safari skip it, Firefox stops drawing there. An e with no digits after it (L20 20e): Chromium and Safari drop that command and stop, Firefox reads the number without the e and carries on. (Firefox also reads a number past about 3.4 × 10³⁸, where the others stop.) The editor reads all three as Chromium and Safari do, and names the first two when a path has them; the d it writes has none.What each operation does to the numbers
Every operation leaves the path as commands, never as a transform, so it stays as easy to edit afterwards. And none of them moves a point it was not asked to move.
| Operation | What it does |
|---|---|
| Drag, type, nudge | Rewrites the one command, then any relative command after it whose start moved, so every other point stays where it was. A drag rounds to a tenth, a hundredth or whichever step is just under one screen pixel. |
| Absolute · Relative | Every command written the other way, or one at a time with its letter. Numbers are worked out to the decimals the path already has, so 0.1 + 0.2 comes out 0.3 and nothing moves. |
| Round | Every number to the decimals chosen. Relative numbers are rounded from where the rounded path has got to, so no point ends more than half a step from where it was: ten steps of l0.4 0 end at 4, where rounding each one alone ends at 0. A radius is never rounded to 0, which would make its arc a line. |
| Move | Absolute numbers move; relative ones are differences already, so they stay as they are. A path’s first m moves too, being read as absolute. |
| Scale · Flip | About the box’s centre or about 0, 0. Every coordinate scales; an arc gets new radii (and a new rotation when a turned ellipse is stretched one way), and its sweep flag flips when the scale mirrors. |
| Reverse | The pieces in reverse order, each from its end to its start; a closed piece keeps its start and goes round the other way. S and T become C and Q, an arc’s sweep flips, each command keeps its case, and a move that draws nothing is dropped. |
| Compact | A letter left out where a command repeats (and L after M), no leading zeros, no space before a sign, a second dot, or after an arc flag. It reads back to the same numbers. |
The heart sample, reversed: it still starts at its bottom point, now going up the right side first, and each arc’s sweep flag has flipped.
M50 88 L14 52 A20 20 0 0 1 50 22 A20 20 0 0 1 86 52 Z
M50 88 L86 52 A20 20 0 0 0 50 22 A20 20 0 0 0 14 52 Zdirection: 'reverse' does not do that: it starts with the line drawn and takes it away as the page scrolls, from the end the path finishes at.Use it in your project
scrollDraw measures each path with getTotalLength(), the length the editor shows, sets one dash that long and slides it into place as the drawing crosses the screen. The preview calls seek(), which stops following the scroll and draws that much of the line (0 to 1; under reduced motion the line is drawn whole and seek() does nothing).
// Made with https://svg-scroll-draw.vercel.app/svg-path-editor
import { scrollDraw } from 'svg-scroll-draw';
const drawing = scrollDraw('#drawing');
// What the preview does: stop following the scroll and draw 40% of the line.
drawing.seek(0.4);SVG path editor questions
How do I edit an SVG path online?
Paste the SVG, or just the path’s d value, into the editor above. Drag a point or a control handle on the canvas, or type new numbers into the command list, and the d string updates as you go; undo and redo step back through every change. Copy the d, the whole SVG, or the code that draws it on scroll. Nothing is uploaded: the path is read in your browser.
What is the difference between uppercase and lowercase SVG path commands?
An uppercase command (M, L, C, A…) takes absolute coordinates, measured from the SVG’s origin. A lowercase one (m, l, c, a…) takes coordinates relative to where the previous command ended, so l10 0 means 10 to the right of the pen. Z and z are the same. One exception: when a path starts with m, that first pair is read as absolute. Click a command’s letter in the editor to switch it without moving anything.
How do I convert an SVG path to absolute or relative coordinates?
Press Absolute or Relative in the editor: every command is rewritten the other way and the drawing does not move. The arithmetic is done to the decimals the path already uses, so no 0.30000000000000004 creeps in. The clock sample, for one, M12 2a10 10 0 100 20 10 10 0 100-20zm0 5v5l3 3 written absolute is M12 2 A10 10 0 1 0 12 22 A10 10 0 1 0 12 2 Z M12 7 V12 L15 15.
How do I reverse the direction of an SVG path?
Press Reverse. Each piece is rewritten from its end to its start, the pieces in the opposite order, and a closed shape keeps its start point and goes round the other way. That is what makes a line drawing animate from the other end. In svg-scroll-draw, direction: 'reverse' is something else: it starts with the line drawn and erases it as you scroll, from the end the path finishes at.
What do the large-arc and sweep flags mean in an SVG arc?
Through two points there are, in general, two ellipses with the given radii and rotation, and each gives a short arc and a long one: four in all. large-arc picks the long way round (1) or the short way (0); sweep picks the direction, 1 for increasing angles, which is clockwise on screen because SVG’s y axis points down. If the radii are too small to reach from one point to the other, the browser scales them up until they just do. The flags are single characters, so a minified path may write them run together, as in a10 10 0 1020 0.
Why is part of my SVG path missing?
Usually an error in the d string. A browser draws the path up to the command that holds the first error and stops there, so a missing number, a stray letter or a dot with no digit after it cuts the drawing short without any message. Paste the path into the editor: it marks the character where reading stopped and draws what the browser draws. Browsers also disagree in two places: a comma right before a command letter, which Chromium and Safari skip and Firefox stops at, and an e with no digits after it, which Firefox reads past and the others stop at.
How do I move or scale an SVG path without a transform?
Use Move and Scale in the editor. Moving changes only the absolute numbers, since relative ones are differences already; scaling changes them all, gives arcs new radii, and flips an arc’s sweep when the scale mirrors the drawing. The path keeps its commands, so it stays as easy to edit, and nothing depends on a transform attribute that a later tool might drop.
Drawing paths with svg-scroll-draw 2.23.7: the SVG path viewer to measure a path and find what stops it drawing, and the SVG shape to path converter for a rect, circle or polygon that is not a path yet.