SVG paths are described by the d attribute — a compact string of drawing commands like M 10 10 L 20 20 C 30 30, 40 40, 50 50 Z. Editing a path by typing coordinates is possible but slow. The Rankato SVG Path Editor gives you a visual canvas: anchor points show up as draggable handles, bezier controls appear on hover, and every drag updates the d-string in real time. It's a lightweight alternative to opening Illustrator or Figma just to nudge a single point.
Anchor points and bezier handles
Every SVG path is a sequence of commands (Move, Line, Curve, Arc, Close). The editor shows each command's endpoint as a solid circle (an anchor point) and, for bezier curves, the control points as smaller circles connected by dotted lines. Click to select, drag to move. Hold Shift while dragging to constrain to horizontal/vertical. Hold Alt to break a smooth curve into a corner.
Add, remove, and split commands
Right-click any anchor for options: Delete removes the command; Convert to corner/smooth changes how neighboring curves connect; Split segment inserts a new anchor halfway between this one and the next. To add a completely new command at the end, use the toolbar: L (line-to), C (cubic bezier), Q (quadratic bezier), A (arc), or Z (close path).
d-string editor
The right panel shows the live d-string with syntax highlighting. Edit the string directly and the canvas updates; edit the canvas and the string updates. Copy the string with the Copy d button, or copy the full path element (<path d="…" fill="…" />) with Copy path.
Viewport and grid
Zoom with mouse wheel, pan with space+drag. Toggle a grid overlay for pixel-snapping. Set the viewBox in the header — the editor works in SVG coordinate space, so a 100×100 viewBox with a path at (50, 50) puts that anchor at the visual center regardless of your canvas size.
Import, export, and undo
Paste any SVG path element into the import field and the editor parses the d attribute directly. Or upload a full SVG file and pick which path to edit from a list. Ctrl+Z / Ctrl+Y for undo/redo with 100 levels of history. Export the full SVG (with your path plus any other elements from the original) or just the edited path.