Рисуем тегами

На первом шаге создадим контейнер для будущих шедевров:

<svg width=”300” height=”300” > </svg>

Ширину и высоту для него мы указали, как для обычного HTML-элемента. По умолчанию эти цифры означают количество пикселей, но можно задавать размеры в любых допустимых единицах — пунктах (pt), сантиметрах, дюймах и т. д. Все это касается и графических объектов svg, которые мы будем размещать внутри контейнера. Более того, можно задать свои единицы измерения. Атрибут viewBox тега <svg> делает именно это. Например, запись:

<svg width="20cm" height="10cm" viewBox = "0 0 100 50" >

Создаст единицы измерения внутри контейнера в 2 мм (пять пунктов на сантиметр).

Вроде все понятно. Теперь разместим что-нибудь внутри этого контейнера. Например, прямоугольник:

<rect x="10" y="10" width="160" height="100" style=" fill: #ff66ff;"/>

Как видите (первая фигура на рис. 53), это обычный XML-тег, с атрибутами, одним из которых является стиль отображения, а о назначении других легко догадаться — это координаты левого верхнего угла прямоугольника на странице и его размеры по двум измерениям. Начало координат традиционно расположено в верхнем левом углу окна браузера. Атрибут fill обозначает цвет заливки фигуры, и по умолчанию он беспросветно черен.

Рис. 53. Hello SVG!

Добавим еще атрибутов и вообще оживим картинку:

<rect x="240" y="10" width="160" height="100" rx="10" ry="10"

Style="stroke: #000000; Gtroke-width: 3; fill: #22ff44"/>

Тут мы добавили относительные координаты радиусов закруглений углов и задали толщину границы в стилях — по умолчанию она равна нулю (второй прямоугольник на рис. 54). Сразу следует заметить, что то, что определяет атрибут style, ни в коем случае не следует путать с обычными css, на самом деле это только их аналоги, являющиеся удобной формой записи свойств SVG-элементов. Тот же набор свойств можно задать и отдельными атрибутами:

Ix="10" iy="10" stroke-color: = "#000000" stroke-width = "3"

Сам элемент <rec/> — это один из SVG-примитивов, их не очень много. Вот так описываются круг и эллипс:

<circle cx="480" cy="60" r="50"

Style="stroke: #55ccff; stroke-width: 3; fill: #66ff66;"/>

Тут первые два атрибута — это координаты центра окружности, далее ее радиус.

Iellipse cx="280" cy="180" rx="180" ry="40"

Style="stroke: #ff2222; stroke-width: 3; fill: #ffcc22;"/>

Тут, правда, радиуса два, на то это и эллипс.

Сейчас мы используем исключительно одиночные теги. Это совсем не обязательное условие для примитивов, они, как обычные теги-контейнеры, могут располагаться иерархически:

<ellipse cx="280" cy="180" rx="180" ry="40"

Style="stroke: #55ccff; stroke-width: 3; fill: #ffcc22;"/>

<text x="200" y="190" color="red" height="100"

Style="stroke: #55ccff;font-family: Arial; font-size: 36;fill: #FFFFFF" ;> Hello SVG!

</text>

</ellipse>

В данном случае внутрь контейнера <ellipse></ellipse> помещен еще один важный примитив — текст. Причем на расположение текста на странице это может не влиять (в данном примере мы задали его абсолютно), важно, что тут текст стал потомком эллипса в DOM-дереве документа.

Посмотрим, что еще в арсенале SVG-примитивов у нас есть. Ну, прежде всего это просто линия (line). Вот как просто с помощью SVG поместить на веб-страницу наклонную линию:

Атрибуты, как можно догадаться, отображают координаты начальной и конечной точек линии.

Следующий примитив — ломаная линия. Задается она так:

<polyline points=”65 100,85 100,90 90, 100 110, 105 90, 115 110, 125 90, 135 110, 145 90, 150 110, 155 100, 165 100” style=”stroke: green; stroke-width: 3; fill: none;” />

Каждая из разделенных запятыми пар чисел является координатами очередной точки, соединяемой этой линией. Тут можно тоже применить заливку — тогда ломаная превратится в цепочку треугольников.

Парами координат угловых точек задается и следующий примитив — полигон:

F polygon f oints=”100,25 150,25  200,75  200,125  150,175  100,175  50,125  50,75

Style=”stroke:#000000; fill:#6666ff; stroke-width: 3;”/>

Замыкание происходит автоматически. Совместив в рамках одного контейнера <svg></svg> два таких примитива, получим картинку, изображенную на рис. 54.

В заливке полигонов есть одна особенность — алгоритм работы с фигурами, образуемыми пересекающимися линиями, требует корректировки. Опять обратимся к коммунистической символике (рис. 55):

<svg width="800px" height="600px" >

<polygon style="fill-rule: evenodd; fill: red;

Stroke: yellow;" points="96,32 32,192 192,96 0,96 160,192" />

</svg>

Рис. 55. Опять звезда — теперь SVG

Если бы значение атрибута fill-rule было nonzero, звезда окрасилась бы полностью.

Впрочем, мы еще не закончили с линиями. Им можно задать не только толщину и цвет. Посмотрим на рис. 56 и код, его рисующий:

<svg width="800px" height="600px" >

<line x1="10" y1="10" x2="150" y2="150"

Style="stroke: brown; stroke-width:10;stroke-linecap: round; stroke-dasharray: 50, 30;"/>

<line x1="150" y1="10" x2="10" y2="150"

Style="stroke: yellow; stroke-width:10;stroke-linecap: butt;stroke-opacity: 0.8; "/> <line x1="10" y1="70" x2="150" y2="70"

Style="stroke: green; stroke-width:10;stroke-linecap:square;stroke-opacity: 0.6;"/> </svg>

Рис. 56. Еще линии

Прежде всего, как видите, можно указать форму концов линий, задав свойство stroke-linecap. Оно может принимать одно из трех значений: butt, round или square. В случае ломаной линии можно регулировать еще один параметр — место соединения отрезков ломаных. За это отвечает атрибут s troke-linejoin. Возможные значения — miter (угол), round (скругленное), bevel (срез).

Еще два атрибута годятся для любых линий. Это прозрачность — stroke-opacity и прерывистость — stroke-dasharray. Если с первым свойством все ясно, то второе требует некоторых пояснений. Его значение состоит из списка чисел, разделенных запятыми, определяющих длину отрезков и промежутков между ними. Число цифр должно быть четным (отрезок/пробел). Хотя в противном случае катастрофы не будет — SVG просто продублирует последнее значение.