What is the difference between Q and C curves?

A quadratic curve has one control point and a cubic has two. Cubic gives finer control over the shape at each end and is what most drawing tools emit; quadratic is simpler and sufficient for a gentle arc.

Why does my path disappear when I change the viewBox?

Because path coordinates are in the SVG user coordinate system, which the viewBox defines. Changing the viewBox changes what portion of that space is visible, so a path can end up entirely outside the frame while still being perfectly valid.

Can the SVG path generator create a path from an image or text?

No, it does not trace photos or turn letters into outlines. You draw with line, quadratic and cubic curve tools, or import path data or an SVG file whose first path element becomes editable. The result can be copied as a d attribute or downloaded as an SVG.

SVG Path Generator

Build an SVG path by placing points and curves, and read the d attribute it produces, which is the most direct way to learn what the commands mean.

Browser tool

Canvas

Click to add a point with the selected tool. Drag points and handles, or select one and use the arrow keys (Shift for 10 units).

6 commands · bounds 40, 40 to 160, 171.4

Commands

Every number is editable by keyboard. Lines are numbered in path order.

1. Mto
Command 1 to x
Command 1 to y
2. Cc1
Command 2 control1 x
Command 2 control1 y
c2
Command 2 control2 x
Command 2 control2 y
to
Command 2 to x
Command 2 to y
3. Cc1
Command 3 control1 x
Command 3 control1 y
c2
Command 3 control2 x
Command 3 control2 y
to
Command 3 to x
Command 3 to y
4. Qc
Command 4 control x
Command 4 control y
to
Command 4 to x
Command 4 to y
5. Qc
Command 5 control x
Command 5 control y
to
Command 5 to x
Command 5 to y
6. Z

Export

viewBox 0 0 200 200

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <path d="M 40 120 C 40 60 100 40 100 40 C 100 40 160 60 160 120 Q 160 160 100 170 Q 40 180 40 120 Z" fill="#b5a0ff" stroke="#6544c9" stroke-width="2"/>
</svg>

File name

.svg

About SVG Path Generator

The d attribute of an SVG path is a dense little language of single-letter commands, and the most direct way to learn it is to draw something and read what the letters became. Free and online, with no watermark on the output and no sign up required. The path is built in the page itself.

How to use SVG Path Generator

Place your pointsEach becomes a command in the path data as you go.
Add curves where you need themQuadratic and cubic curves take control points, and dragging one shows exactly what it governs.
Read the d attributeIt updates as you draw, which is the part that teaches the notation.
Copy the pathReady to drop into an SVG element or a component.

Uppercase is absolute, lowercase is relative

M moves to a coordinate; m moves by an offset from where the pen already is. The same distinction applies to every command — L and l, C and c, and so on. A path built from relative commands can be moved by editing only its first command, which is why generated paths often use them and why mixing the two by hand produces such confusing results.

What it does not do

Complex artwork belongs in a drawing application. This is for simple shapes and for understanding the syntax, not for illustration.
A path has no notion of a stroke or a fill on its own — those are separate attributes on the element that renders it.