0

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:

Original SVG

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:

Original SVG with triangle

Then flipping the g element using transform="scale(1, -1) translate(0, -100)" will end up flipping both:

Original SVG with triangle, flipped vertically

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.

6
  • Practically any vector application can "flip" things.. Illustrator, Inkscape, Sketch, Affinity...
    – Scott
    Nov 13 at 10:09
  • Hi. I'm not sure what the problem is here. Most vector image editors such as Illustrator or Inkscape can do this. Don't make any groups. No need to flip the rectangle either, just move it. Don't use transforms.
    – Billy Kerr
    Nov 13 at 10:11
  • Here are a couple of examples. Example 1 and Example 2
    – Billy Kerr
    Nov 13 at 10:15
  • Thank you. I'm fairly sure the issue here is I'm a software developer with little graphics design experience. Are any of these decent vector softwares on a free plan? Most online Googleable tools I've tried in browser make this edit as a code edit, not a graphical one. Nov 13 at 10:26
  • 1
    Inkscape is Free and Open Source. Illustrator is paid software made by Adobe
    – Billy Kerr
    Nov 13 at 10:43

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.