SVG Path Editor: Edit, Generate & Create SVG Paths Online

You right-click an icon on a website, hit "Inspect Element," and see something like this staring back at you:

It looks like someone fell asleep on a keyboard. But that single line of code draws a perfect checkmark inside a circle — scalable to any size, crisp on any screen, and weighing less than 200 bytes.

SVG paths are the backbone of every vector graphic on the web. Every icon, logo, illustration, and custom shape you see in a browser is ultimately defined by path commands like the ones above. Understanding how to read, edit, and create these paths gives you complete control over your vector designs.

In this guide, you'll learn exactly how SVG paths work, what each command does, and how to use a free SVG path editor to create and modify paths visually, in code, or with AI assistance — no design degree required.

SVG gives you several basic shapes to work with: <rect> for rectangles, <circle> for circles, <line> for straight lines, and <polygon> for multi-sided shapes. These are convenient, but limited. The <path> element is the universal shape — it can draw anything the other elements can, plus arbitrary curves, arcs, and complex outlines that no basic shape can express.

The magic lives in the d attribute (short for "data"). This attribute contains a series of drawing commands that tell the browser where to move the pen, where to draw lines, and how to curve between points. Think of it as a set of turn-by-turn directions for drawing a shape.

Here's a simple example. This <rect> element:

Draws the exact same rectangle as this <path>:

The path version says: move to point (10, 10), draw a horizontal line to x=90, draw a vertical line to y=70, draw a horizontal line back to x=10, then close the shape. Same visual result, but with paths you can add curves, notches, or any modification you want.

You can paste either version into SVGMaker's SVG Code Editor and see it render instantly with a live preview. For a full technical reference, see the MDN <path> documentation.

Every SVG path is built from a small set of commands. Once you learn these, you can read and write any path data by hand — or confidently edit it in any svg path editor.

Movement and Lines

These are the foundation. Every path starts with a move command, then draws straight lines between points.

• M x y — Move the pen to a starting point without drawing anything.
• L x y — Draw a straight line from the current position to (x, y).
• H x — Draw a horizontal line to x.
• V y — Draw a vertical line to y.
• Z — Close the path by drawing a straight line back to the starting point.

Here's a triangle drawn with just three commands:

The pen moves to the top center (50, 10), draws a line to the bottom right (90, 90), then to the bottom left (10, 90), and closes the triangle with Z. Understanding these basic commands is the first step to becoming your own svg path generator.

Curves — Bézier and Arcs

Straight lines get you surprisingly far, but curves are where paths truly shine.

• C x1 y1, x2 y2, x y — Cubic Bézier curve. Uses two control points (x1,y1) and (x2,y2) to shape the curve, ending at (x, y). This is the most common curve command in production SVGs.
• S x2 y2, x y — Smooth cubic Bézier. Automatically mirrors the previous control point, creating seamless curve continuations.
• Q x1 y1, x y — Quadratic Bézier curve. Uses one control point for a simpler curve.
• T x y — Smooth quadratic Bézier. Mirrors the previous control point.
• A rx ry rotation large-arc-flag sweep-flag x y — Elliptical arc. Draws a section of an ellipse — useful for rounded corners and circular shapes.

Here's a cubic Bézier curve with annotated control points:

This draws a smooth arch: starting at (10, 80), curving upward through two control points at (40, 10) and (65, 10), then ending at (95, 80). The control points act like magnets that pull the line into a curve without the line actually passing through them.

For the full specification, see the W3C SVG Paths reference.

Absolute vs. Relative Coordinates

Every command has two forms. Uppercase letters use absolute coordinates (measured from the SVG's origin point). Lowercase letters use relative coordinates (measured from the current pen position).

Relative coordinates are particularly useful when you want to move or duplicate a path segment — the shape stays intact regardless of where it starts.

You understand the syntax. Now let's put it into practice. There are three approaches to editing SVG paths, and SVGMaker offers all three in a single platform.

Method 1: Visual Path Editing with SVGMaker's SVG Editor

If you prefer working visually, SVGMaker's online Editor lets you manipulate paths the way you'd work in a traditional design tool — but entirely in the browser.

Upload or paste any SVG, and you can:

• Select and drag anchor points to reshape paths directly on the canvas.
• Adjust Bézier curve handles to fine-tune the curvature of any path segment.
• Use boolean operations (combine, intersect, subtract) to merge or cut paths against each other — essential for creating complex shapes from simple ones.
• Remove elements with the Magic Eraser without disturbing surrounding paths.
• Manage layers to isolate, lock, reorder, or group path elements in multi-part SVGs.

This gives you a full-featured path editor online without installing any software. When you're done, export your work as SVG, PNG, React components, React Native code, or HTML/CSS — whatever your project needs.

Method 2: Code-First Path Editing with the SVG Code Editor

For developers and designers who think in code, SVGMaker's Code Editor gives you direct access to the raw SVG markup with a live preview panel that updates as you type.

The editor is powered by Monaco — the same engine behind VS Code — so you get syntax highlighting, auto-complete, and real-time validation out of the box. You can edit path d attributes character by character and see the visual result change instantly.

Here's a practical example. Start with a straight-topped shape:

Now replace the top line with a cubic Bézier curve:

The flat top becomes a smooth arch. In the Code Editor, you see this change in real time — no save-and-refresh cycle. You can also use the one-click Prettier formatter to clean up messy path data instantly.

For developers who need precision, this is the most direct svg path editor available.

Method 3: AI-Powered Path Modifications

Not comfortable editing coordinates by hand? SVGMaker's AI Editor lets you modify SVG paths using plain English.

Upload an SVG and type instructions like:

• "Make the corners rounded"
• "Simplify this path"
• "Add a curve to the top edge"
• "Make the icon thicker"

The AI interprets your request and modifies the underlying path data accordingly. This is ideal for non-technical users, quick exploratory changes, or batch modifications across multiple elements.

Editing existing paths is one thing. Creating them from nothing is where the svg path creator skills come together.

Step 1: Plan Your Shape

Before writing any code, sketch the shape you want — even a rough pencil drawing on paper works. Identify the key points where the outline changes direction and decide which segments should be straight lines versus curves.

Step 2: Write the Path Data

Translate your sketch into path commands. Start with an M command at your first point, then connect the dots with L (lines) or C/Q (curves). Close the shape with Z.

Here's a simple star built entirely with line commands:

Ten points, ten commands, one star. Each L command connects to the next point of the star, alternating between outer tips and inner valleys.

Step 3: Preview and Refine

Paste your code into SVG Code Editor to see it render immediately. Tweak coordinate values until the shape looks right. If you need to fine-tune curves visually, open the result in the SVG Editor and drag anchor points to adjust.

For generating icons from scratch without writing any path code at all, try the AI Icon Generator — describe what you need in plain text and get a production-ready SVG in seconds.

Here are three copy-pasteable examples you can use as starting points for your own designs.

Example 1: A Rounded Rectangle (Using Arcs)

The A command draws elliptical arcs, which are perfect for rounded corners:

Each corner uses an arc with a 20px radius. This is exactly what the rx and ry attributes on <rect> do under the hood — but as a path, you can make each corner a different radius.

Example 2: A Smooth Wave (Using Cubic Béziers)

Waves are one of the most common decorative SVG elements — section dividers, backgrounds, and banners all use them:

Two cubic Bézier curves create a complete S-wave. The control points alternate above and below the center line (y=50), creating symmetrical peaks and valleys. Chain more C commands to extend the wave across any width.

Example 3: A Custom Checkmark Icon

Combining lines and moves to create a practical UI icon:

Three points, two lines — that's all a checkmark needs. The stroke-linecap and stroke-linejoin attributes round the endpoints and corner for a polished look.

Need production-ready icons without hand-coding paths? SVGMaker's AI Icon Generator creates them from text prompts with optimized, clean path data.

Raw SVG paths — especially from AI generators or design tool exports — often contain unnecessary bloat. Here are five ways to slim them down:

1. Reduce decimal precision. Path coordinates like M 12.847362 24.193847 can safely be rounded to M 12.85 24.19. Most screens can't display sub-pixel differences beyond two decimal places.
2. Use relative coordinates. Lowercase commands (l, c, q) often produce shorter strings than their absolute equivalents because the offset values tend to be smaller numbers.
3. Use shorthand commands. Replace L x y with H x or V y when a line is purely horizontal or vertical. Use S instead of C when chaining smooth curves.
4. Remove redundant moves. Multiple consecutive M commands with no drawing between them are wasted bytes. Keep only the final one.
5. Automate with SVGO. SVGO is a free optimizer that handles all of the above automatically. Its convertPathData plugin rounds coordinates, removes redundant segments, and converts absolute commands to relative when it saves space.

After optimizing your paths, you can convert your SVGs to other formats with SVGMaker's Image Converter or explore our complete guide on SVG optimization techniques.

SVG paths are the foundation of every vector graphic on the web. The d attribute may look cryptic at first, but it's built from a simple, learnable set of commands — moves, lines, curves, and arcs. Once you understand these building blocks, you can read, edit, and create any shape imaginable.

Whether you prefer dragging anchor points in a visual editor, writing path commands directly in code, or describing what you want in plain English and letting AI handle the syntax, SVGMaker gives you all three approaches in one platform. Open the SVG Editor to start editing paths visually, or paste your first <path> into the SVG Code Editor and watch it render in real time.

The best way to learn SVG paths is to start editing them. Pick any icon on the web, inspect its path data, and start changing numbers. You'll be fluent faster than you think.