Hacker News Digest

SVG <path>: краткий путеводитель

<path> — единственный способ рисовать сложные фигуры и кривые в SVG. Синтаксис пугает, но разобравшись, становится удобным.

Основы

• Атрибут d — последовательность команд, как «рецепт» для пера.
• Каждая команда начинается с буквы и получает координаты как аргументы.
• Предыдущая точка автоматически становится началом следующей команды.
• Используйте пробелы и запятые — читаемость важнее байтов.

Команды

• M x,y — поднять перо и переместиться в точку.
• L x,y — прямая линия до точки.
• C x1 y1, x2 y2, x y — кубическая Безье.
• Q x1 y1, x y — квадратичная Безье.
• A rx ry x-axis-rotation large-arc-flag sweep-flag x y — дуга эллипса.
• Z — замкнуть путь к начальной точке.

Относительные координаты

Буквы в нижнем регистре (m, l, c…) двигают перо относительно текущей позиции, а не от начала координат.

Цепочки кривых

Повторяйте команды, чтобы строить сложные формы без лишних M.

Анимации

Изменяя d через CSS или JS, можно плавно морфить фигуры.

Советы

• Начинайте путь всегда с M.
• Для читаемости группируйте команды построчно.
• Проверяйте результат в интерактивном редакторе.