Loading…
Developer Tools
Draw and edit SVG paths visually on an interactive canvas. Click to add points, drag to move them, and adjust control handles for Bézier curves. Import existing paths or export clean SVG code.
Follow these simple steps to get instant, accurate results directly in your browser:
Paste your `<path d="...">` string into the path data editor.
View interactive anchor points on the canvas and modify coordinate values.
Copy the optimized path string or download the cleaned SVG vector file.
The SVG Path Editor is a visual vector path inspector and coordinate builder that visualizes, scales, and edits SVG `<path d="...">` commands in real time.
SVG path syntax uses concise commands to define vector shapes: M (moveto), L (lineto), H/V (horizontal/vertical lineto), C/S (cubic Bézier curves), Q/T (quadratic Bézier curves), A (elliptical arc), and Z (closepath). This tool parses coordinate commands, displays anchor points and curve handles visually, and lets you modify coordinate coordinates with instant visual rendering.
Frontend developers and icon designers can optimize path precision, scale bounding boxes, and strip excessive decimal coordinates directly in the browser.
Renders vector paths with interactive anchor and control handle overlays.
Round excessive float decimals (e.g. 12.345678 to 12.35) to reduce file size.
Adjust SVG viewBox dimensions to ensure proper centering and responsiveness.
Your proprietary graphics and vector artwork are never sent to external servers.
Simplify complex SVG icon paths exported from Illustrator or Figma for smaller bundle sizes.
Align path point counts and curve anchors for smooth CSS or Framer Motion morphing.
Identify rogue coordinates or misaligned arc commands causing vector rendering glitches.
Explore complementary utilities for your workflow