STEP 3: Базовые фигуры и тег `<path>`

В предыдущем шаге мы разобрались с «холстом» (viewBox). Теперь пришло время взять в руки инструменты и начать рисовать. Хотя SVG позволяет создавать прямоугольники и круги одной строчкой кода, настоящая магия начинается там, где заканчиваются стандартные фигуры. В этой статье мы быстро пробежимся по примитивам, которые вы будете встречать часто, а затем перейдем к «сердцу» векторной графики — тегу <path>, который позволяет нарисовать абсолютно всё.

Часть 1: Простые примитивы (геометрия для ленивых)

SVG предоставляет набор готовых форм. Они удобны, читаемы и их легко редактировать вручную.

1. Линии и Ломаные (`<line>`, `<polyline>`)

Иногда вам нужно просто провести черту.

<line> — это прямой отрезок между двумя точками. Обязательно задавайте stroke (цвет обводки), иначе линию не будет видно.

<polyline> — это "ломаная" линия. Она состоит из серии прямых отрезков.

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Простая линия -->
  <line x1="10" y1="10" x2="190" y2="10" stroke="black" stroke-width="2"/>
</svg>

Вывод:

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Ломаная линия (график, зигзаг) -->
  <polyline points="10,40 40,80 80,30 120,80 190,40" 
            fill="none" stroke="blue" stroke-width="2"/>
</svg>

Вывод:

Важно: У <polyline> по умолчанию есть заливка (fill). Если вы рисуете график, не забудьте поставить fill="none", иначе SVG попытается залить пространство между линией и воображаемой прямой, соединяющей концы.

2. Многоугольник (`<polygon>`)

Это брат-близнец <polyline>, но с одним отличием: он всегда замыкается. SVG автоматически соединяет последнюю точку с первой. Идеально для треугольников, звезд и шестигранников.

<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- Треугольник -->
  <polygon points="50,10 90,90 10,90" 
           fill="coral" stroke="maroon" stroke-width="2"/>
</svg>

Вывод:

Часть 2: `<path>` — Король SVG

Все теги выше (rect, circle, polygon) — это просто "сахар". Под капотом браузер всё равно превращает их в пути. Тег <path> — это универсальный инструмент, перо, которым вы водите по холсту.

У <path> есть один главный атрибут — d (data или draw). Внутри него записан набор команд.

Представьте, что вы управляете роботом-рукой с карандашом. Вы даете ему команды:

M (Move to) — Подними руку и перемести в точку X, Y (не рисуя).
L (Line to) — Опусти карандаш и веди прямую линию в точку X, Y.
Z (Close path) — Замкни контур (проведи линию в начало).

Пример: Рисуем прямоугольник вручную

<svg width="150" height="150" viewBox="0 0 150 150">
  <!-- 
    M 10 10 - Встать в точку 10,10
    L 100 10 - Линия вправо
    L 100 100 - Линия вниз
    L 10 100 - Линия влево
    Z - Замкнуть (вернуться в 10,10)
  -->
  <path d="M 10 10 L 100 10 L 100 100 L 10 100 Z" 
        fill="none" stroke="black" stroke-width="2"/>
</svg>

Вывод:

Pro-Tip: Регистр имеет значение!

Заглавные буквы (M, L): Абсолютные координаты (иди в точку x=100).
Строчные буквы (m, l): Относительные координаты (сдвинься на 100 пикселей от текущей точки).

Часть 3: Кривые Безье (Самое сложное)

Прямые линии — это скучно. Вся красота графики в изгибах. В SVG кривые строятся с помощью кривых Безье.

Логика такая: есть точка старта, точка финиша и контрольная точка (магнит), которая "тянет" линию на себя, искривляя её.

1. Квадратичная кривая (Команда Q)

Самая простая кривая. У неё всего одна контрольная точка.

Синтаксис: Q x1 y1 x y

x1 y1 — координаты магнита (контрольной точки).
x y — куда должна прийти линия.

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Линия идет из 10,90 в 190,90. 
       Но точка 100,10 (сверху по центру) тянет её вверх, как резинку -->
  <path d="M 10 90 Q 100 10 190 90" 
        fill="none" stroke="red" stroke-width="4"/>
  
  <!-- Визуализация контрольной точки (для понимания) -->
  <circle cx="100" cy="10" r="3" fill="red" />
  <line x1="10" y1="90" x2="100" y2="10" stroke="#ddd" />
  <line x1="190" y1="90" x2="100" y2="10" stroke="#ddd" />
</svg>

Вывод:

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

Это то, что используется в 99% сложной графики. Здесь два магнита: один тянет линию от старта, другой направляет её к финишу.

Синтаксис: C x1 y1 x2 y2 x y

x1 y1 — первый магнит (управляет стартом).
x2 y2 — второй магнит (управляет финишем).
x y — конечная точка.

Именно с помощью C рисуются сложные фигуры, например, сердечко:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M 50,80 
           C 30,70 10,50 10,35 
           C 10,20 20,10 30,10 
           C 40,10 50,20 50,30 
           C 50,20 60,10 70,10 
           C 80,10 90,20 90,35 
           C 90,50 70,70 50,80 Z" 
        fill="crimson"/>
</svg>

Вывод:

Часть 4: Реальный мир (Figma/Illustrator и SVG)

Вам вряд ли придется писать сложные path вручную (кроме простых иконок или анимаций). Обычно вы рисуете в графическом редакторе.

Как это работает:

Вы ставите точки и тянете "усики" (handles) в Figma.
Эти "усики" — и есть координаты x1, y1 и x2, y2 для команд C или Q.
При экспорте редактор переводит ваш рисунок в одну длинную строку атрибута d.

Почему это важно знать разработчику?

Часто редакторы экспортируют "грязный" код. Понимая синтаксис, вы можете:

Увидеть лишние точки и удалить их.
Округлить значения (вместо 10.000034 написать 10), уменьшив вес файла.
Изменить направление кривой для анимации.

Итоговый пример: "Домик у моря"

Соберем всё вместе. Используем примитивы для простых форм, а <path> — для волн.

<svg width="300" height="200" viewBox="0 0 300 200" style="border:1px solid #ccc">
  
  <!-- Небо (Rect) -->
  <rect width="300" height="200" fill="#87CEEB"/>
  
  <!-- Солнце (Circle) -->
  <circle cx="250" cy="40" r="30" fill="#FFD700" />

  <!-- Домик (Group + Polyline + Rect) -->
  <g transform="translate(20, 80)">
    <rect x="20" y="40" width="60" height="60" fill="white"/>
    <polygon points="20,40 50,10 80,40" fill="#A52A2A"/>
    <rect x="45" y="70" width="20" height="30" fill="#654321"/>
  </g>
  
  <!-- Море (Path с кривыми Безье) 
       Мы используем Q для создания плавных волн
  -->
  <path d="M 0 160 
           Q 50 140 100 160 
           T 200 160 
           T 300 160 
           V 200 H 0 Z" 
        fill="#1E90FF" opacity="0.8"/>
        
  <!-- Текст -->
  <text x="150" y="190" text-anchor="middle" fill="white" font-family="Arial" font-size="12">
    SVG Landscape
  </text>
</svg>

Вывод:

(Обратите внимание на команду T в коде моря — это "продолжение" предыдущей квадратичной кривой, шорткат для гладких линий).

Вы сможете пройти видео-курс по созданию svg графики в Inkscape когда он будет готов

Svg Course Basics Shapes

STEP 3: Базовые фигуры и тег `<path>`

Часть 1: Простые примитивы (геометрия для ленивых)

1. Линии и Ломаные (`<line>`, `<polyline>`)

2. Многоугольник (`<polygon>`)

Часть 2: `<path>` — Король SVG

Пример: Рисуем прямоугольник вручную

Часть 3: Кривые Безье (Самое сложное)

1. Квадратичная кривая (Команда Q)

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

Часть 4: Реальный мир (Figma/Illustrator и SVG)

Как это работает:

Почему это важно знать разработчику?

Итоговый пример: "Домик у моря"

Проверьте, что вы усвоили

Svg Course Basics Shapes

STEP 3: Базовые фигуры и тег <path>

Часть 1: Простые примитивы (геометрия для ленивых)

1. Линии и Ломаные (<line>, <polyline>)

2. Многоугольник (<polygon>)

Часть 2: <path> — Король SVG

Пример: Рисуем прямоугольник вручную

Часть 3: Кривые Безье (Самое сложное)

1. Квадратичная кривая (Команда Q)

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

Часть 4: Реальный мир (Figma/Illustrator и SVG)

Как это работает:

Почему это важно знать разработчику?

Итоговый пример: "Домик у моря"

Проверьте, что вы усвоили

STEP 3: Базовые фигуры и тег `<path>`

1. Линии и Ломаные (`<line>`, `<polyline>`)

2. Многоугольник (`<polygon>`)

Часть 2: `<path>` — Король SVG