can I close an SVG path without using a z parameter?

Question

Can I just finish a path where I started it and it will be considered closed or does the Z command have to be used?

For example, is this

path d="M150 0 L75 200 L225 200 L150 0" stroke="black" fill="none"

the same as this

path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="none"

or are there two points on same spot (150, 0) in the first and the second example?

Estes

Your question doesn't contain a clear problem statement. Did you try these paths? Was there a difference? Was there a problem? – Haplology

sorry for my english and lasst comment.,But yes i tried it ,they look the same! is there a difference: one point(lines join) or two spots on same spot i do not know? Potental problem culd be animation, im worrying about how it wil behave for moving, streching,... – Estes

Answer 1

There is a slight difference. If a path isn't closed, then you are liable to see missing pixels at the corner where the two ends of the path meet. Here's an example:

<svg width="360" height="100" viewBox="0 0 360 100">
  <g stroke-width="20" fill="none">
    <path d="m10 10h80v80h-80v-80" stroke="#f00" stroke-linecap="butt" />
    <path d="m130 10h80v80h-80v-80" stroke="#0a0" stroke-linecap="square" />
    <path d="m250 10h80v80h-80z" stroke="#04f" />
  </g>
</svg>

The path on the left is open, and since the two vertices at the top left are unconnected, you can see a gap where the two line caps overlap. This can be fixed by adding stroke-linecap="square" to the svg markup, but in most situations it would make more sense to use a closed path, as shown on the right.

Edit:

For curved shapes where you don't want a straight-line segment between the start and end points of the path, just put the start and end points in the same place. If your tangents are aligned in the same direction, it probably doesn't matter if you leave leave the path open unless you have the stroke-linecap set to butt, in which case the end sections will be liable to project away from the path slightly. For example:

<svg width="160" height="160" viewBox="-80 -80 160 160">
  <path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70" fill="#fcc" stroke="#f00" stroke-width="20" stroke-linecap="square"/>
</svg>

<svg width="160" height="160" viewBox="-80 -80 160 160">
  <path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70z" fill="#afa" stroke="#0a0" stroke-width="20" stroke-linecap="square"/>
</svg>

If you look closely, you can see some slight blockiness at the bottom of the red shape where the line caps extend past each other. The green shape has a closed curve, so there are no line caps to worry about.

---

■ Addendum:

Just landed back on this page after a few days, and it looks like Chrome has been updated in the meantime (currently using Chrome version 53.0.2785.116/64 bit on OS X). It now seems that open paths are closed automatically if the start and end points are coincident within a small margin of error.

Here's that first graphic again, but with three open paths where the start and end points are separated by 0.1px, 0.001px and 0.00001px respectively (from left to right):

<svg width="360" height="100" viewBox="0 0 360 100">
  <g stroke-width="20" fill="none">
    <path d="m10 10h80v80h-80v-79.99" stroke="#f00" stroke-linecap="butt" />
    <path d="m130 10h80v80h-80v-79.9999" stroke="#0a0" stroke-linecap="butt" />
    <path d="m250 10h80v80h-80v-79.999999" stroke="#04f" stroke-linecap="butt" />
  </g>
</svg>

I'm not sure I agree with this behaviour. It's liable to cause glitchiness with animated paths:

<svg width="120" height="120" viewBox="0 0 120 120">
<path id="p" d="M10 10 110 10 110 110 10 110 10 10" stroke="#f00" fill="none" stroke-width="20" />
<animate xlink:href="#p" attributeName="d" attributeType="XML" from="M9.99999 9.99999 110 10 110 110 10 110 10 10" to="M10.00001 10.00001 110 10 110 110 10 110 10 10" dur="1s" fill="freeze" repeatCount="indefinite" />
</svg>

Psychoactive

tenx everybody, i mark this as an answer. You wrote "but in most situations it would make more sense to use a closed path, as shown on the right." Ok, but what to do whit curvy/oval shapes that i not wish to close with straight line. For example path made of bazier curves. That is whay i asked this question. – Estes

@bakica If your question was about curved shapes, why did you use a polyline as your example? – Psychoactive

i chose that example for simplicyti, but yes you are right example is a bit misleading – Estes

@squeamishossifrage As of right now in Chrome version 53.0.2785.116 on Windows 10 the "Addendum" demos all seem to show the paths as open. – Lit

@Lit Maybe it's a bug then? This is what I get: i.sstatic.net/dpUSw.png (version 53.0.2785.116 on OS X, 64 bit). In the final example, the top left corner of the box is blinking on and off. – Psychoactive

@squeamishossifrage The fact that you have only tested this on Mac OSX 64-bit and on that specific version should be included in that section as well. It does not seem like intended behavior and might be a flaw of the rendering engine used on said platform. – Lit

Wow. Just tested those addendum shapes, on firefox I get open|closed|closed, on chrome open|open|open (on manjaro). Inkscape has all three open as well. – Scrummage

Answer 2

Adding Z command at the end of path or adding the starting point at the end of the path is essentially doing the same thing.And it does not add an extra point on the same spot.It just joins the points.

Imaginary