Основные фигуры

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

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

Код для создания этого изображения выглядит примерно так:

<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

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

Элемент <rect> рисует на экране прямоугольник. Положение и форму прямоугольника на экране определяют шесть основных атрибутов. У прямоугольника справа заданы параметры rx и ry, благодаря чему его углы закруглены. Если их не указать, по умолчанию они равны 0.

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

x

Положение верхнего левого угла прямоугольника по оси x.

y

Положение верхнего левого угла прямоугольника по оси y.

width

Ширина прямоугольника.

height

Высота прямоугольника.

rx

Радиус углов прямоугольника по оси x.

ry

Радиус углов прямоугольника по оси y.

Круг

Элемент <circle> рисует на экране круг. Его форму и размер определяют три основных параметра.

<circle cx="25" cy="75" r="20"/>

r

Радиус круга.

cx

Положение центра круга по оси x.

cy

Положение центра круга по оси y.

Эллипс

<ellipse> — это более общий вариант элемента <circle>, в котором радиусы круга по осям x и y (в математике их обычно называют большой полуосью и малой полуосью) можно масштабировать независимо друг от друга.

<ellipse cx="75" cy="75" rx="20" ry="5"/>

rx

Радиус эллипса по оси x.

ry

Радиус эллипса по оси y.

cx

Положение центра эллипса по оси x.

cy

Положение центра эллипса по оси y.

Линия

Элемент <line> принимает в качестве параметров координаты двух точек и рисует между ними прямую линию.

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

x1

Положение точки 1 по оси x.

y1

Положение точки 1 по оси y.

x2

Положение точки 2 по оси x.

y2

Положение точки 2 по оси y.

Ломаная линия

<polyline> состоит из соединённых прямых линий. Поскольку список точек может быть довольно длинным, все точки указываются в одном атрибуте:

<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>

points

Список точек. Каждое число должно быть отделено пробелом, запятой, EOL или символом перевода строки; допускаются дополнительные пробелы. Каждая точка должна содержать два числа: координату x и координату y. Таким образом, список (0,0), (1,1) и (2,2) можно записать как 0, 0 1, 1 2, 2.

Многоугольник

<polygon> похож на <polyline>: он состоит из прямых отрезков, соединяющих список точек. Однако у многоугольника путь автоматически соединяет последнюю точку с первой, образуя замкнутую фигуру.

<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>

points

Список точек; каждое число отделяется пробелом, запятой, EOL или символом перевода строки; допускаются дополнительные пробелы. Каждая точка должна содержать два числа: координату x и координату y. Таким образом, список (0,0), (1,1) и (2,2) можно записать как 0, 0 1, 1 2, 2. Затем рисунок замыкает путь, поэтому между (2,2) и (0,0) будет проведена последняя прямая линия.

Контур

<path> — это самая универсальная фигура, которую можно использовать в SVG. С помощью элемента path можно рисовать прямоугольники (с закруглёнными углами или без них), круги, эллипсы, ломаные линии и многоугольники. По сути, можно создавать любые другие типы фигур, кривые Безье, квадратичные кривые и многое другое.

По этой причине следующий раздел руководства будет посвящён контурам. А пока отметим, что для управления формой используется один параметр.

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

d

Список точек и другие сведения о том, как рисовать контур. Дополнительную информацию см. в разделе Контуры.