¿Odias los anuncios? Ir Sin publicidad Hoy 

Visualizador y Editor de Rutas SVG

ColorDesarrolladorImagen

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

SVG Path Data (d attribute)

View

viewBox

Four numbers: min-x min-y width height

Estilo

Stroke

Stroke Width

Fill

Fill Color

Transformar

Coordinates

Precisión

Decimal places to keep when rounding coordinates.

Overlays

Show grid

Number command endpoints

Show Bezier control points

Animate path drawing

PROD.

Lado cliente

#	Command	Parameters	End point
El resultado aparecerá aquí

Transformed d attribute

Standalone SVG

ANUNCIO · ¿ELIMINAR?

Guía

Visualizador y Editor de Rutas SVG

Paste any SVG path d-attribute and see it rendered live. This tool breaks each command down into its parameters and absolute end point, draws Bezier control-point handles on top of the preview, and rewrites the path between absolute and relative coordinates with configurable precision. It is built for SVG authors who want to understand, clean up, or hand-tune the raw d string without leaving the browser.

Cómo Usar

Paste the contents of your path d-attribute (or click “Try an example”) into the input.
Adjust the viewBox to match the canvas your path was authored on. The default 0 0 200 200 works for the built-in examples.
Set stroke color, stroke width, and fill to preview how the path will render.
Pick a coordinate mode — keep as-is, convert to absolute, or convert to relative — and a precision from 0 to 6 decimal places.
Toggle the overlays to show or hide the grid, numbered command endpoints, Bezier control handles, and draw animation.
Copy the transformed d attribute, or download the full standalone SVG.

Características

Live path preview – renders your d string into an SVG canvas with configurable stroke, fill, and viewBox.
Command breakdown table – lists every command in order with its parameters, labeled arguments, and absolute end point.
Bezier control-point overlay – draws dashed handle lines and orange control dots for C, S, Q, and T commands so you can see how curves are shaped.
Numbered endpoints – marks the start of the path in green and every subsequent command endpoint in blue with an index label.
Absolute ↔ relative conversion – rewrites the entire d string in either coordinate system without changing the rendered shape.
Coordinate rounding – trims decimal precision from 0 to 6 places to shrink and normalize path data.
Grid overlay – auto-sized grid lines and zero-axis highlighting tied to the viewBox.
Path length – uses the browser getTotalLength API to report the total drawn length in viewBox units.
Draw animation – optional stroke-dashoffset animation that draws the path on a loop for visual debugging.
Standalone SVG export – copy or download a complete SVG file with the current viewBox and style settings applied.

Supported Path Commands

M / m – moveto: starts a new sub-path at the given point.
L / l – lineto: draws a straight line to the given point.
H / h – horizontal lineto: draws a horizontal line to the given x.
V / v – vertical lineto: draws a vertical line to the given y.
C / c – cubic Bezier: two control points plus an endpoint.
S / s – smooth cubic Bezier: reflects the previous cubic control point automatically.
Q / q – quadratic Bezier: single control point plus an endpoint.
T / t – smooth quadratic Bezier: reflects the previous quadratic control point automatically.
A / a – elliptical arc: radii, x-axis rotation, large-arc and sweep flags, plus endpoint.
Z / z – closepath: draws a straight line back to the sub-path start.

 Preguntas frecuentes

What does the d attribute on an SVG path contain?

The d attribute is a string of single-letter commands followed by coordinate arguments. Each command moves a virtual pen: M sets its starting position, L draws a straight line, C and Q draw Bezier curves, A draws arcs, and Z closes the sub-path back to its start.
What is the difference between absolute and relative commands?

Uppercase commands such as M, L, and C treat their coordinates as absolute positions in the SVG user space. Lowercase commands such as m, l, and c treat their coordinates as offsets from the current pen position, which makes them smaller when a path is drawn relative to a moving start point.
Why do smooth Bezier commands only take half the arguments?

S and T commands reflect the previous cubic or quadratic control point across the current pen position automatically. The renderer already knows where the first control point should be, so only the remaining control point and the endpoint need to be supplied.
What are the two flag digits in an arc command?

An elliptical arc command has two flag arguments between its rotation and endpoint. The large-arc flag picks between the shorter and longer arc that connects the two points, and the sweep flag picks between the two possible sweep directions around the ellipse center.
Does rounding coordinates change the rendered shape?

Rounding clips the number of decimals each coordinate keeps. Very small precision values can visibly move control points and curve endpoints, while a precision of two or three decimals is usually indistinguishable from the original while producing a much shorter d string.