Как правильно написать формулу path

Все приведенные в вопросе формы записи path правильные,- как вам удобно, так и пишите, соблюдая основное правило - положительные числа координат в формуле патча должны быть разделены пробелами или запятыми, или буквами команд патча.

Буквенные команды формулы патча

Все буквенные команды патча, могут быть в верхнем и нижнем регистре. Верхний регистр указывает на то, что последующая координата абсолютная (absolute), а нижний – относительная (relative).

M – (moveto x,y) – переместить указатель в точку с абсолютными координатами (x,y)
Эти координаты считаются началом пути.

m – (relative) - относительное начало пути применяется для сложных, пересекающихся или параллельных путей. Другими словами, когда в одном патче несколько подпатчей.

L - (lineto) нарисовать линию от текущей точки к указанной с абсолютными координатами (x,y) Эту команду можно не указывать, заменив её пробелом между соседними группами координат.
z - замыкание контура. Патч будет замкнут, если координаты конечной и начальной точки пути будут совпадать. Можно не указывать координаты конечной точки и путь будет замкнут, если после координат предпоследней точки будет написана команда -z

Ниже пример кода и поясняющей графики:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="280" height="280" viewBox="0 10 300 300"> 
 <path d="M 10 210 L 110 10 L 210 210 z" fill="#9DE281" stroke-width="3" stroke="#FDD000"  /> 
</svg>

Красная точка - это начальная точка path - M 10 210

<path d="M 10 210 L 110 10 L 210 210 z"/>

• M 10 210 – перемещаем перо в начальную точку точку х=”10″, y=”210″`

• L 110 10 – рисуем линию до точки х=”110″, y=”10″

• L 210 210 – рисуем линию до точки х=”210″, y=”210″
• замыкаем контур – “z”

Горизонтальные (H,h) и вертикальные (V,v) линии

H (horizontal lineto) - эта команда для рисования горизонтальных линий, последующие две цифры указывают горизонтальные координаты начала и конца линии.

V (vertical lineto) - команда для рисования вертикальных линий, последующие две цифры указывают вертикальные координаты начала и конца линии.

Пример

Рисуем вертикальную линию из точки M 110 210 в точку V 110 10.

<path d="M 110 210 V 110 10" />

В формуле патча обязательно должны быть указаны координаты начальной точки M 110 210 или другой точки из которой будет нарисована вертикальная линия.

Пример совместного использования вертикальных и горизонтальных линий.

Допустим нужно нарисовать ступеньки:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"> 
<path d="M 0 200 V 200 150 h 0 50 V 150 100 H 50 100 V 100 50 H 100 150 V 50 0 H 150 200 V 0 200 z"                         style="stroke:red; fill: greenyellow"/> 
</svg>

Использование вертикальных и горизонтальных линий с абсолютными координатами, как в примере выше, заметно увеличивает код. При использовании относительных координат код становится намного короче, так как задается только относительная длина h от последней точки пути для горизонтальных линий и высота v для вертикальных линий. Сам процесс рисования становится проще, так как не нужно высчитывать абсолютные расстояния от начала координат.
Для сравнения,- ниже код рисует те же ступеньки с использованием относительных величин h и v .

Пример рисования с помощью относительных величин h и v

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"> 
<path d="M 0 200 v-50 h50 v-50 h50 v-50 h50 v-50 h50  v200 z" style="stroke:red; fill: greenyellow"/> 
</svg>

Так как начало координат (0,0) полотна SVG находится в левом верхнем углу, то положительное направление оси “X” будет вправо, а оси “Y” – вниз. Поэтому команда v -50 соответствует перемещению вверх на 50px от текущей точки по вертикали, а команда h -60 влево на 60px по горизонтали.

Более подробно здесь и здесь

Сокращенная формула записи патча

Можно еще сократить код, убрав пробелы, между командами и цифрами. Для разделения положительных чисел применяется запятая.

<path d="M0,200v-50h50v-50h50v-50h50v-50h50v200z"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"> 
<path d="M0,200v-50h50v-50h50v-50h50v-50h50v200z" style="stroke:red; fill: greenyellow"/> 
</svg>