How do I convert an SVG rect to a path?

Click Rect to path. x, y, width, and height become a closed d (M/H/V/Z). Rounded corners are written as A arcs, not as a four-point polygon.

Are rounded rect corners (rx/ry) kept as arcs?

Yes. rx and ry become four A commands so the corner radius stays. A sharp rect (no rx) is only H and V.

A polygon is already a point list. A rect is x/y/width/height (and optional rx). This page does not touch .

No. SVG Rect to React Native emits a react-native-svg . This page stays SVG: the tag becomes .

FAQ

Quick answers

How do I convert an SVG rect to a path?: Click Rect to path. x, y, width, and height become a closed d (M/H/V/Z). Rounded corners are written as A arcs, not as a four-point polygon.
Are rounded rect corners (rx/ry) kept as arcs?: Yes. rx and ry become four A commands so the corner radius stays. A sharp rect (no rx) is only H and V.
How is rect-to-path different from converting a polygon to a path?: A polygon is already a point list. A rect is x/y/width/height (and optional rx). This page does not touch <polygon>.
Does this convert SVG rect to React Native?: No. SVG Rect to React Native emits a react-native-svg <Rect>. This page stays SVG: the tag becomes <path>.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B