23. SVG Paths

HTML: Скелет. Урок: SVG Paths

Иллюстрация к уроку SVG (Scalable Vector Graphics) — это мощный способ рисовать векторную графику прямо в вашем HTML. Сегодня мы сосредоточимся на path элементе, который позволяет создавать сложные фигуры и линии, определяя их через последовательность команд.

Что такое SVG Path?

Элемент <path> в SVG — это как карандаш для рисования. Вы задаете ему последовательность команд, которые говорят, куда двигаться и что рисовать. Эти команды формируют контур фигуры. Каждая команда представлена буквой и набором чисел, которые описывают координаты или другие параметры.

Основные команды SVG Path

Вот некоторые из наиболее часто используемых команд:

M x y (Move to): Перемещает “карандаш” в точку с координатами (x, y).
L x y (Line to): Рисует линию от текущей позиции до точки (x, y).
H x (Horizontal line to): Рисует горизонтальную линию до x.
V y (Vertical line to): Рисует вертикальную линию до y.
Z (Close path): Закрывает путь, рисуя линию от текущей позиции до начальной точки.

Команды могут быть указаны в верхнем (абсолютные координаты) или нижнем (относительные координаты) регистре. Например, m x y перемещает “карандаш” на x единиц по горизонтали и y единиц по вертикали относительно текущей позиции.

Практические примеры кода

Пример 1: Простая линия

<svg width="200" height="100">
  <path d="M 10 10 L 190 90" stroke="black" />
</svg>

В этом примере мы создаем SVG-контейнер размером 200x100 пикселей. Внутри него находится <path>. Атрибут d содержит команды. M 10 10 перемещает “карандаш” в точку (10, 10). L 190 90 рисует линию от (10, 10) до (190, 90). stroke="black" задает цвет линии.

Пример 2: Прямоугольник

<svg width="200" height="100">
  <path d="M 10 10 H 190 V 90 H 10 Z" stroke="black" fill="lightgrey"/>
</svg>

Здесь мы рисуем прямоугольник. M 10 10 перемещает “карандаш” в (10, 10). H 190 рисует горизонтальную линию до x = 190. V 90 рисует вертикальную линию до y = 90. H 10 рисует горизонтальную линию до x = 10. Z закрывает путь. fill="lightgrey" задает цвет заливки.

Пример 3: Треугольник

<svg width="150" height="150">
  <path d="M 75 10 L 140 140 L 10 140 Z" stroke="black" fill="yellow" />
</svg>

Этот пример рисует треугольник. M 75 10 перемещает “карандаш” в верхнюю точку. L 140 140 рисует линию к правой нижней точке. L 10 140 рисует линию к левой нижней точке. Z закрывает путь.

Жизненный пример

SVG paths широко используются в веб-разработке. Например:

Иконки: Многие сайты используют SVG paths для создания иконок, так как они масштабируются без потери качества. Библиотеки иконок, такие как Font Awesome, часто предоставляют иконки в формате SVG paths.
Диаграммы и графики: SVG paths используются для рисования графиков, диаграмм и других визуализаций данных.
Анимации: SVG paths легко анимировать с помощью CSS или JavaScript, создавая интерактивные и привлекательные элементы интерфейса.
Логотипы: Многие логотипы компаний создаются с использованием SVG paths для обеспечения четкости изображения на любом размере экрана.

Ключевые моменты

<path> элемент — основной способ рисования векторной графики в SVG.
Атрибут d определяет последовательность команд для рисования.
Команды могут быть абсолютными (верхний регистр) или относительными (нижний регистр).
SVG paths позволяют создавать сложные фигуры и линии.
SVG paths широко используются для иконок, диаграмм, анимаций и логотипов.