SVG Path Editor

Paste SVG path data to visualize it on a coordinate grid. Scale, translate, adjust colors, and download as SVG.

15.1Kuses
8.3/10(208)

Sample Paths

Preview

044881212161620202424

Path Info

Bounding Box
-6.2, -1.0 - 22.0, 17.8
Path Length
0.0
Characters
92
Commands
10

Transformed Path Data

M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z

How to Use

  1. Paste your SVG path "d" attribute data.
  2. See the live preview with a coordinate grid.
  3. Adjust scale, translate, stroke, and fill.
  4. Copy the optimized path or full SVG markup.
  5. Download as an SVG file.

Features

  • Visual preview with coordinate grid
  • Scale and translate controls
  • Custom stroke and fill colors
  • Path info (bounding box, length, commands)
  • Copy optimized path data or SVG markup
  • Download as SVG file
  • Sample paths library
⚡ Pro OptionsSponsored

Some links on this page are affiliate links. If you click and make a purchase, we may earn a commission at no extra cost to you.

Recommended Products

Ad

Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.

Disclaimer: This tool is provided as-is for informational and educational purposes only.

ToolBird Assistant

Find the right tool instantly

Hey! I'm ToolBird Assistant. Tell me what you need and I'll find the right tool for you.