Auto-Closing Paths

Background

Paths in SVG are closed with the 'z' or 'Z' closepath commands. This works OK for paths consisting of straight lines but is problematic for paths which begin and end with curved lines:

(m 100,50) (l 100,50) (l -100,50) (z)

Example of a path with straight lines. The path string is d="m 100,50 100,50 -100,50 z". The green square marker is at the start of the path, the orange at the mid point and the red at the end. (An aside: I would really have liked to use Cameron's 'marker-segment' to put arrows on the lines.)

But using the closepath command is problematic for paths which begin and end with curved lines:

(m 150,50) (c 50,0 50,100 0,100) (c -50,0 -50,-100 0,-100) (z)

Example of a path with curved lines. The path string is d="m 150,50 c 50,0 50,100 0,100 -50,0 -50,-100, 0,-100 z". The 'z' creates a zero length close path.

The particular example above results in a zero length path segment. In the more general case, rounding errors can lead to the closepath segment having a small non-zero length. This can effect how many markers are drawn and how they are aligned.

Note that at the Tokyo F2F meeting we resolved that on a closed path, the marker orientation at the beginning/ending of the path is derived from the end of the last path and the start of the first path. We also resolved that zero length path segments are ignored in determining marker orientation.

There appears to be a descrepancy between how the browsers render the middle marker when a path is closed. Firefox uses the direction of the path before the 'z' segment, Chrome uses the direction of the path at the start of the path.

Example of a path with curved lines.
Left: The path uses relative path commands.
Right: The path uses absolute path commands.
Markers are drawn differently between Firefox, Chrome, and Opera (Presto).

Example with small error in end point alignment, 'z' path is 0.01 px to the right.
Left: The path uses relative path commands.
Right: The path uses absolute path commands.

Example with small error in end point alignment, 'z' path is 0.01 px to the left.
Left: The path uses relative path commands.
Right: The path uses absolute path commands.
Browsers treat 'z' section as a real path for both marker placement and line-joins.

Example with small error in end point alignment, 'z' path is 0.0001 px to the left.
Left: The path uses relative path commands.
Right: The path uses absolute path commands.
Browsers treat 'z' section as a real path for marker placement but not line-joins.

Possible Solutions

New commands

It has been pointed out that the 'z' command is essentially an 'l' command where the point is starting point of the path segment. We could extend this concept by adding new path commands with one less point than normal. The missing point would be the first point in the path segment:

First point token

Use a non-numerical parameter to indicate the first point in the path segement should be used:

First point 'z' token

Use a 'z' to "replace" a missing point:

Bonus topic

What should be drawn at the start/end of a closed path? Proposal: to match shapes, a mid-marker should be drawn by default. If either a start-marker or end-marker is specified, it overrides the mid-marker.