SVG путь <path>

svg path

<path> - самый универсальный элемент. С его помощью можно нарисовать любую простую фигуру svg. По своей универсальности он обходит <polyline> за счёт того что может рисовать кривые. Для определения пути нужен один атрибут d в котором указываются координаты точек и команды определяющие как рисовать.

Пять команд для рисования линий в SVG <path>

Для начала определим начало пути. Для этого воспользуемся командой M. Эта команда не рисует а перемещает курсор в точку с заданными координатами. Есть два варианта этой команды. М заглавная указывает что координаты абсолютные, а m указывает на относительные координаты(точка отсчёта - предыдущая точка пути). Вобще такой порядок определения работает для всех команд пути. Код ниже переместит курсор в точку с координатами 10 10

<path d="M10 10"/>

Для рисовария прямых линий есть три команды. Произвольная линия рисуется командой L или l. Если нужна горизонтальная линия используем команду H или h. В это случае указывается только одна координата x. Координата по y остаётся такойже как у предыдущей точки. Также есть команда для вертикальных линий V или v. Здесь указывается координата y. Когда указываете координаты не забывайте что точка отсчёта расположена в верхнем левом углу. При движении вправо увеличивается координата x. При движении вниз увеличивается координата y. Координаты могут принимать отрицательные значения. Пример ниже нарисует квадрат со стороной 80.

<path d="M10 10 h80 v80 h-80 L10 10"/>

Разберём путь по точкам.

  1. Сначала поставили курсор в точку 10 10 (команда M10 10)
  2. Рисуем горизонтальную линию 80px (h80). Так как h в нижнем регистре то точкой отсчёта были координаты предыдущей точки. Такую же линию можно нарисовать командой H90.
  3. Далее рисуем вертикальную линию на 80px вниз (v80). Тоже самое можно сделать командой V90.
  4. Мы находимся в нижнем правом углу. Команда h-80 рисует линию 80px влево.
  5. Последнюю линию я нарисовал с помощью команды L, хотя можно было воспользоваться ещё одной V или командой Z.

Z - закрывает путь связывая последнюю точку с первой. Такой же квадрат можно нарисовать так

<path d="M10 10 H90 V90 h-80 Z"/

Кривые <path> SVG

<path> умеет три вида кривых. Кубическая и квадратная кривые Безье и дуга.

Команда A рисует часть эллипса(дугу). Также как для элипса, для дуги нужно указать два радиуса rx и ry. Далее указываем на сколько градусов повёрнута ось X элипса. Следующие два значения определяют какую часть элипса показывать. Последними идут координаты конца дуги. На координатах и радиусах останавливаться не будем. Здесь всё понятно. Разберёмся с углом поворота. В случаес с графикой лучше один раз увидеть. Код ниже рисует две дуги. Вторая повёрнута на 45 градусов.

<path d="M10 70
           H50
           A20 50 0 1 1 100 70
           H150
           A20 50 45 1 1 200 70
           h50"/>

Дуга это часть пути. Чтобы получить дугу нужно нарисовать эллипс через две контрольные точки. Проблема в том, что при заданных радиусах через две точки можно нарисовать четыре дуги. Как сделать так чтобы была нарисована та, что нам нужна? Для этого есть два значения - флага. Первый определяет должна ли дуга быть больше 180 градусов(1 - больше 180, 0 - меньше 180). Второй параметр определяет направление движения дуги. Через две точки мы можем провести дугу по часовой(значение 1) и против часовой(значение 0). Чтобы было понятней смотрим пример ниже. Первая и четвёртая дуга это части одного эллипса, втораяя и третья часть такогоже элипса но расположенного ниже. Предположим нам нужна третья дуга. Дуга больше 180 градусов значит первый параметр 1. Движение по дуге в отрицательную сторону, значит второй параметр 0.

<path d="M10 70
           H50
           A20 50 45 1 1 100 70
           H120
           A20 50 45 0 1 170 70
           h20
           A20 50 45 1 0 250 70
           h20
           A20 50 45 0 0 320 70
           h10"/>

Кривые Безье

Для кубической кривой Безье Нужно задать три набора координат. Первые идут координаты контрольной точки начала линии, вторыми - координаты контрольной точки конца линии и последними координаты конечной точки линии. Если вы пользовались какой нибудь программой для svg графики вы наверняка помните, что если нарисовать линию и кликнуть по конечной точке, то появиться линия с точкой на конце. Если тянуть за эту точку в разные стороны то кривизна исходной линии будет изменяться. Это и есть контрольная точка. Контрольные точки определяют наклон линии. Функция Безье ведёт плавную линию от наклона в начале до наклона в конце. Для рисования таких линий используют команду C x1 y1, x2 y2, x y

Чтобы объеденить кривые Безье используют команду S x2 y2, x y. В этом случае значение первой контрольной точки принимается зеркальным значению второй конрольной точки предыдущей линии.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

Если S не следует за другой командой S или C, то предпологается что обе контрольные точки одинаковые.

В SVG доступен ещё один тип кривой Безье. Квадратичная кривая проще чем кубическая. Нужна только одна контрольная точка, которая определяет наклон кривой в начальной и конечной точке. Рисуется с помощью команды
Q x1 y1, x y
Также как для кубической функции есть возможность объеденять несколько квадратичных с помощью команды
T x y
Функция работает только если перед ней была T или Q функция. В противном случае будет нарисована прямая.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

Обе кривые дают схожие результаты. Кубические позволяют боле точно настроить вид кривой.

Вот всё больше мне нравится этот формат. Непонятно другое. Есть у меня png-файл весом 21 кб... Я его открываю в Иллюстраторе и сохраняю как svg... Вес получается 29 кб... Выходит, что мне проще использовать png? Или я что-то не так делаю?

Если писать шарп код например в визуал студии - то большую часть кода пишет студия и следит за правильным синтаксисом.
Так вот спрашиваю в каком редакторе писать SVG чтобы все скобки, кавычки появлялись автоматически и чтобы при нажатии например пробела всплывала подсказка с параметрами, которые в данном конкретном месте можно использовать. Или таких редакторов не существует?