SVG Paths

The most powerful SVG element. Create any shape with path commands.

Path Syntax

The path element uses the d attribute with a series of commands:

<path d="M 10 10 L 90 90" />
Tip: Uppercase commands use absolute coordinates, lowercase use relative coordinates.

Path Commands Reference

Move To: M/m

Move the pen without drawing.

M x y     // Move to (x, y)
m dx dy   // Move relative
Starts a new subpath

Line To: L/l, H/h, V/v

Draw straight lines.

L x y    // Line to (x, y)
H x      // Horizontal line to x
V y      // Vertical line to y

Cubic Bezier: C/c, S/s

Smooth curves with two control points.

C x1 y1, x2 y2, x y
S x2 y2, x y  // Smooth (mirrors previous)

Quadratic Bezier: Q/q, T/t

Curves with one control point.

Q x1 y1, x y
T x y    // Smooth continuation

Arc: A/a

Elliptical arc curves.

A rx ry rotation large-arc-flag sweep-flag x y

rx, ry:          Radii of the ellipse
rotation:        X-axis rotation in degrees
large-arc-flag:  0 = smaller arc, 1 = larger arc
sweep-flag:      0 = counter-clockwise, 1 = clockwise
x, y:            End point

Close Path: Z/z

Draw a line back to the start.

M 10 10 L 90 10 L 50 90 Z  // Triangle

Common Examples

Triangle

<path d="M 50 10 L 90 90 L 10 90 Z"/>

Heart

M 50 30
C 50 20, 30 0, 10 20
C -5 40, 50 80, 50 80
C 50 80, 105 40, 90 20
C 70 0, 50 20, 50 30 Z

Pro Tips

  • Use relative commands for portable paths
  • S and T commands for smooth curves
  • Minimize commands with SVGO
  • Use the Path Visualizer to debug
💡

SVG Paths Explained Simply

Imagine you're giving directions to someone holding a pen over a piece of paper. "Put your pen down at this spot. Now draw a line to that corner. Next, curve smoothly over to this point." That's exactly what an SVG path does—it's a sequence of instructions that tells the browser how to draw a shape, one command at a time.

The heart of every path is the d attribute, which contains these drawing instructions. Each instruction starts with a letter that describes what to do: M means "move to" (pick up the pen and place it somewhere new), L means "draw a line to," C means "draw a curve to," and Z means "close the shape by drawing back to the start." The numbers after each letter are the coordinates—where on the canvas that action should happen.

Curves might seem intimidating at first, but they follow a simple principle: control points. Think of them like magnets that pull the line toward them as it travels from one point to another. A Quadratic curve uses one magnet (control point), while a Cubic curve uses two, giving you more control over the shape. The curve doesn't pass through these control points—it just bends toward them, creating smooth, natural-looking arcs.

The beauty of SVG paths is that once you understand these basic commands, you can create virtually anything—from simple arrows and icons to intricate illustrations and animated graphics. Many design tools like Figma, Illustrator, and Inkscape generate path code automatically, so you can draw visually and then fine-tune the code when needed. Start with simple shapes using M, L, and Z, then gradually experiment with curves as you get comfortable.

Frequently Asked Questions

What is an SVG path?
An SVG path is the most versatile element in SVG graphics. It uses a series of commands in the 'd' attribute to draw any shape imaginable—lines, curves, arcs, and complex illustrations. Think of it as giving precise drawing instructions to a pen that follows your commands exactly.
What does the 'd' attribute in SVG path mean?
The 'd' attribute (short for 'data') contains the path commands that define the shape. It's a string of letters and numbers where letters represent commands (like M for move, L for line) and numbers represent coordinates or parameters. For example, 'd="M 10 10 L 90 90"' means move to point (10,10) then draw a line to point (90,90).
What is the difference between uppercase and lowercase path commands?
Uppercase commands (M, L, C, etc.) use absolute coordinates—exact positions on the SVG canvas. Lowercase commands (m, l, c, etc.) use relative coordinates—distances from the current position. For example, 'L 50 50' draws to the absolute point (50,50), while 'l 50 50' draws 50 units right and 50 units down from wherever the pen currently is.
How do I draw a curve in SVG path?
SVG offers three types of curves: Cubic Bezier (C command) uses two control points for precise curve shaping; Quadratic Bezier (Q command) uses one control point for simpler curves; and Arc (A command) draws elliptical curves. For smooth, flowing curves, Cubic Bezier (C) is most commonly used: 'C x1 y1, x2 y2, x y' where the control points pull the curve in their direction.
What does the Z command do in SVG paths?
The Z command (or lowercase z) closes the current path by drawing a straight line from the current position back to the starting point of the path. It's commonly used to create closed shapes like triangles, polygons, or any shape that needs to connect back to its origin. For example, 'M 0 0 L 100 0 L 50 100 Z' creates a closed triangle.
How do I draw a circle using SVG path?
While SVG has a dedicated circle element, you can draw a circle using path arcs. Use two arc commands to create a full circle: 'M cx-r,cy A r,r 0 1,0 cx+r,cy A r,r 0 1,0 cx-r,cy' where cx,cy is the center and r is the radius. This technique is useful when you need to animate or morph the circle into other shapes.
What is the SVG arc command and how does it work?
The arc command (A) draws elliptical curves and has the syntax: A rx ry rotation large-arc-flag sweep-flag x y. rx and ry are the ellipse radii, rotation tilts the ellipse, large-arc-flag (0 or 1) chooses between the smaller or larger arc, sweep-flag (0 or 1) determines clockwise or counter-clockwise direction, and x,y is the endpoint. It's the most complex but powerful path command.
How can I optimize SVG path code?
To optimize SVG paths: use relative commands to reduce coordinate lengths; remove unnecessary whitespace and decimal precision; use shorthand commands like H and V for horizontal and vertical lines; leverage the S and T commands for smooth curve continuations; and use tools like SVGO to automatically optimize your paths while preserving visual quality.
What is the difference between Cubic and Quadratic Bezier curves?
Cubic Bezier curves (C command) use two control points, giving you more precision and the ability to create S-shaped curves. Quadratic Bezier curves (Q command) use only one control point, making them simpler but less flexible—they can only curve in one direction. Cubic curves are preferred for complex illustrations, while Quadratic curves work well for simple, consistent arcs.
Can I animate SVG paths?
Yes, SVG paths can be animated in several ways. You can use CSS animations with stroke-dasharray and stroke-dashoffset to create drawing effects. SMIL animation allows morphing between path shapes. JavaScript libraries like GSAP or Anime.js provide powerful path animation capabilities. For morphing to work, both paths should have the same number and types of commands.