Основные фигуры SVG: rect circle path

В SVG используется система координат, в которой точка (0,0) находится в левом верхнем углу. Значение X увеличивается вправо, а Y — вниз. Область просмотра задаётся атрибутами width и height, а пространство координат — атрибутом viewBox.

Прямоугольники рисуются с помощью <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. Атрибуты rx и ry закругляют углы. Заливка и обводка задаются атрибутами fill и stroke или с помощью CSS. Если не указать x и y, по умолчанию используются значения 0,0.

Круги рисуются с помощью <circle cx="100" cy="100" r="50">. cx и cy задают координаты центра, а r — радиус. У кругов SVG нет аналога параметров угла дуги в canvas: они всегда являются полными кругами.

Эллипсы рисуются с помощью <ellipse cx="100" cy="100" rx="80" ry="40">. rx задаёт горизонтальный радиус, а ry — вертикальный. Эллипс с одинаковыми значениями rx и ry эквивалентен кругу.

<line x1="0" y1="0" x2="100" y2="100"> рисует один отрезок. <polyline points="0,0 100,50 200,0"> рисует соединённые отрезки через последовательность пар координат. Ни один из этих элементов автоматически не замыкается.

<polygon points="100,10 190,190 10,190"> похож на polyline, но фигура автоматически замыкается: последний отрезок соединяет последнюю точку с первой. Используйте polygon для замкнутых фигур, например треугольников, звёзд и других правильных многоугольников.

Элемент path — самая мощная фигура SVG: с его помощью можно представить любую комбинацию линий, дуг и кривых. Атрибут d содержит команды контура: M (moveTo), L (lineTo), A (дуга), C (кубическая кривая Безье), Q (квадратичная кривая Безье), Z (closePath).

Команды в верхнем регистре используют абсолютные координаты, а команды в нижнем регистре — относительные. M 100 50 перемещает начальную точку в (100,50). L 200 150 рисует линию до точки (200,150). Z замыкает контур. A rx ry rotation large-arc sweep x y рисует дугу.

Фигуры SVG поддерживают CSS-свойства: fill, stroke, stroke-width, opacity и stroke-dasharray. Для удобной поддержки стилей используйте CSS-классы на элементах SVG. Переходы CSS работают для fill, stroke и opacity, обеспечивая плавное изменение состояний.

Элемент <g> объединяет элементы SVG в группу. Примените к группе transform, fill или stroke, чтобы повлиять на всех её дочерних элементов. Группировка позволяет объединять сложные фигуры, которые перемещаются или преобразуются вместе, например циферблат со всеми его компонентами.

Определяйте повторно используемые фигуры в <defs>: символы, градиенты и контуры обрезки. Ссылайтесь на них с помощью <use href="#id">. Это избавляет от дублирования сложных данных контура и позволяет задавать преобразования и стили для отдельных экземпляров через элемент use.

В чём разница между polyline и polygon в SVG?

SVG предоставляет декларативные элементы фигур (прямоугольник, круг, эллипс, линия, ломаная линия и многоугольник), а также универсальный элемент path для создания сложных фигур с помощью команд M, L, A, C, Q и Z. Стилизация через CSS, группировка с помощью g и повторное использование через defs/use позволяют создавать удобную в поддержке масштабируемую векторную графику, встроенную непосредственно в HTML.