Сокращение путей

Дата публикации: 27.02.2011

Если представить себе, что дизайн — это королева, а контент — король, то пропускная способность — это королевский придворный, который поддерживает все дела, происходящие в дворце. Так как любой нетривиальный рисунок будет содержать многие десятки пар координат, элемент <path> имеет сокращенный вариант записи, чтобы представить путь минимальным количеством байт.

Команды горизонтального и вертикального lineto

Вертикальные и горизонтальные линии — банальность в графике. Логично, что это в первую очередь требует оптимизации. Горизонтальная линия определяется командой H, за которой следует абсолютная x-координата, или командой h, за которой идет относительная x-координата. Аналогично и с вертикальными линиями: команда V, за которой абсолютная y-координата и v — с относительной.

Сокращение	Эквивалент	Эффект
H 20	L 20 current_y	нарисовать линию к абсолютному положению (20, current_y)
h 20	L 20 0	нарисовать линию к (current_x+20, current_y)
V 20	L current_x 20	нарисовать линию к абсолютному положению (current_x,20)
v 20	l current_x 20	нарисовать линию к (current_x, current_y+20)

Таким образом, мы получим прямоугольник с размерами 15 единиц в ширину и 25 единиц в высоту, с координатами верхнего левого угла (12, 24).

<path d="M 12 24 h 15 v 25 h -15 z" />

Обозначения сокращений для путей

Пути можно сократить, придерживаясь следующих правил:

Можно ставить несколько серий координат после L и l, так же как делали это в элементе <polyline>. Ниже приведен код, где все шесть маршрутов рисуют один и тот же ромб (рис под кодом). Первые три — в абсолютной системе координат, следующие три — в относительной системе. Третий и шестой маршрут демонстрируют интересный прием — если Вы поставите несколько пар координат после moveto, все пары после первой будут считаться предшествующими lineto. Можно также ставить несколько одиночных координат после horizontal lineto и vertical lineto, хотя это делать бессмысленно. H 25 35 45 — тоже самое, что и H 45, а v 11 13 15 — тоже самое, что и v 39.
```
<path d="M 30 30 L 55 5 L 80 30 L 55 55 Z" />
<path d="M 30 30 L 55 5 80 30 55 55 Z" />
<path d="M 30 30 55 5 80 30 55 55 Z" />
<path d="m 30 30 l 25 -25 l 25 25 l -25 25 z" />
<path d="m 30 30 l 25 -25 25 25 -25 25 z" />
<path d="m 30 30 25 -25 25 25 -25 25 z" />
```
Все ненужные пробелы можно убрать. Нет необходимость ставить пробел после каждой командной буквы, если все команды состоят только из одной буквы. Нет необходимости ставить пробел между числом и командой, так как командная буква не может быть частью числа. Не нужно ставить пробел между положительными и отрицательными числами, так как знак минус не может быть частью положительного числа. Сократим третий и шестой маршрут из предыдущего списка:
```
<path d="M30 30 55 5 80 30 55 55Z" />
<path d="m30 30 25-25 25 25-25 25z" />
```
Еще пример «правила упущения пробелов» продемонстрирован при создании прямоугольника с шириной в 15 единиц, высотой = 25 и координатами верхнего левого угла (12, 24):
```
<path d="M 12 24 h 15 v 25 h -15 z" /> 
<path d="M12 24h15v25h-15z" /> 
```