Reversing an SVG Path

Question

Is there a simple method for reversing an SVG path? How can I make this start at the top left, rather than the bottom right?

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="548.9px" height="620px" viewBox="0 0 548.9 620" xml:space="preserve">
    <path d="M305.3,461.7c-13.6,2.2-66,1.3-99.6-21.9c-77.4-53.3-42.5-147.1-95.4-204.1c-42.2-45.6-98-59.2-60-131.7"/>
</svg>

Zany

transform="scale(-1,-1)" perhaps. You'll need a translae too though. – Internationalism

Answer 1

Use Inkscape:

1. Open this svg file in Inkscape.
2. select the path
3. click Menu -> Path -> Reverse
4. save the file or open the xml editor in Inkscape to find the new path data.

Or use javascript. get and reverse each path segment.

Willams

almost the same in Sketch ) – Crone

in order to open the XML editor click on Edit > XML Editor – Heliotrope

Answer 2

You can use svgpathtools.

from svgpathtools import parse_path
path = parse_path("M305.3,461.7c-13.6,2.2-66,1.3-99.6-21.9c-77.4-53.3-42.5-147.1-95.4-204.1c-42.2-45.6-98-59.2-60-131.7")

print(path.reversed().d())

Stanwin

Answer 3

If you use Figma, you can paste the SVG as "vector", then right-click and choose "Flip Horintally" or "Flip Vertically" (can be both).

Ignaciaignacio