SVG Path Generator
Click-to-build SVG path generator with line, quadratic, and cubic modes.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this svg path generator
- Click anywhere on the canvas to add a point. Points appear in order and are numbered 1, 2, 3…
- Click a numbered point to remove it; or use "Clear points" to start over.
- Pick a Segment mode — Straight (L), Quadratic Bézier (Q), or Cubic Bézier (C). The mode controls how points are joined.
- Tick "Close path" to append `Z`, closing the shape; turn on "Snap to 20px grid" for clean coordinates.
- Press Generate path, then Copy d="" to grab just the `d` attribute, or Copy full SVG for the whole `<svg>` markup.
About this svg path generator
The SVG path generator is a visual editor for the `d=""` attribute that drives every SVG `<path>` element. Click the canvas to drop points, and the tool joins them with whatever segment type you select: `L` for straight lines, `Q` (quadratic Bézier) for soft curves that bow upward between points, or `C` (cubic Bézier) for richer S-curves. Optional "Close path" appends the `Z` command, turning the open path into a closed shape that can be filled. A grid is drawn behind the canvas, and you can snap new points to a 20px lattice for clean coordinates. The preview SVG renders inside the same `<svg>` you build, so the live preview is the actual output, not a stand-in.
Worked example: drop four points at (40,240), (160,60), (280,200), (360,100) on the 400×300 canvas, segment mode `L`, close path off. The tool emits `d="M 40 240 L 160 60 L 280 200 L 360 100"` and the full SVG `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><path d="M 40 240 L 160 60 L 280 200 L 360 100" fill="none" stroke="#6366f1" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg>` — a zig-zag polyline. Switch to mode Q and the same points become smooth quadratic curves; tick Close path and Z makes the shape paintable.
FAQ
- What does each path command mean?
- M = moveto (start a new sub-path), L = lineto (straight line), Q = quadratic Bézier (one control point), C = cubic Bézier (two control points), Z = closepath. The generator builds these commands automatically based on your segment mode.
- Why does the cubic mode look almost the same as the quadratic mode?
- For straight-ish point arrangements the two often look similar. Cubic gives you a much wider range of curvature (it has two control points instead of one), but the control points here are derived heuristically rather than dragged interactively. For finer control, copy the output and edit the C control points by hand.
- Is the output a valid SVG path?
- Yes — the tool emits well-formed `d=""` strings whose first command is always `M` (moveto), then a sequence of `L`/`Q`/`C` commands, optionally terminated with `Z`. Paste the full SVG into a browser, an `<img src="data:image/svg+xml,…">`, or a React/Vue component and it will render.
- Why do my coordinates snap to 20-pixel steps?
- The "Snap to 20px grid" toggle is on by default. It rounds new points to the nearest 20-pixel grid intersection, which makes path data more readable and easier to edit by hand. Turn it off for free-form precision.
- How do I edit an existing point?
- Remove it (click its numbered label) and drop a replacement where you want it. The current version of the tool does not support dragging existing points — for complex paths, generate a rough version here and refine the coordinates in your editor.