SVG Path Editor & Visualizer

How to Use the SVG Path Editor

1. Paste your SVG path d attribute into the text area, or click an example button to load a preset shape.
2. View the live preview to see how your path renders as an SVG.
3. Toggle Grid, Control Points, or Bounding Box to get additional visual context while editing.
4. Review the command breakdown table below the preview to understand what each segment of your path does.
5. Use Prettify to format one command per line for readability, Minify to compress whitespace for production, or Copy to grab the path string.

Understanding SVG Path Commands

The SVG <path> element is the most powerful and versatile shape element in SVG. Its d attribute contains a sequence of commands and coordinates that define the outline of a shape. Every SVG icon, logo, and complex graphic you see on the web is ultimately built from these path commands. Understanding them gives you full control over vector graphics in the browser.

Each command is a single letter followed by its parameters. Uppercase letters use absolute coordinates (measured from the SVG origin at 0,0), while lowercase letters use relative coordinates (offsets from the current pen position). Here is every command available:

Move and Line Commands

M x y (moveto) moves the "pen" to a new starting point without drawing anything. Every path begins with an M command. L x y (lineto) draws a straight line from the current point to the specified coordinates. H x draws a horizontal line to the given x coordinate, and V y draws a vertical line to the given y coordinate — these are shorthand for common line operations.

Cubic Bezier Curves

C x1 y1 x2 y2 x y draws a cubic bezier curve from the current point to (x, y), using (x1, y1) as the control point for the start of the curve and (x2, y2) as the control point for the end. Cubic beziers are the most common curve type in SVG because they offer precise control over the curve shape. The S command is a shorthand that mirrors the previous control point, making it easy to create smooth, continuous curves.

Quadratic Bezier Curves

Q x1 y1 x y draws a quadratic bezier curve using a single control point (x1, y1) and an endpoint (x, y). Quadratic curves are simpler than cubics — they have one control point instead of two — but are less flexible. The T command mirrors the previous control point for smooth continuations, similar to how S works for cubic curves.

Elliptical Arc Command

A rx ry x-rotation large-arc-flag sweep-flag x y is the most complex SVG path command. It draws an elliptical arc from the current point to (x, y). The rx and ry parameters define the ellipse radii, x-rotation rotates the ellipse, and the two flags (each 0 or 1) select which of the four possible arcs to draw. Arcs are essential for drawing circles, pie charts, rounded corners, and any curved shape that follows an elliptical path.

Close Path

Z (closepath) draws a straight line from the current point back to the most recent M command's coordinates, closing the shape. It takes no parameters. Closed paths are required for filled shapes — without Z, the fill will still close visually but the stroke will leave a gap.

Practical Tips for Working with SVG Paths

• Start simple. Build shapes from basic M, L, and Z commands first, then add curves where needed.
• Use relative commands (lowercase) for shapes you want to reposition easily — relative coordinates make the shape independent of its starting position.
• Enable control points in this editor to visualize where bezier handles are pulling your curves. Green dots are endpoints; yellow dots are control points.
• The viewBox is your friend. SVG paths work in an abstract coordinate system. The viewBox attribute on the <svg> element maps that coordinate system to the actual display size.
• Optimize for production. Use the Minify button to remove whitespace. For larger SVGs, consider tools like SVGO that can further optimize by converting absolute to relative coordinates, removing redundant commands, and rounding decimal values.
• Test at multiple sizes. Because SVGs are vector-based, they scale to any size. Use the zoom slider to verify your path looks correct at different scales.

Common SVG Path Patterns

Many common shapes have well-known path representations. A circle can be drawn with two arc commands: M cx-r,cy A r,r 0 1,0 cx+r,cy A r,r 0 1,0 cx-r,cy. A rounded rectangle combines line and arc commands for each corner. The example paths in this editor — heart, star, and arrow — demonstrate how combining simple commands creates recognizable icons.

When working with icon libraries like Font Awesome, Heroicons, or Material Icons, the icons are defined as SVG paths. Understanding path syntax lets you customize these icons directly — adjusting proportions, adding details, or combining multiple icons into a single path.

SVG Path Data in CSS and JavaScript

SVG paths are not limited to SVG files. In CSS, you can use clip-path: path('...') to clip HTML elements to arbitrary shapes. The offset-path property lets you animate elements along an SVG path. In JavaScript, the SVGPathElement API provides methods like getTotalLength() and getPointAtLength() for measuring paths and creating drawing animations. The popular "line drawing" animation technique uses stroke-dasharray and stroke-dashoffset to progressively reveal a path.

Related Tools

Format SVG markup with the HTML Beautifier. Minify CSS that styles your SVGs. Convert SVG path coordinates with the JSON Formatter when working with path data in JavaScript. Pick colors for your paths with the Color Picker. Generate QR codes or encode SVG data with the Base64 Encoder for inline embedding.