This is just a quick note on reversing the direction of bézier curves to produce the same curve with the start and end points reversed.

The situation where this came up is the SVG map for ECODev's page. I already had the basic outline, but I needed the different regions outlined so that people could click on them. I used Sodipodi to draw the internal borders, but that was just different lines. The lines needed to be combined before they'd make shapes. And all the lines were a part of two different shapes: the border between the Brakna and Gorgol is a part of the outlines for both regions.

The problem is in how a SVG shape is filled. Take these two examples:

Both shapes are made of two bézier curves, for the top one the curves are going opposite directions and so make a circle. In the bottom one the curves are going the same way and so to make a contiguous shape it is necessary to jump back. This is what causes the crossing shape in the fill.

To avoid this it is necessary at times to reverse the direction of curves. For static curves it is pretty easy:

M S_{x},S_{y}

C P1_{x},P1_{y}
P2_{x},P2_{y}
P3_{x},P3_{y}

C Q1_{x},Q1_{y}
Q2_{x},Q2_{y}
Q3_{x},Q3_{y}

C R1_{x},R1_{y}
R2_{x},R2_{y}
R3_{x},R3_{y}

→

M R3_{x},R3_{y}

C R2_{x},R2_{y}
R1_{x},R1_{y}
Q3_{x},Q3_{y}

C Q2_{x},Q2_{y}
Q1_{x},Q1_{y}
P3_{x},P3_{y}

C P2_{x},P2_{y}
P1_{x},P1_{y}
S_{x},S_{y}

Relative curves are a bit more complex, though easily manageable:

(for the notation here, <R2> - <R3> = <R2_{x},R2_{y}> - <R3_{x},R3_{y}> = <R2_{x} - R3_{x},R2_{y} - R3_{y}>)

M S_{x},S_{y}

c P1_{x},P1_{y}
P2_{x},P2_{y}
P3_{x},P3_{y}

c Q1_{x},Q1_{y}
Q2_{x},Q2_{y}
Q3_{x},Q3_{y}

c R1_{x},R1_{y}
R2_{x},R2_{y}
R3_{x},R3_{y}

→

M <S> + <P3> + <Q3> + <R3>

c <R2> - <R3>,
<R1> - <R3>,
-<R3>

c <Q2> - <Q3>,
<Q1> - <Q3>,
-<Q3>

c <P2> - <P3>,
<P1> - <P3>,
-<P3>