About

This tool transforms standard SVG geometric primitives - such as rectangles, circles, and polygons - into complex path elements. While primitives are human-readable, paths are the universal language of vector rendering engines.

Why convert?

Animation & Morphing: You cannot smoothly morph a rect into a circle. By converting both to path elements, you normalize the data structure, allowing interpolation libraries (like GreenSock or Anime.js) to animate the d attribute.
CSS Motion Paths: Objects can only follow a path defined by a path data string.
CNC & Plotters: Many older vector cutters and G-code converters typically ignore high-level shapes and require explicit coordinate commands.

The Math:

We solve the geometry for you. For example, a rounded rectangle isn't just a box; it is a composite of 4 linear segments and 4 elliptical arcs. The tool calculates the exact tangent points using the SVG spec rule: if r_x + r_x > width, the radii are scaled down to prevent overlap.

Formulas

The core logic involves translating geometric properties into Path Data commands.

For a Circle C(cx, cy, r):

Start = (cx - r, cy)
Cmd = M Start + a r,r 0 1,0 (2×r),0 a r,r 0 1,0 -(2×r),0

This creates two semi-circular arcs that form a perfect closed circle.

Reference Data

Shape	Input Attributes	Output Path Command (Approximation)
Rectangle	x, y, w, h	M x,y h w v h h -w z
Circle	cx, cy, r	M (cx-r),cy A r,r 0 1,0 (2r),0 ...
Ellipse	cx, cy, rx, ry	M (cx-rx),cy A rx,ry 0 1,0 (2rx),0 ...
Line	x1, y1, x2, y2	M x1,y1 L x2,y2
Polygon	points="..."	M x1,y1 L x2,y2 ... Z

Frequently Asked Questions

Yes. The converter clones all non-geometric attributes (id, class, style, data-*, transform, fill, stroke) from the original shape to the new path element.

We strictly follow the W3C SVG implementation. If the corner radii (rx/ry) are too large for the rectangle's width/height, they are proportionally scaled down to fit.

This tool is optimized for user-space coordinates (numbers/pixels). Percentage values require knowledge of the viewBox or parent container size, which is ambiguous in a raw code snippet. We recommend using absolute units for 100% accuracy.

Mathematically, yes. A circle defined by a center and radius is geometrically identical to a path defined by arc commands. However, the file size may increase slightly due to the verbosity of path data.