SVG Path Editor

• M x y — move to (x, y). Starts a new subpath. Almost every path starts with M.
• L x y — line to (x, y). Straight line from the current point.
• H x — horizontal line to x. Keeps y unchanged.
• V y — vertical line to y. Keeps x unchanged.
• Q cx cy x y — quadratic Bezier to (x, y) with one control point at (cx, cy).
• C c1x c1y c2x c2y x y — cubic Bezier (smoother) with two control points.
• A rx ry rot large sweep x y — arc to (x, y). Most complex; "rotate by rot, large arc flag, sweep flag".
• Z — close path back to the most recent M.

Lowercase versions of every command (m, l, h, v, q, c, a, z) interpret coordinates as relative to the current point rather than absolute. Most tools generate absolute paths for clarity; some hand-optimization uses relative for compactness.

• Straight lines (L, H, V) — polygons, technical diagrams, isometric drawings.
• Quadratic Bezier (Q) — soft curves. One control point per curve; computationally cheaper. Heart shapes, organic blobs.
• Cubic Bezier (C) — full control. Two control points per curve; matches what design tools (Figma, Illustrator) produce. The "Bezier curve" people draw in tools is cubic.
• Arc (A) — circular and elliptical arcs. The hardest command to hand-write because of the rotate/large/sweep flags. Best to use a tool for these.
• Hidden state — M starts a subpath. Multiple Ms in one path create disconnected segments (e.g., the dot above a lowercase "i"). Z closes back to the most recent M.

• SVGO — the standard optimizer. Removes redundant commands (Q vs L for nearly-straight curves), reduces precision (8 decimals → 2 decimals), merges consecutive same-command operations.
• Path simplification — Visvalingam or Ramer-Douglas-Peucker algorithms reduce point count while preserving visual shape. Useful for hand-drawn paths with too many points.
• Decimal precision — 2-3 decimal places is usually enough for screen rendering at typical sizes. More precision = larger SVG files for no visual benefit.
• Combine subpaths — multiple shapes in one <path> element with `M` separators is smaller than multiple <path> elements.
• Stroke vs fill — outlining shapes is often smaller than filling. Compare both.

• You need a custom shape (icon, illustration) and want to draw it visually rather than in vector software, then export the path.
• You inherited an SVG with a deeply-nested path and want to understand what each command produces — step through visually.
• You are tweaking an icon's curve and want a live preview rather than guess-and-refresh.
• You are learning SVG paths and want a sandbox to experiment with each command.

• It will not replace Figma / Illustrator for complex illustration. Multi-path drawings, gradient fills, complex effects belong in real vector tools. Export from there and clean up here.
• It will not animate paths. SVG path animation (path morphing, dashed offset for "draw-on" effects) is a separate concern; CSS / GSAP / anime.js handle it.
• It will not convert bitmaps to paths. Tracing (Image → SVG) needs autotracing tools (Illustrator's Image Trace, Inkscape, online vectorizers).