SVG Path Editor

SVG Path

Path Data (d attribute)

Example Path

Path Operations

Scale

X Axis

Y Axis

Translate

X Offset

Y Offset

Rotate

Angle (Degrees)

Output Options

Precision (Decimal Places)

Compress Output

SVG Preview

Stroke Color

Stroke Width

Fill Color

Fill Opacity

Path Data

Number of Commands

0

Path Length

0

Bounding Box Width

0

Bounding Box Height

0

Optimized Path

About SVG Paths:

SVG Pathis one of the most powerful elements in SVG, capable of creating shapes of any form. A path consists of a series of commands and coordinates that define how the shape is drawn.

Common Path Commands:

M/m: Move To
L/l: Line To
H/h: Horizontal Line To
V/v: Vertical Line To
C/c: Cubic Bézier Curve

S/s: Smooth Cubic Bézier Curve
Q/q: Quadratic Bézier Curve
T/t: Smooth Quadratic Bézier Curve
A/a: Elliptical Arc
Z/z: Close Path

Tip:Uppercase letters represent absolute coordinates, lowercase letters represent relative coordinates. Use this editor to conveniently view, edit, and optimize SVG paths.