---
title: SVG Shapes
localeTitle: SVG Shapes
---
## SVG Shapes
С помощью SVG можно создавать несколько форм. Чертеж SVG может использовать и объединять семь фигур: Путь, Прямоугольник, Круг, Эллипс, Линия, Полилиния и Многоугольник.
### Дорожка
Элемент `path` является наиболее часто встречающимся и обычно генерируется программами, предназначенными для экспорта SVG-кода.
```svg
```
В приведенном выше примере `path` генерирует символ «плюс» (+) при использовании внутри чертежа SVG. Элементы `path` SVG не создаются вручную, а сгенерированы с помощью программ проектирования, которые могут манипулировать векторной графикой, например Illustrator или Inkscape.
### Прямоугольник
Прямоугольник `rect` рисует прямоугольник на экране и принимает шесть атрибутов.
```svg
```
`x` и `y` назначают положение верхнего левого угла прямоугольника, а `width` и `height` определяют размер прямоугольника. `rx` и `ry` назначают радиус углов прямоугольника, аналогично свойству CSS border-radius.
### Круг
Круг элемент `circle` принимает три атрибута.
```svg
```
`cx` и `cy` назначают положение центра круга, а `r` присваивает радиус (размер) круга.
### Эллипс
Элемент эллипса, `ellipse` , подобен элементу `circle` за исключением того, что радиус делится на два атрибута.
```svg
```
Опять же, `cx` и `cy` назначают положение центра эллипса, а теперь `rx` и `ry` назначают горизонтальный и вертикальный радиус эллипса соответственно. Большой `rx` даст «толстый» эллипс, а более крупный `ry` даст более тонкий эллипс. Если `rx` и `ry` равны, он образует круг.
### Линия
Элемент `line` прост и принимает четыре атрибута.
```svg
```
Атрибуты `x1` и `y1` назначают первую точку строки, а атрибуты `x2` и `y2` назначают вторую точку линии.
### Ломаная
`polyline` - это серия связанных прямых линий, назначенных в одном атрибуте.
```svg
```
Атрибут `points` присваивает список точек, каждая точка разделяется запятой.
### многоугольник
Элемент `polygon` также представляет собой серию связанных прямых линий, но в этом случае последняя строка автоматически соединяется с начальной точкой.
```svg
```
Этот пример будет иметь ту же форму, что и выше, чем `polyline` , но он будет нарисовать дополнительную строку, чтобы «закрыть» ряд строк.
## Больше информации
MDN Документация: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes)