Skip to main content
Back to Tools
Web Tools

SVG Path Editor

Parse, visualize, and transform SVG path d-attribute data. Convert between absolute and relative coordinates, scale, translate, and inspect individual path commands. Runs entirely in your browser — your data never leaves your machine.

svg path editor transform graphics vector

Published June 1, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Paste an SVG path d attribute value, and the tool parses it into individual commands (M, L, C, Q, A, Z, etc.). View a live preview of the path, convert between absolute and relative coordinates, and apply scale/translate transformations.

Features

  • Full SVG path support: all command types — M, L, H, V, C, S, Q, T, A, Z (absolute and relative)
  • Live preview: real-time SVG rendering of the parsed path
  • Command breakdown: human-readable description of each path command
  • Coordinate conversion: toggle between absolute and relative path notation
  • Transform: scale and translate path coordinates interactively
  • Bounding box: automatic calculation of path dimensions
  • 5 presets: triangle, heart, star, arc, rounded rectangle
  • Private: runs entirely in the browser — no data transmitted

Use Cases

  • Debugging SVG paths from design tools or icon libraries
  • Converting relative paths to absolute for easier editing
  • Scaling or repositioning SVG path data
  • Understanding complex SVG path commands visually
  • Extracting and modifying paths from existing SVG files