Helpful resources ▼
  Download   Pricing   Buy

SVG Path Data – как рисовать линии, дуги и кривые Безье

Элемент <path> рисует контур любой фигуры, объединяя линии, дуги и кривые Безье. Это самый гибкий SVG-элемент для создания простых и сложных открытых или замкнутых путей. Геометрия path-элемента задается одним атрибутом d, который содержит последовательность команд.

В этой статье вы узнаете, как:

  • читать самые распространенные SVG-команды в атрибуте d;
  • рисовать прямые, горизонтальные и вертикальные линии, а также замкнутые фигуры;
  • использовать команду A для рисования SVG-дуг;
  • строить квадратичные и кубические кривые Безье с контрольными точками;
  • выбирать гладкие команды T и S, когда сегменты кривой должны соединяться без резких переходов.

Группы команд SVG path

Группа командКомандыОписание
MovetoM, mЗадает начальную точку нового sub-path.
LinetoL, l, H, h, V, vРисует прямые линии горизонтально, вертикально или до любой координаты.
ClosepathZ, zЗакрывает текущий sub-path, соединяя его с начальной точкой.
Cubic BézierC, c, S, sРисует кубические кривые Безье с двумя контрольными точками.
Quadratic BézierQ, q, T, tРисует квадратичные кривые Безье с одной контрольной точкой.
Elliptical ArcA, aРисует эллиптические дуги с радиусами, поворотом и flag-параметрами.

Команды в верхнем регистре используют абсолютные координаты, а команды в нижнем регистре – относительные координаты. Все координаты записываются без единиц измерения и интерпретируются в текущей пользовательской системе координат SVG. Удобный способ читать path data – представить текущую точку, которая движется по пути: M задает начало рисования, каждая команда рисования оставляет текущую точку в новой конечной точке, а следующая команда начинается уже оттуда.

Как писать SVG path data

  1. Создайте элемент <path> и запишите его геометрию в атрибуте d.
  2. Начните с M x y, чтобы переместить текущую точку в начало пути.
  3. Добавьте команды линий, дуг или кривых, например L, H, V, A, Q или C.
  4. Используйте команды в верхнем регистре для абсолютных координат или команды в нижнем регистре для координат относительно текущей точки.
  5. Закройте контур командой Z, если path должен стать заполненной фигурой.
  6. Добавьте fill, stroke и stroke-width, чтобы path был видимым.

Линии и path-элементы

Moveto (M, m)

Любой SVG path начинается с команды moveto, которая записывается как M x y. Координаты x и y указывают текущую точку, с которой должен начаться path.

Lineto (L, l, H, h, V, v)

Три команды lineto рисуют прямые линии от текущей точки к новой:

КомандаПараметрыОписание
L / lx yРисует линию до указанной точки.
H / hxРисует горизонтальную линию; координата y не меняется.
V / vyРисует вертикальную линию; координата x не меняется.

После каждой команды path текущая точка перемещается в конечную точку этой команды. Следующая команда рисования начинается уже из новой позиции.

Closepath (Z, z)

Команда Z закрывает текущий sub-path, рисуя прямую линию обратно к его начальной точке. Параметры для этой команды не нужны.

Пример: квадраты через команды lineto

Нарисуем квадрат с помощью команд lineto ( lineto.svg):

1<svg height="400" width="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 30 30 L 110 30 L 110 110 L 30 110 L 30 30" fill="transparent" stroke-width="2" stroke="black" />
3    <path d="M 50 50 H 130 V 130 H 50 Z" fill="transparent" stroke-width="2" stroke="blue" />
4    <path d="M 70 70 h 80 v 80 h -80 Z" fill="transparent" stroke-width="2" stroke="red" />
5</svg>

SVG-квадраты, нарисованные черной командой L, синими командами H и V и красными относительными командами h и v

На иллюстрации слева подписаны команды path, а справа показан отрисованный SVG-результат. Это помогает сравнить три способа нарисовать один и тот же квадрат: явные команды L, компактные H и V, а также относительные команды в нижнем регистре.

Рисование SVG-дуг

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

Примечание: Одну и ту же начальную и конечную точки можно соединить четырьмя разными дугами. large-arc-flag выбирает малую или большую дугу, а sweep-flag выбирает направление рисования.

Синтаксис: A rx ry x-axis-rotation large-arc-flag sweep-flag x y

ПараметрЗначение
rx, ryРадиусы эллипса.
x-axis-rotationПоворот оси x эллипса в градусах.
large-arc-flag0 = малая дуга, 1 = большая дуга.
sweep-flag0 = против часовой стрелки, 1 = по часовой стрелке.
x yАбсолютные координаты конечной точки дуги.

Команда a работает так же, но считает конечную точку относительно текущей точки.

1<svg height="500" width="700" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2    <path d="M10,20 A 30,30 0 0,0 40,70" style="stroke:#FFA500; stroke-width:1; fill:none" />
3    <path d="M10,20 A 30,30 0 1 0 40,70" style="stroke: #FF0000; stroke-width:1; fill:none" />
4    <path d="M10,20 A 30,30 0 0 0 40,70 A 30,30 0 1 1 10,20" style="stroke: #FFA500; stroke-width:1; fill:#FFD700" transform="translate(70,0)" />
5</svg>

Примеры команды SVG arc с малой дугой, большой дугой и замкнутой фигурой на основе дуг

Иллюстрация сравнивает малую дугу, большую дугу и замкнутую фигуру на основе дуг. Геометрия начинается с одной идеи, но изменение flag-параметров дуги меняет кривую, которую SVG выбирает между начальной и конечной точками.

Рассмотрим path из примера кода: d="M10,20 A 30,30 0 0,0 40,70".

Рисование кривых Безье

Кривые Безье используются для плавных контуров в иконках, логотипах, иллюстрациях и диаграммах. SVG paths поддерживают два типа кривых Безье: квадратичные кривые с одной контрольной точкой и кубические кривые с двумя контрольными точками. Начальная точка берется из текущей позиции path, конечная точка завершает сегмент, а контрольные точки вытягивают кривую и формируют ее изгиб.

Квадратичные кривые Безье

Квадратичная кривая Безье начинается в текущей точке. Команда Q использует одну контрольную точку (x1 y1) и одну конечную точку (x y). Команда q имеет тот же смысл, но ее координаты относительны текущей точке.

Квадратичная кривая Безье (Q, q, T, t)

Квадратичные кривые Безье используют одну контрольную точку.

Рассмотрим пример:

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100" stroke="black" stroke-width="1" fill="transparent" />
3</svg>

Квадратичная кривая Безье, нарисованная командой Q

Кривая начинается в точке (10, 100), изгибается к контрольной точке (25, 10) и заканчивается в точке (180, 100). Перемещение контрольной точки меняет кривую, не меняя ее начальную и конечную точки.

Изменение контрольной точки

Если соединить контрольную точку с начальной и конечной точками кривой отрезками, линия, соединяющая центры этих отрезков, будет касательной к вершине кривой.

Следующий пример оставляет те же начальную и конечную точки, но меняет координату y1 контрольной точки ( bezier-curve2.svg). Так видно, как перемещение контрольной точки вверх или вниз меняет изгиб кривой:

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="1" fill="none">
3        <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4        <path d="M 10 100 Q 25 -60 180 100" stroke="blue" />
5        <path d="M 10 100 Q 25 100 180 100" stroke="red" />
6        <path d="M 10 100 Q 25 190 180 100" stroke="green" />
7    </g>
8</svg>

Четыре квадратичные кривые Безье с разными y-координатами контрольной точки

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

Теперь возьмем черную кривую за основу и изменим координату x1 контрольной точки ( bezier-curve3.svg):

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="1" fill="none">
3        <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4        <path d="M 10 100 Q -40 10 180 100" stroke="red" />
5        <path d="M 10 100 Q 165 10 180 100" stroke="green" />
6        <path d="M 10 100 Q 245 10 180 100" stroke="blue" />
7    </g>
8</svg>

Четыре квадратичные кривые Безье с разными значениями x1 для контрольной точки

Здесь контрольная точка перемещается влево или вправо. Это меняет место, где кривая начинает изгибаться, при этом конечная точка остается той же.

Гладкие цепочки с T

1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2   <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="orange" stroke-width="3" fill="none" />
3   <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>

Несколько команд Q можно записать подряд, но соединения могут выглядеть неровно, если каждый сегмент использует независимую контрольную точку. Используйте команду T, когда нужно, чтобы SVG плавно продолжил квадратичную кривую Безье.

Команда T рисует от текущей точки до новой конечной точки (x y). Она не принимает явную контрольную точку. Вместо этого SVG отражает предыдущую квадратичную контрольную точку, но только если предыдущей командой была Q или T. После выполнения T ее конечная точка становится новой текущей точкой. Пример ниже использует команду T для продолжения гладкой квадратичной кривой. Координаты x меняются с равным шагом, а координата y остается неизменной.

1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" stroke="black" stroke-width="3" fill="none" />
3</svg>

Квадратичная кривая Безье, созданная с помощью команды T

Изменение координат конечной точки команды T создает разные гладкие цепочки кривых ( bezier-curve5.svg).

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="#FFA500" stroke-width="3" fill="none" />
3    <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>

Две квадратичные кривые Безье, созданные с помощью команды T

Кубическая кривая Безье (C, c, S, s)

Кубическим кривым Безье нужны две контрольные точки. Команда C принимает три пары координат: первую контрольную точку (x1 y1), вторую контрольную точку (x2 y2) и конечную точку (x y).

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

Следующий пример рисует фигуру двумя отдельными кубическими кривыми Безье ( cubic-bezier-curves.svg):

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2    <!--shape two paths-->
3    <path d="M 100 250 C 150 60 355 140 328 260 " stroke="black" stroke-width="3" fill="none" />
4    <path d="M 100 250 C 40 500 240 510 328 260" stroke="red" stroke-width="3" fill="none" />
5</svg>

На иллюстрации две отдельные кубические кривые Безье показаны черным и красным цветом, поэтому соединение между сегментами легко рассмотреть.

Кубические кривые Безье, нарисованные командами C черным и красным цветом

Следующий пример рисует тот же контур как один непрерывный path:

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2   <!--shape 1 path-->
3   <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" stroke="black" stroke-width="3" fill="none" />
4</svg>

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

Гладкие кубические цепочки с S

Для длинных плавных кривых используйте сокращенную команду S x2 y2 x y. Как и T для квадратичных кривых, S продолжает кубическую цепочку Безье без необходимости явно записывать первую контрольную точку. Для команды S SVG отражает предыдущую кубическую контрольную точку, чтобы сохранить непрерывный наклон. Вы указываете только вторую контрольную точку (x2 y2) и конечную точку (x y).

Творческий пример: «сова» в примитивном стиле

Кривые Безье можно объединять и в выразительные рисунки. Пример ниже использует простые path-сегменты и круги, чтобы создать иллюстрацию совы в примитивном стиле ( owl.svg):

 1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
 2    <g stroke="black" stroke-width="3" fill="none">
 3        <!--body 1 path-->
 4        <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" />
 5        <!--wing-->
 6        <path d="M 110 260 C 220 200, 250 280, 120 410" />
 7        <!--1 eyebrow-->
 8        <path d="M 110 240 C 130 220, 220 130, 231 230" />
 9        <!--2 eyebrow-->
10        <path d="M 231 231 C 230 220, 280 130, 329 258" />
11        <!--line-->
12        <path d="M 30 380 l 63 0" />
13        <path d="M 266 380 c 33 8 63 -8 90 5" />
14        <!--eyes-->
15        <circle cx="204" cy="209" r="3" />
16        <circle cx="205" cy="210" r="9" />
17        <circle cx="265" cy="209" r="3" />
18        <circle cx="265" cy="210" r="8" />
19    </g>
20</svg>

Сравнение SVG-совы, построенной из кривых Безье, и референсного рисунка совы

Типичные ошибки и исправления

ПроблемаПричинаИсправление
Path не отображаетсяPath data не начинается с команды MВсегда начинайте атрибут d с M x y, чтобы задать начальную точку
Фигура не замкнутаОтсутствует команда ZДобавьте Z в конец path, чтобы закрыть sub-path
Дуга рисуется в неожиданном направленииНеверные значения large-arc-flag или sweep-flagМеняйте по одному flag-параметру (0 или 1) и визуально проверяйте результат
Команда T не создает гладкую кривуюПредыдущей командой была не Q и не TИспользуйте T только после Q или другой команды T
Между кубическими сегментами появляются резкие углыПоследовательно используются команды CИспользуйте команду S, чтобы создавать гладкие кубические цепочки Безье
Path неожиданно смещаетсяАбсолютные и относительные команды смешаны случайноПроверьте регистр команды: верхний регистр для абсолютных координат, нижний – для относительных
Фигура не заполняетсяPath открыт или задано fill="none"Закройте path командой Z и проверьте атрибут fill

Быстрые рецепты

ЗадачаПример SVG path
Нарисовать прямоугольник<path d="M10 10 H110 V110 H10 Z" fill="none" stroke="black" />
Закрыть открытый pathДобавьте Z в конец атрибута d
Нарисовать простую дугу<path d="M10 50 A30 30 0 0 1 90 50" fill="none" stroke="orange" />
Нарисовать окружность дугами<path d="M50 10 A40 40 0 1 1 49.9 10 Z" />
Нарисовать квадратичную кривую Безье<path d="M10 80 Q95 10 180 80" fill="none" stroke="black" />
Создать гладкую квадратичную цепочку<path d="M10 80 Q60 10 110 80 T210 80" />
Нарисовать кубическую кривую Безье<path d="M10 80 C40 10 140 10 170 80" />
Создать гладкую кубическую цепочку<path d="M10 80 C40 10 140 10 170 80 S300 150 330 80" />

FAQ – SVG Path Data

Что такое SVG path data?

SVG path data – это строка команд в атрибуте d элемента <path>. Она сообщает SVG, куда переместиться, где рисовать линии, как строить дуги и как создавать кривые Безье.

Чем отличаются команды path в верхнем и нижнем регистре?

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

Как закрыть SVG path?

Используйте команду Z или z в конце sub-path. Она рисует прямую линию от текущей точки обратно к началу sub-path и помогает заполненным фигурам отображаться как замкнутые контуры.

Когда использовать path вместо базовых SVG-фигур?

Используйте <path>, когда прямоугольника, круга, эллипса, линии, polyline или polygon недостаточно. Paths лучше подходят для пользовательских контуров, иконок, логотипов, дуг и плавных кривых.

Спецификация и связанные ресурсы

SVG-фигуры SVG-текст