Path Visualizer

Inspect every path, shape, and element in an SVG. Hover to highlight individual elements, view their attributes, and edit path data inline with a live preview.

Input SVG

Shapes & Paths Hover to highlight · Click d to edit inline

Paths and shapes will appear here.

Live Preview

Preview will appear here...

All processing is done locally in your browser. No data is sent to our servers.

How to Use

Paste or Upload

Paste SVG markup into the input area or upload an .svg file. The live preview and element list update instantly.

Hover to Highlight

Hover over any element in the shape list to highlight it in the preview. Other elements are dimmed so you can clearly identify which shape corresponds to which path.

Edit Inline

Click on a path's d attribute in the list to edit it directly. The preview updates in real time as you type. Copy the modified SVG when done.

Supported Shape Types

All standard SVG shape elements are detected and listed. Complex SVGs with dozens of paths are supported - the list is scrollable.