Reverse an SVG Path: What It Changes and How to Do It

The short answer

Reversing an SVG path means redrawing the same shape with its points in the opposite order. The start point becomes the end point, and every segment is traced backward. The geometry stays the same, but the path's direction changes. That direction controls how holes fill under the nonzero fill rule, where dashes and stroke animations begin, which way markers point, and which way text runs along the path.

You can reverse a path with a vector editor's reverse-direction command or by rewriting the path data by hand. Editors are the safer choice for complex logo artwork. Manual editing works well for short paths and helps you understand what the editor is doing.

What path direction actually affects

• Fill with the nonzero rule: in a compound shape, such as a letter O or a ring in a favicon mark, the inner contour usually has to run opposite to the outer one to render as a hole. If both run the same way, the hole can fill in solid.
• Fill with the evenodd rule: direction does not change the fill. Overlapping areas alternate between filled and empty regardless of winding.
• Stroke dashes and line-drawing animations: dash patterns and stroke-dashoffset effects start at the path's first point, so reversing the path makes the drawing run the other way.
• Markers: start and end markers swap places, and oriented markers flip to follow the new direction.
• Text on a path: text follows the path from start to end, so a reversed path can move text to the other side of a curve or turn it upside down.
• A single closed shape with no holes or overlaps: the filled result looks the same either way.

Why this matters for favicon SVG files

Favicon marks are often simplified logos built from compound paths, such as counters in letters, rings and cut-out symbols. If an exported SVG favicon shows a filled-in hole, check the winding direction and the fill-rule attribute first. Either reverse the inner contour or set fill-rule to evenodd on that path. Both fixes keep the file as true vector artwork.

Before you start, confirm the file actually contains editable paths. An .svg extension does not guarantee it. An SVG can wrap an embedded raster image in an image element, and some downloads are raster previews saved under a vector-sounding name. If the file has no path, polygon or similar shape elements, there is nothing to reverse. You would need to redraw or trace the artwork instead.

Reversing a path in a vector editor

Inkscape has a Reverse command in its Path menu that flips the direction of the selected paths. Adobe Illustrator offers a reverse path direction control in its Attributes panel for compound paths. Other editors have similar commands under different names. Menu locations and labels change between versions, and the supplied material did not confirm details for specific releases, so check the documentation for the version you use.

After reversing, re-export and inspect the result. Some exporters rewrite path data, convert relative commands to absolute ones, or merge shapes. Preview the output at favicon sizes and with any fill-rule setting your build pipeline adds.

Reversing path data by hand

For short paths, you can rewrite the d attribute yourself. Prepare the path first so that every segment can be reversed on its own:

• Convert relative commands (lowercase letters) to absolute ones (uppercase), so each point is a fixed coordinate.
• Expand the smooth shorthands S and T into full C and Q commands, because their implied control points depend on the segment before them.
• Turn H and V into L commands with both coordinates, which makes the point list easier to reorder.
• Treat each subpath, meaning each M command, separately. Reverse its segment order, and move the subpath's M to what was its last point.

Straight segments are the easiest case: list the points in the opposite order. In this square, starting at the same corner and going the other way reverses the winding:

Original:  M 10 10 L 90 10 L 90 90 L 10 90 Z
Reversed:  M 10 10 L 10 90 L 90 90 L 90 10 Z

For a cubic Bézier, the new segment starts at the old end point. List the two control points in the opposite order, and end at the old start point. Quadratic curves keep their single control point.

Original:  M 0 0 C 10 20, 30 20, 40 0
Reversed:  M 40 0 C 30 20, 10 20, 0 0

For an elliptical arc (A), keep the radii, the rotation and the large-arc flag. Toggle the sweep flag between 0 and 1, and swap the start and end points. If you leave the sweep flag unchanged, the reversed arc bulges the wrong way.

Original:  M 10 50 A 40 40 0 0 1 90 50
Reversed:  M 90 50 A 40 40 0 0 0 10 50

Hand editing becomes error-prone on long logo paths with hundreds of segments. For production artwork, use an editor or a well-tested path library, and keep the manual method for small fixes and for checking results.

A note on permission

Reversing a path is a technical edit to the artwork. Being allowed to download a logo file is not the same as being allowed to modify it, redistribute it, or use the brand's trademarks and fonts. If the logo belongs to someone else, check its license or brand guidelines before you change and republish it, even for a favicon.

Gaps in the available evidence

No specific tools, software versions, files or test results were supplied for this article. The explanations above rely on general SVG path behavior, not on documented testing of particular products. Confirm editor menu names and exporter behavior against the documentation for your own setup.