SVG-path

path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect:

В отличие от polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.

Пример фигуры с path:

<svg class="svg" width="150" height="130">
  <symbol id="s-crown">
    <path d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,10 L 130,110 z"
    fill="gold" stroke="orange" stroke-width="5"/>
  </symbol>

  <use xlink:href="#s-crown" x="5" y="7"/>
</svg>

Точки фигуры задаются в атрибуте d. В значении содержатся команды, управляющие направлением и видом линий. Координаты x и y можно разделять запятой или пробелом, но запятая наглядней.

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

Примеры ниже демонстрируют разницу между абсолютными и относительными координатами. Различие состоит во второй строке: M 20,20 L 100,150 vs m 20,20 l 100,150.

Команды в нижнем регистре ( m и l) указывают отсчитывать координаты не от верхнего левого угла полотна, а от текущей точки (пример справа):

<svg width="200" height="200">
  <path
    stroke="crimson"
    stroke-width="2"
    d="M 20,20 L 80,50
    M 20,20 L 100,150"/>
</svg>

<svg width="200" height="200">
  <path
    stroke="skyblue"
    stroke-width="2"
    d="M 20,20 L 80,50
    m 20,20 l 100,150"/>
</svg>

Команды:

M, m

M — moveto, обозначает начало новой линии — точку, с которой мы начинаем рисовать.

Параметры: x,y.

Команд M в строке может быть несколько, каждая из них будет обозначать начало новой линии:

<svg width="200" height="170">
  <path stroke="orange" stroke-width="3"
    d="M 20,20 L150,150
       M 50,20 L180,150"/>
</svg>

Z, z

Z — closepath — замкнуть фигуру, при этом рисуется линия от текущей точки до начальной. Действие этой команды не зависит от регистра, Z и z сработают одинаково.

Параметры: нет.

Z избавляет от необходимости указывать последнюю точку с координатами первой, чтобы закончить фигуру. Кроме того, если замыкать фигуру вручную, может получиться неаккуратный стык:

<svg width="200" height="180">
  <path stroke="orange" stroke-width="10" fill="gold"
    d="M 100,20 L 180,160
       L 20,160 L 100,20"/>
</svg>

Вместо последней точки используем Z и получаем аккуратно замкнутую фигуру:

<svg width="200" height="180">
  <path stroke="orange" stroke-width="10" fill="gold"
    d="M 100,20 L 180,160
       L 20,160 z"/>
</svg>

L, l

L — lineto — рисование линии.

Параметры: x,y.

Следует отметить, что писать L перед каждой точкой не обязательно:

L 80,20 L 20,100 = L 80,20 20,100

Строчки сработают одинаково, но с L удобнее, если код предполагается читать.

<svg width="200" height="180">
  <path stroke="green" stroke-width="3" fill="none"
    d="M 20,50
       L 80,20 20,100 150,50 50,150 150,120
       "/>
</svg>

H, h

H — horizontal lineto — рисование горизонтальной линии.

Параметры: x.

V, v

V — vertical lineto — рисование вертикальной линии.

Параметры: y.

С помощью этих команд очень удобно рисовать прямоугольные фигуры:

<svg width="200" height="200">
  <path stroke="lightseagreen" stroke-width="5" fill="turquoise"
    d="M 20,20
       h 160 v 160 h -80 v -80 h -80 z
       "/>
</svg>

Помимо команд для рисования прямых линий, есть несколько команд для рисования кривых. Они достаточно интересные, хотя и несколько сложнее для понимания.

Пунктирная линия в примерах (где возможно) показывает, что получается без команды, задающей кривую. Для меня вспомогательная линия сделала несколько понятнее прицип работы этих команд.

C, c

C — curveto

Параметры: x1 y1 x2 y2 x y

S, s

S — smooth curveto

Параметры: x2 y2 x y

Q, q

Q — quadratic Bézier curveto

Параметры: x1 y1 x y

T, t

T — smooth quadratic Bézier curveto

Параметры: x1 y1 x y

A, a

A — elliptical arc

Параметры: rx ry x-axis-rotation large-arc-flag sweep-flag x y

Чтобы получить более полное представление о работе этих функций читайте спецификацию.