Say I have a simple SVG file, as an example, this:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 100 100" fill="none">
<g>
<rect x="0" y="50" width="100" height="50" fill="orange"/>
</g>
</svg>
Visually:
I want to flip this vertically, but without the use of CSS or SVG code. E.g., without using transform
attribute or similar functionality in CSS. Is there any tool/software that can achieve this?
The reason for this desire is that if I use transform
then any sub-elements in the SVG will also adhere to this flip, and I'll have to "counterflip" to keep the original look. For example if I added a triangle to the original image:
Then flipping the g
element using transform="scale(1, -1) translate(0, -100)"
will end up flipping both:
I realize that perhaps you can group elements different and such to solve it, but ideally and for this question I have a tool that can flip the SVG graphics so that I can save it again and avoid having to use transform for this particular adjustment.