Softonic

SVG Path Builder

Step 1 / 2

Click empty area to add points. Drag points to move. Remove last with the button.

Next

The d attribute on an SVG <path> is a tiny domain-specific language: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Every letter is a command (moveto, lineto, cubic Bézier, close-path), every number is a coordinate or control point. This builder lets you click the canvas to drop anchor points and drag them to reshape, watching the path draw in real time. Toggle smoothing to turn straight segments into cubic Bézier curves, close the shape, then copy the generated d attribute or the full SVG.

How to build a path

  1. 1

    Click to add points

    Each click drops an anchor point on the canvas; the path connects them in order, starting from an `M` moveto.

  2. 2

    Drag to reshape

    Drag any point to move it, and remove the most recent one with the button. Two points is the minimum.

  3. 3

    Straight or smooth

    Leave the points joined by straight `L` segments, or toggle Smooth to convert them into cubic Bézier `C` curves.

  4. 4

    Close or leave open

    Toggle Close path to add a `Z` back to the start, or leave it open for a polyline/stroke.

  5. 5

    Copy the d attribute

    The generated `d` string is clean and space-separated, ready to paste into any SVG; you can also copy or download the whole SVG.

SVG path command cheatsheet

The visual builder above emits the M, L, C and Z commands (moveto, straight line, cubic Bézier and closepath). The rest of the command set below is a reference for reading and hand-editing any d string you paste elsewhere. Uppercase letters use absolute coordinates; lowercase use relative offsets from the current pen position.

Cmd Name Syntax
M / m Moveto M x y
L / l Lineto L x y
H / h Horizontal lineto H x
V / v Vertical lineto V y
C / c Cubic Bézier C x1 y1 x2 y2 x y
S / s Smooth cubic Bézier S x2 y2 x y
Q / q Quadratic Bézier Q x1 y1 x y
T / t Smooth quadratic Bézier T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

A worked example: a rounded tick

M 4 12 L 10 18 L 20 6

Three commands: move to (4, 12), line to (10, 18), line to (20, 6). Add stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" to the path and you have a clean checkmark glyph.

The arc command is the hardest

A rx ry x-axis-rotation large-arc-flag sweep-flag x y takes seven numbers:

  • rx, ry, ellipse radii
  • x-axis-rotation, rotation of the ellipse in degrees
  • large-arc-flag, 0 for the short arc, 1 for the long one
  • sweep-flag, 0 for counter-clockwise, 1 for clockwise
  • x, y, end point

Flip the flags one at a time to see how the same two endpoints can connect in four different ways.

Tips

  • Keep numbers small and round. Snap coordinates to the pixel grid or half-pixel; avoid 17 decimal places.
  • Prefer uppercase commands when your path is standalone. Lowercase (relative) is handy when you are going to translate the path later.
  • Close only when you fill. If a path is strictly stroked, Z adds no visual change and saves a byte.
  • Run through SVGO. Trailing zeros, duplicate spaces and repeated commands collapse nicely.

Frequently Asked Questions

Coordinates in d are in the same units as the viewBox. A path designed for viewBox="0 0 24 24" placed on viewBox="0 0 100 100" will appear in the top-left quarter. Either scale the coordinates or resize the viewBox.

When you plan to translate or repeat the path. Relative commands keep the shape portable, you can prepend a new M anywhere and everything downstream moves with it.

Yes. <polyline points="0,0 10,10 20,0"> becomes <path d="M 0 0 L 10 10 L 20 0" />. A polygon adds a final Z. Most optimisers do this automatically because paths compress better.

For drawing-in effects use CSS stroke-dasharray + stroke-dashoffset. For moving an element along the path use SMIL <animateMotion> with href pointing to the path id.

No. Path commands are computed in the browser and never sent anywhere.

Related Tools

Image Resizer

Resize an image to exact pixels, a percentage, or to fit or fill a box while keeping its aspect ratio. Runs in your browser, no upload.

QR Code Generator

Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.

Material Design Color Picker

Browse the Material Design color palette. Copy any shade (50 through A700) as HEX, RGB or HSL with one tap.

Lined Paper Generator

Make printable lined paper free. Choose college, wide or narrow rule, set line spacing in mm, paper size and a margin line, then print or download the SVG.

Flag Maker

Design a simple custom 3:2 flag in your browser with six layouts, colors, text, and a symbol. Download SVG or PNG, or open the browser print dialog.

Monogram Maker

Create a decorative one-to-three-initial monogram in your browser. Choose a frame, lettering treatment and colour, then download a local SVG or PNG file.

Tool available in other languages