SVG Path: команды и примеры

Если вы когда-нибудь откры­ва­ли SVG-файл в тек­сто­вом редак­то­ре, то навер­ня­ка встре­ча­ли что-нибудь вро­де M 20 40 C 60 10 120 90 160 40. С пер­во­го взгля­да это выгля­дит как какая-то стран­ная смесь коор­ди­нат, команд тер­ми­на­ла и закли­на­ний веб-раз­ра­бот­чи­ка. Но на самом деле перед нами одна из самых инте­рес­ных воз­мож­но­стей SVG — эле­мент <path>.

Под­пи­ши­тесь на Tiku Digital ВКонтакте

С помо­щью SVG Path мож­но рисо­вать прак­ти­че­ски что угод­но: пря­мые линии, вол­ны, икон­ки, лого­ти­пы, гра­фи­ки, слож­ные иллю­стра­ции и про­из­воль­ные гео­мет­ри­че­ские фор­мы. А самое инте­рес­ное — всё это опи­сы­ва­ет­ся обыч­ным текстом.

В этой ста­тье раз­бе­рём­ся, как устро­ен <path>, что озна­ча­ют зага­доч­ные бук­вы M, L, C, Q, A, Z и зачем вооб­ще веб-раз­ра­бот­чи­ку пони­мать SVG-пути.

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

Что такое SVG Path

SVG — это век­тор­ный фор­мат изоб­ра­же­ний. В отли­чие от JPEG или PNG, кар­тин­ка здесь может быть опи­са­на набо­ром гео­мет­ри­че­ских объ­ек­тов и коор­ди­нат. Поэто­му SVG мож­но уве­ли­чи­вать прак­ти­че­ски до любо­го раз­ме­ра без появ­ле­ния пикселей.

Одним из таких объ­ек­тов является:

<path>

Удоб­нее все­го пред­ста­вить path как дви­же­ние вир­ту­аль­но­го пера по листу бума­ги. Мы гово­рим перу: сна­ча­ла пере­ме­стись сюда, потом про­ве­ди линию туда, затем нари­суй кри­вую, после это­го ещё одну линию и в кон­це замкни фигуру.

Все инструк­ции запи­сы­ва­ют­ся в атри­бу­те d:

<svg viewBox="0 0 320 200">
    <path d="M 60,50 L 260,150" />
</svg>

Бук­вы здесь — коман­ды, а чис­ла — их параметры.

Система координат SVG

Перед тем как экс­пе­ри­мен­ти­ро­вать с путя­ми, нуж­но понять одну про­стую вещь: SVG суще­ству­ет внут­ри соб­ствен­ной систе­мы координат.

Напри­мер:

<svg viewBox="0 0 320 200">

озна­ча­ет, что наша рабо­чая область име­ет услов­ную шири­ну 320 еди­ниц и высо­ту 200 единиц.

Точ­ка 0,0 рас­по­ла­га­ет­ся в левом верх­нем углу. Коор­ди­на­та X уве­ли­чи­ва­ет­ся сле­ва напра­во, а Y — свер­ху вниз.

Поэто­му:

• 0,0 — левый верх­ний угол;
• 320,0 — пра­вый верхний;
• 0,200 — левый нижний;
• 320,200 — пра­вый нижний.

И прак­ти­че­ски вся рабо­та с SVG Path сво­дит­ся к путе­ше­ствию меж­ду таки­ми точками.

Команда M — перемещаем перо

Нач­нём с самой про­стой коман­ды. M про­ис­хо­дит от сло­ва Move и пере­ме­ща­ет вир­ту­аль­ное перо в ука­зан­ную точку.

M 60,50

То есть:

X = 60
Y = 50

Важ­но пони­мать: сама коман­да M ниче­го не рису­ет. Она толь­ко выби­ра­ет точ­ку, с кото­рой мы хотим начать.

Это при­мер­но как взять насто­я­щий каран­даш, под­нять его над листом бума­ги и пере­ста­вить в дру­гое место.

Команда L — рисуем линии

После того как перо ока­за­лось в нуж­ной точ­ке, мож­но начать рисо­вать. Для обыч­ной пря­мой исполь­зу­ет­ся коман­да L — Line.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200">

    <path
        d="
            M 60,50
            L 260,150

            M 60,150
            L 260,50
        "
        fill="none"
        stroke="black"
        stroke-width="10"
    />

</svg>

Сна­ча­ла коман­да M уста­нав­ли­ва­ет началь­ную пози­цию. Затем L про­во­дит линию от теку­ще­го поло­же­ния пера до ука­зан­ной точки.

Обра­ти­те вни­ма­ние на инте­рес­ную осо­бен­ность: коман­де L не тре­бу­ет­ся ука­зы­вать началь­ную коор­ди­на­ту линии. Она уже извест­на из преды­ду­щей команды.

Полу­ча­ет­ся про­стая цепочка:

M → L → L → L → ...

Имен­но этот прин­цип дела­ет SVG Path таким мощ­ным: сле­ду­ю­щая коман­да про­дол­жа­ет рабо­ту с того места, где закон­чи­лась предыдущая.

Кривые Безье в SVG

С пря­мы­ми всё отно­си­тель­но про­сто. Насто­я­щее весе­лье начи­на­ет­ся тогда, когда нам нуж­но нари­со­вать плав­ную линию.

Для это­го SVG под­дер­жи­ва­ет кри­вые Безье. Если вы рабо­та­ли в Illustrator, Figma, Photoshop, CorelDRAW или дру­гом гра­фи­че­ском редак­то­ре, то навер­ня­ка уже стал­ки­ва­лись с управ­ля­ю­щи­ми точ­ка­ми кривых.

Квадратичная кривая Q

Самый про­стой вари­ант — коман­да Q. Для неё исполь­зу­ет­ся одна управ­ля­ю­щая точка.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200">

    <path
        d="
            M 40,150
            Q 160,20 280,150
        "
        fill="none"
        stroke="black"
        stroke-width="10"
    />

</svg>

Раз­бе­рём запись:

M 40,150
Q 160,20 280,150

Началь­ная точ­ка уже опре­де­ле­на коман­дой M. После Q идут ещё две точки:

• 160,20 — управ­ля­ю­щая точка;
• 280,150 — конеч­ная точка.

Управ­ля­ю­щая точ­ка слов­но при­тя­ги­ва­ет линию к себе. Чем силь­нее мы меня­ем её поло­же­ние, тем замет­нее изме­ня­ет­ся изгиб.

Упро­щён­но это мож­но пред­ста­вить так:

кривая = начальная точка + управляющая точка + конечная точка

Кубическая кривая C

Когда одной управ­ля­ю­щей точ­ки недо­ста­точ­но, появ­ля­ет­ся коман­да C — Cubic Bézier.

У неё уже две управ­ля­ю­щие точки:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200">

    <path
        d="
            M 30,150
            C 70,20 250,180 290,50
        "
        fill="none"
        stroke="black"
        stroke-width="10"
    />

</svg>

После C мы видим сра­зу три пары координат:

C 70,20 250,180 290,50

Это:

1. пер­вая управ­ля­ю­щая точка;
2. вто­рая управ­ля­ю­щая точка;
3. конеч­ная точка.

Началь­ная точ­ка, опять же, берёт­ся из преды­ду­щей команды.

Имен­но куби­че­ские кри­вые поз­во­ля­ют созда­вать слож­ные S‑образные линии, плав­ные вол­ны и мно­же­ство форм, кото­рые посто­ян­но встре­ча­ют­ся в лого­ти­пах и век­тор­ных иллюстрациях.

Q или C — что использовать?

На прак­ти­ке всё доволь­но про­сто. Если нуж­на обыч­ная плав­ная дуга, часто доста­точ­но Q. Если фор­ма долж­на менять направ­ле­ние или вам нужен более точ­ный кон­троль над изги­бом, удоб­нее C.

Команда A — дуги в SVG

А теперь добра­лись до коман­ды, кото­рая спо­соб­на немно­го сло­мать мозг даже чело­ве­ку, кото­рый уже вполне нор­маль­но пони­ма­ет осталь­ные SVG Paths.

A озна­ча­ет Arc — эллип­ти­че­ская дуга.

В общем виде она запи­сы­ва­ет­ся при­мер­но так:

A rx ry rotation large-arc-flag sweep-flag x y

Выгля­дит страш­но­ва­то. Но давай­те не будем пытать­ся запом­нить всё сразу.

Про­стей­ший пример:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200">

    <path
        d="
            M 50,140
            A 130,100 0 0 1 270,140
        "
        fill="none"
        stroke="black"
        stroke-width="10"
    />

</svg>

Как читать параметры A

Возь­мём толь­ко саму команду:

A 130,100 0 0 1 270,140

Самое непри­выч­ное здесь то, что мы не зада­ём центр окруж­но­сти. Бра­у­зер сам вычис­ля­ет под­хо­дя­щий эллипс, кото­рый смо­жет соеди­нить началь­ную и конеч­ную точки.

Большая и маленькая дуга

Меж­ду дву­мя точ­ка­ми по одно­му эллип­су мож­но прой­ти раз­ны­ми путя­ми. Поэто­му SVG нуж­но сооб­щить, какую имен­но часть эллип­са мы хотим использовать.

За это отве­ча­ет large-arc-flag:

0 = короткая дуга
1 = длинная дуга

Есть ещё sweep-flag, опре­де­ля­ю­щий направление:

0 = одно направление
1 = противоположное направление

И вот здесь я бы сове­то­вал не пытать­ся заучи­вать всё тео­ре­ти­че­ски. Гораз­до про­ще взять гото­вый SVG из архи­ва, поме­нять ноль на еди­ни­цу, обно­вить стра­ни­цу бра­у­зе­ра и посмот­реть, куда вне­зап­но убе­жа­ла дуга.

Как замкнуть SVG Path

До сих пор мы рисо­ва­ли откры­тые линии. Но path может созда­вать и замкну­тые фигуры.

Для это­го суще­ству­ет коман­да Z.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 220">

    <path
        d="
            M 70,50
            L 70,170
            L 250,170
            Z
        "
    />

</svg>

Z авто­ма­ти­че­ски соеди­ня­ет послед­нюю точ­ку с той точ­кой, с кото­рой начал­ся теку­щий контур.

То есть:

M 70,50
L 70,170
L 250,170
Z

по смыс­лу закан­чи­ва­ет­ся лини­ей обрат­но к 70,50.

Абсолютные и относительные команды SVG

До сих пор все коман­ды мы писа­ли заглав­ны­ми буквами:

M L Q C A

Но SVG чув­стви­те­лен к реги­стру. У боль­шин­ства команд есть вер­сии с малень­ки­ми буквами:

m l q c a

И это не про­сто дру­гой спо­соб написания.

Заглав­ные коман­ды исполь­зу­ют абсо­лют­ные коор­ди­на­ты, а строч­ные — отно­си­тель­ные.

Напри­мер:

M 60,60
l 70,110

Пер­вая коман­да уста­нав­ли­ва­ет позицию:

X = 60
Y = 60

А сле­ду­ю­щая гово­рит не «иди в точ­ку 70,110», а:

X = 60 + 70 = 130
Y = 60 + 110 = 170

То есть коор­ди­на­ты счи­та­ют­ся отно­си­тель­но теку­ще­го положения.

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

Плавное продолжение кривых: T и S

Пред­ста­вим, что мы нари­со­ва­ли одну кри­вую Безье и хотим сра­зу про­дол­жить её вто­рой. Если само­сто­я­тель­но подо­брать сле­ду­ю­щую управ­ля­ю­щую точ­ку не совсем точ­но, в месте соеди­не­ния может появить­ся замет­ный излом.

SVG уме­ет решать эту про­бле­му автоматически.

Команда T

T исполь­зу­ет­ся вме­сте с квад­ра­тич­ны­ми кривыми.

<path
    d="
        M 40,110
        Q 90,20 160,110
        T 280,110
    "
/>

Для T не нуж­но зада­вать новую управ­ля­ю­щую точ­ку. SVG рас­счи­ты­ва­ет её авто­ма­ти­че­ски как отра­же­ние преды­ду­щей, бла­го­да­ря чему пере­ход полу­ча­ет­ся плавным.

Команда S

У куби­че­ских кри­вых суще­ству­ет похо­жая коман­да — S.

<path
    d="
        M 30,110
        C 80,20 130,200 180,110
        S 280,20 330,110
    "
/>

Это очень удоб­но для волн и длин­ных плав­ных кон­ту­ров. Не при­хо­дит­ся вруч­ную уга­ды­вать поло­же­ние каж­дой сле­ду­ю­щей управ­ля­ю­щей точки.

Пробелы и запятые в SVG Path

Если открыть какой-нибудь SVG, экс­пор­ти­ро­ван­ный гра­фи­че­ским редак­то­ром, мож­но уви­деть доволь­но непри­ят­ную конструкцию:

<path d="M60 50L260 150M60 150L260 50"/>

И она совер­шен­но нор­маль­но работает.

Но при руч­ной рабо­те я пред­по­чи­таю писать так:

<path
    d="
        M 60,50
        L 260,150

        M 60,150
        L 260,50
    "
/>

Бра­у­зе­ру в боль­шин­стве слу­ча­ев всё рав­но, зато чело­ве­ку вто­рой вари­ант читать намно­го проще.

Осо­бен­но это ста­но­вит­ся замет­но, когда внут­ри одно­го path уже не две коман­ды, а двадцать.

Можно ли анимировать SVG Path?

Да, и вот здесь начи­на­ет­ся ещё одна очень инте­рес­ная тема.

Напри­мер, мож­но сде­лать эффект, буд­то линия посте­пен­но рису­ет­ся пря­мо на экране. Один из клас­си­че­ских спо­со­бов осно­ван на свойствах:

stroke-dasharray
stroke-dashoffset

Упро­щён­ный вари­ант мож­но сде­лать даже внут­ри само­го SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 220">

    <path
        pathLength="1"
        d="M 30,160 C 80,20 150,200 210,80 S 300,40 330,150"
        fill="none"
        stroke="black"
        stroke-width="9"
        stroke-dasharray="1"
        stroke-dashoffset="1"
    >

        <animate
            attributeName="stroke-dashoffset"
            from="1"
            to="0"
            dur="2.5s"
            fill="freeze"
        />

    </path>

</svg>

Если открыть этот SVG непо­сред­ствен­но в бра­у­зе­ре, линия будет посте­пен­но появляться.

А даль­ше на SVG Paths мож­но стро­ить уже куда более слож­ные вещи: ани­ми­ро­ван­ные лого­ти­пы, инди­ка­то­ры загруз­ки, гра­фи­ки, марш­ру­ты на кар­тах, деко­ра­тив­ные линии и пол­но­цен­ные иллюстрации.

Шпаргалка по SVG Path

После всех этих M, L, Q и C всё может немно­го пере­ме­шать­ся в голо­ве, поэто­му собе­ру основ­ные коман­ды ещё раз.

Как самому разобраться с SVG Paths

Мне кажет­ся, SVG Path — как раз тот слу­чай, когда чте­ние доку­мен­та­ции помо­га­ет толь­ко до опре­де­лён­но­го момен­та. Мож­но десять раз про­чи­тать, что такое управ­ля­ю­щая точ­ка куби­че­ской кри­вой Безье, но гораз­до полез­нее один раз открыть SVG в редак­то­ре и поменять:

C 70,20 250,180 290,50

напри­мер, на:

C 150,10 170,190 290,50

После это­го обно­вить стра­ни­цу и посмот­реть, что про­изо­шло с линией.

Имен­но поэто­му к ста­тье я при­ло­жил архив с гото­вы­ми при­ме­ра­ми. Каж­дый при­мер — обыч­ный само­сто­я­тель­ный SVG-файл. Его мож­но открыть в Chrome, Firefox или дру­гом бра­у­зе­ре, затем открыть код в любом тек­сто­вом редак­то­ре, поме­нять коор­ди­на­ты и посмот­реть результат.

Что в итоге

На пер­вый взгляд SVG Paths дей­стви­тель­но выгля­дят пуга­ю­ще. Осо­бен­но когда вме­сто акку­рат­но отфор­ма­ти­ро­ван­но­го при­ме­ра встре­ча­ешь экс­пор­ти­ро­ван­ный из гра­фи­че­ско­го редак­то­ра путь на несколь­ко экра­нов, состо­я­щий прак­ти­че­ски из одних букв и цифр.

Но базо­вая идея на самом деле очень про­стая: пред­ставь­те, что внут­ри SVG нахо­дит­ся вир­ту­аль­ное перо, а мы после­до­ва­тель­но отда­ём ему команды.

Пере­ме­сти­лись:

M

Про­ве­ли линию:

L

Сде­ла­ли плав­ный изгиб:

Q или C

Нари­со­ва­ли дугу:

A

Замкну­ли фигуру:

Z

И всё это мож­но объ­еди­нять внут­ри одно­го <path>, полу­чая прак­ти­че­ски любую век­тор­ную форму.

При­чём зна­ние SVG Path полез­но не толь­ко раз­ра­бот­чи­кам. Если вы зани­ма­е­тесь веб-дизай­ном, интер­фей­са­ми, лого­ти­па­ми, икон­ка­ми или ани­ма­ци­ей, пони­ма­ние того, что скры­ва­ет­ся внут­ри SVG-фай­ла, доволь­но быст­ро пере­ста­ёт быть бес­по­лез­ной тех­ни­че­ской мелочью.

А даль­ше самое инте­рес­ное — открыть при­ме­ры и начать ломать их само­сто­я­тель­но. В слу­чае с SVG это, пожа­луй, один из самых быст­рых спо­со­бов понять, как всё устроено.