Skip to content
ToolQivo

SVG Path Editor

Inspect, tidy and transform SVG path data.

Image Tools Reviews Free · no sign-up

Render

Commands

Quick Tool Overview

The SVG Path Editor breaks a path attribute into its commands, lists each with its arguments, renders it with the points marked and calculates the bounding box. From there it can be scaled, flipped, translated or normalised to a standard viewBox, which is what makes icons from different sources into one consistent set.

What it does
Inspects and transforms SVG path data
You give it
A path d attribute or a whole SVG
You get back
A breakdown, a render and a tidied path
Best for
Icon work and hand-editing SVG
Image Tools Free, unlimited use No sign-up Runs in your browser

About the SVG Path Editor

A path is the one part of SVG that is genuinely hard to read: a single attribute holding dozens of commands and hundreds of numbers with no separators to speak of.

This breaks it apart. Every command is listed with its arguments and what it does, the path is rendered with its points marked, and the bounding box is calculated. From there it can be transformed — scaled, flipped, translated, or normalised so it fits a standard viewBox, which is what you need when combining icons from different sources into one set. Rounding the precision usually halves the length on its own.

Key features of the SVG Path Editor

Every command listed

Each with its arguments and what it does, which is the only way to read a path attribute.

Points marked on the render

The anchor and control points drawn over the shape, so a command maps to something visible.

Normalise to a viewBox

Rescale any path to a standard box, which is how mismatched icon sets are unified.

Precision rounding

Editors export fifteen decimals; rounding to two commonly halves the path with no visible change.

Transforms baked in

Scale, flip and translate applied to the coordinates themselves rather than left as a transform attribute.

How to use the SVG Path Editor

  1. 1

    Paste path data

    Just the d attribute, or a whole SVG to pull the paths out of.

  2. 2

    Read the breakdown

    Every command listed with its arguments and the points marked on the render.

  3. 3

    Transform it

    Scale, flip, translate, or normalise to a standard viewBox.

  4. 4

    Round and copy

    Reducing the decimals usually halves the length with no visible change.

Frequently asked questions

Uppercase takes absolute coordinates, lowercase relative ones. Relative paths are usually shorter; absolute ones are far easier to reason about.

Reviews of the SVG Path Editor

What people who use the SVG Path Editor think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the SVG Path Editor. It takes half a minute and no account.

Write the first review

More image tools