How do I flip an SVG path vertically online?

Paste your SVG (or use the sample), then click Flip vertically. The path reflects top to bottom and the source updates instantly.

Which axis does a vertical flip use?

A vertical flip reflects across the horizontal center line. The tool uses translate(0,H) scale(1,-1), where H is the SVG viewBox height.

Leaving d unchanged avoids converting every command by hand and keeps curves editable. The flip is applied with a transform group instead.

Yes. Click Flip vertically again to remove the transform wrapper and restore the original orientation.

FAQ

Quick answers

How do I flip an SVG path vertically online?: Paste your SVG (or use the sample), then click Flip vertically. The path reflects top to bottom and the source updates instantly.
Which axis does a vertical flip use?: A vertical flip reflects across the horizontal center line. The tool uses translate(0,H) scale(1,-1), where H is the SVG viewBox height.
Why keep the original path data when flipping vertically?: Leaving d unchanged avoids converting every command by hand and keeps curves editable. The flip is applied with a transform group instead.
Can I undo a vertical path flip?: Yes. Click Flip vertically again to remove the transform wrapper and restore the original orientation.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B