🔒 All processing happens in your browser. No data is sent to any server.
FREE

SVG Path Command Inspector

← All Tools
Move
Line
Cubic Bezier
Quadratic Bezier
Arc
Close

Preview

Paste a path to preview

Commands

Parse a path to see commands

What is SVG Path Editor?

SVG Path Editor is a visual tool for creating and editing SVG path data — the d attribute string that defines complex vector shapes using path commands (M, L, C, Q, A, Z). Click to place anchor points, drag control handles to adjust bezier curves, and see the SVG path string update in real time. Convert between absolute and relative commands, simplify paths, and copy the output directly into your SVG or CSS.

SVG path commands: M/m (moveto), L/l (lineto), H/h (horizontal line), V/v (vertical line), C/c (cubic bezier — two control points), Q/q (quadratic bezier — one control point), A/a (arc), S/s (smooth cubic bezier), T/t (smooth quadratic), Z/z (close path). Uppercase commands use absolute coordinates; lowercase use relative coordinates relative to the current point.

SVG paths are the foundation of icon design. All SVG icon libraries (Heroicons, Lucide, Phosphor, Material Icons) store icons as path strings. Understanding path commands lets you: modify existing icons, create custom icons from scratch, optimize paths for smaller file size, and animate specific path segments using CSS or JavaScript.

How to Use

  1. Click on the canvas to place anchor points — the tool creates a path between them.
  2. Click and drag while placing a point to create a curved bezier segment.
  3. Click an existing anchor point to select it, then drag its control handles.
  4. The path string updates in real time in the output panel — copy it to use in SVG or CSS.
  5. Use 'Simplify' to reduce the number of path points while maintaining visual fidelity.

Examples

Create a simple arrow

Result: M 10 20 L 50 20 L 40 10 M 50 20 L 40 30 → right arrow path

Round corner rectangle (path version)

Result: M 20 10 Q 10 10 10 20 L 10 80 Q 10 90 20 90 L 80 90 Q 90 90 90 80 L 90 20 Q 90 10 80 10 Z

Edit existing icon path

Result: Paste path from Heroicons → select node → drag to adjust → copy modified path

Frequently Asked Questions

What is the difference between cubic and quadratic bezier curves in SVG?

Quadratic bezier (Q/q): one control point between the start and end. The curve is 'pulled toward' the control point. Simpler, but less control. Cubic bezier (C/c): two control points — one near the start and one near the end. This gives independent control over the curve's entry and exit direction. More flexible. Most drawing apps (Figma, Illustrator) use cubic beziers for paths. Quadratic beziers are faster to compute and are used internally in font rendering (TrueType fonts use quadratic; PostScript/OpenType use cubic).

How do I convert an SVG path from absolute to relative commands?

Uppercase commands (M, L, C) use absolute coordinates (relative to the SVG's 0,0 origin). Lowercase (m, l, c) use coordinates relative to the previous point. To convert: manually calculate the delta (current_absolute - previous_absolute), or use tools like SVGO (a Node.js SVG optimizer) with convertPathData plugin. Relative paths are more portable — you can translate them by changing just the initial moveto. svgpath npm package can convert between the two programmatically.

How do I optimize SVG path data for smaller file size?

Strategies: (1) Reduce decimal precision — coordinates with 0-1 decimal places are usually visually indistinguishable from 3+ decimals. (2) Use relative commands (lowercase) — shorter numbers when coordinates are small. (3) Remove redundant points — many points on a straight line → use a single L or H/V command. (4) Use SVGO (Node.js CLI or online): svgo icon.svg --output icon-min.svg. SVGO typically reduces SVG file size by 20-40%. (5) For icons: consider using a cubic-to-quadratic converter if your renderer supports it.

What is the SVG arc command and how does it work?

Arc command: A/a rx ry x-rotation large-arc-flag sweep-flag x y. rx/ry: ellipse radii. x-rotation: rotate the ellipse. large-arc-flag: 0 = take the short arc, 1 = take the long arc. sweep-flag: 0 = counter-clockwise, 1 = clockwise. x/y: endpoint. Between any two points, there are four possible arcs with given radii — the flags select which one. Example: A 50 50 0 1 0 50 100 (half circle from current point to 50,100). Arcs are commonly used for pie chart segments, rounded corners, and ring/donut shapes.

How do I animate an SVG path?

Two main approaches: (1) CSS transition on the d attribute (experimental, limited support): @keyframes morph { from { d: path('M 0 0 L 100 0'); } to { d: path('M 0 0 L 100 100'); } }. The paths must have the same number of commands. (2) JavaScript with GSAP's MorphSVGPlugin: gsap.to('#shape', { duration: 1, morphSVG: '#target' }) — GSAP handles path interpolation even with different point counts. (3) SVG SMIL animation: .

Related Tools