Основные фигуры SVG – графики

Показывать лекцию целиком

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

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

Для создания прямоугольника применяется элемент rect, c атрибутами x, y, width и height (рис. 2.1):

(рис 2.1) Элемент rect

Атрибуты x, y задают координаты верхнего левого угла прямоугольника, а width и height определяют его ширину и высоту. По умолчанию прямоугольник не имеет контура и заливается черным цветом. В табл. 2.1 приводятся различные примеры элемента rect.

Элемент прямоугольник (rect).
№	Код	Вид в браузере
2.1.1	<?xml version="1.0" encoding="UTF-8"standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect1.svg </desc> <rect x="50" y="40" width="100" height="30"/> </svg>
	Описание
	Прямоугольник с минимумом атрибутов. По умолчанию заливается черным цветом. В элементе `<title>` вводится название, который будет заголовком в окне браузера. В элементе `<desc>` вводится описание, по которому возможна индексация поисковыми системами.
№	Код	Вид в браузере
2.1.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect2.svg </desc> <rect x="50" y="40" width="100" height="30" rx="10" ry="10" /> </svg>
	Описание
	Атрибуты `rx` и `ry`, имеющую размерность длины, позволяют задавать значения скругления углов. Максимальные значения атрибутов `rx` и `ry` соответственно равны половинам ширины и высоты прямоугольника. В данном случае это `50` и `15` пикселей. Если указывается всего одно значение свойства ( `rx` или `ry` ), то для второго автоматически устанавливается это же значение. При указании значения, большего, чем ширина или высота прямоугольника, подставляется максимальное значение.
№	Код	Вид в браузере
2.1.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect3.svg </desc> <rect x="50" y="40" width="100" height="30" rx="50" ry="15" /> </svg>
	Описание
	Прямоугольник с максимальными значениями атрибутов `rx` и `ry`.
№	Код	Вид в браузере
2.1.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect4.svg </desc> <rect x="50" y="40" width="100" height="30" rx="50"/> </svg>
	Описание
	Прямоугольник с одним атрибутом `rx`, принимающим максимальное значение. Результат такой же, как и в случае примера `"rect3.svg"`
№	Код	Вид в браузере
2.1.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect5.svg </desc> <rect x="50" y="40" width="100" height="30" fill="none" stroke="red" stroke-width="2"/> </svg>
	Описание
	Атрибут `"fill"` со значением `"none"` отключает заливку по умолчанию. Атрибут `"stroke"` задает цвет контура. Атрибут `"stroke-width"` определяет толщину контура в пикселях.
№	Код	Вид в браузере
2.1.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect6.svg </desc> <rect x="50" y="40" width="100" height="30" fill="skyblue" stroke="red" stroke-width="2"/> </svg>
	Описание
	Прямоугольник с контуром и заливкой.
№	Код	Вид в браузере
2.1.7	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect7.svg </desc> <rect x="50" y="40" width="100" height="30" fill="blue"/> </svg>
	Описание
	Прямоугольник с заливкой и без контура.
№	Код	Вид в браузере
2.1.8	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример rect8.svg </desc> <rect x="50" y="40" width="100" height="30" fill="yellow" stroke="green" stroke-width="5" rx="10" ry="10"/> </svg>
	Описание
	Прямоугольник с заливкой, контуром и округлением углов.

Окружность (circle)

Для создания окружности применяется элемент circle, c атрибутами x, y и r (рис. 2.2):

(рис 2.2) Элемент circle

Атрибуты cx, cy задают координаты центра окружности, а r определяет ее радиус. По умолчанию фигура не имеет контура и заливается черным цветом. В табл. 2.2 приводятся различные примеры элемента circle.

Элемент окружность (circle).
№	Код	Вид в браузере
2.2.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример circle1.svg </desc> <circle cx="100" cy="50" r="40"/> </svg>
	Описание
	Окружность с минимумом атрибутов. По умолчанию заливается черным цветом.
№	Код	Вид в браузере
2.2.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример circle2.svg </desc> <circle cx="100" cy="50" r="40" fill="none" stroke="orange" stroke-width="4"/> </svg>
	Описание
	Окружность с контуром и без заливки.
№	Код	Вид в браузере
2.2.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример circle3.svg </desc> <circle cx="100" cy="50" r="40" fill="indigo"/> </svg>
	Описание
	Окружность с заливкой и без контура.
№	Код	Вид в браузере
2.2.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример circle4.svg </desc> <circle cx="100" cy="50" r="40" fill="lightpink" stroke="lightcoral" stroke-width="4"/> </svg>
	Описание
	Окружность с контуром и заливкой.

Эллипс (ellipse)

Из окружности всегда можно получить эллипс (овал) – для этого достаточно "сплющить" фигуру в вертикальном или горизонтальном направлении. Для этого применяются трансформации, которые мы будем рассматривать в Лекции 7. Но самый простой способ получить эллипс – использовать встроенный элемент ellipse (рис. 2.3):

(рис 2.3) Элемент ellipse

Атрибуты cx и cy задают центр фигуры, а rx и ry определяют длины горизонтальной и вертикальной осей соответственно. По умолчанию фигура не имеет контура и заливается черным цветом. В табл. 2.3 приводятся различные примеры элемента ellipse.

Элемент эллипс (ellipse).
№	Код	Вид в браузере
2.3.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример ellipse1.svg </desc> <ellipse cx="100" cy="50" rx="60" ry="40"/> </svg>
	Описание
	Эллипс с минимумом атрибутов. По умолчанию заливается черным цветом.
№	Код	Вид в браузере
2.3.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример ellipse2.svg </desc> <ellipse cx="100" cy="50" rx="60" ry="40" fill="none" stroke="orange" stroke-width="4"/> </svg>
	Описание
	Эллипс с контуром и без заливки.
№	Код	Вид в браузере
2.3.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример ellipse3.svg </desc> <ellipse cx="100" cy="50" rx="60" ry="40" fill="indigo"/> </svg>
	Описание
	Эллипс с заливкой и без контура.
№	Код	Вид в браузере
2.3.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример ellipse4.svg </desc> <ellipse cx="100" cy="50" rx="60" ry="40" fill="lightpink" stroke="lightcoral" stroke-width="4"/> </svg>
	Описание
	Эллипс с контуром и заливкой.

Линия. (line)

Один из самых простых элементов SVG – графики – линия, отрезок прямой, заключенной между двумя точками. Для ее создания задаются координаты начальной и конечной точек (рис. 2.4):

(рис 2.4) Элемент line

По умолчанию, без задания атрибута stroke и stroke-width рисуется волосяная линия толщиной 0,1 пикселя. В табл. 2.4 приводятся различные примеры элемента line.

Элемент линия (line).
№	Код	Вид в браузере
2.4.	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример line1.svg </desc> <line x1="20" y1="10" x2="190" y2="90" /> </svg>
	Описание
	Линия с минимумом атрибутов. По умолчанию черного цвета толщиной 0,1 пикс.
№	Код	Вид в браузере
2.4.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример line2.svg </desc> <line x1="20" y1="10" x2="190" y2="90" stroke="black" stroke-width="0.1" /> </svg>
	Описание
	Линия с заданием цвета и толщины. Приведенные значения совпадают с принятыми по умолчанию.
№	Код	Вид в браузере
2.4.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример line3.svg </desc> <line x1="20" y1="10" x2="190" y2="90" stroke="tomato" stroke-width="10" /> </svg>
	Описание
	Линия с заданием цвета и толщины.

Ломаная (polyline)

Для рисования фигуры, состоящей из нескольких соединенных отрезков, можно воспользоваться элементом line, задавая для каждого отрезка координаты пары точек – начальной и конечной. Однако, более удобным в данном случае, является применение элемента polyline, где конечная точка предыдущего отрезка служит начальной для последующего (рис. 2.5)

(рис 2.5) Элемент polyline

Атрибут points позволяет задавать пары координатных точек, разделенных пробелами. Для удобства восприятия кода координаты внутри пары записываются через запятую. Можно этого не делать, т.е все значения разделять пробелами:

<polyline points="20 10 180 10 20 90 180 90" />

По умолчанию, фигура заполняется заливкой. В табл. 2.5 приводятся различные примеры элемента polyline.

Форма ломаная (polyline).
№	Код	Вид в браузере
2.5.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polyline1.svg </desc> <polyline points="20,10 180,10 20, 90 180,90" /> </svg>
	Описание
	Ломаная с минимумом атрибутов. Пространство, лежащее внутри отрезков заполняется черным цветом.
№	Код	Вид в браузере
2.5.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polyline2.svg </desc> <polyline points="20,10 180,10 20, 90 180,90" stroke="red" stroke-width="3" /> </svg>
	Описание
	Ломаная с заданием цвета и толщины контура.
№	Код	Вид в браузере
2.5.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polyline3.svg </desc> <polyline points="20,10 180,10 20, 90 180,90" stroke="red" stroke-width="3" fill="lightpink" /> </svg>
	Описание
	Фигура с контуром и заливкой
№	Код	Вид в браузере
2.5.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polyline4.svg </desc> <polyline points="20,10 180,10 20, 90 180,90" stroke="red" stroke-width="3" fill="none" /> </svg>
	Описание
	Фигура с минимальным набором атрибутов для рисования именно ломаной линии.

Многоугольник (polygone)

Элемент многоугольник, в отличие от элемента polyline, предназначен для рисования фигур, заполненных заливкой. Конечно, с помощью атрибутов этого элемента можно рисовать только контуры, но и в этом случае начальная и конечная точка будут соединяться автоматически (рис. 2.6):

(рис 2.6) Сравнение элементов polyline и polygon(рис 2.6) Сравнение элементов polyline и polygon

Форма многоугольник (polygone).
№	Код	Вид в браузере
2.6.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polygon1.svg </desc> <polygon points="20,10 180,10 20, 90 180,90" /> </svg>
	Описание
	Многоугольник с тем же самым набором точек, что и в примере polyline1.svg.
№	Код	Вид в браузере
2.6.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polygon2.svg </desc> <polygon points="20,10 180,10 20, 90 180,90" stroke="red" stroke-width="3"/> </svg>
	Описание
	Многоугольник с заданием цвета и толщины контура.
№	Код	Вид в браузере
2.6.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polygon3.svg </desc> <polygon points="20,10 180,10 20, 90 180,90" stroke="red" stroke-width="3" fill="lightpink"/> </svg>
	Описание
	Многоугольник с контуром и заливкой
№	Код	Вид в браузере
2.6.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polygon4.svg </desc> <polygon points="20,10 180,10 20, 90 180,90" stroke="red" stroke-width="3" fill="none"/> </svg>
	Описание
	Многоугольник с контуром и без заливки.
№	Код	Вид в браузере
2.6.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polygon5.svg </desc> <polygon fill="red" points="100,10 105.8,27.2 123.8,27.2 109.4,38 114.6,55.2 100,45 85.4,55.2 90.6,38 76.2,27.2 94.2,27.2" /> </svg>
	Описание
	Многоугольник с заливкой и без контура. Дробные значения координат отделяются точкой.
№	Код	Вид в браузере
2.6.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример polygon6.svg </desc> <polygon fill="dodgerblue" stroke="blue" stroke-width="5" points="100,10 121.6,22.5 121.6,47.5 100,60 78.4,47.52 78.4,22.5"/> </svg>
	Описание
	Многоугольник с заливкой и контуром. Дробные значения координат отделяются точкой.

Вертикальный порядок последовательности объектов

До этого момента мы рассматривали SVG – документы, содержащие один объект. При расположении нескольких объектов в одном документе важен их вертикальный порядок (z–order). Представим себе, что у нас есть код, в котором создаются прямоугольник ( rect ), полигон ( polygon ) и окружность ( circle ):

<rect x="10" y="10" width="180" height="80"  fill="green"/>
<polygon points="20,20 180,20 20,90" fill="blue" />
<circle cx="90" cy="60"  r="25" fill="red" />

Строка кода, описывающая окружность, располагается самой последней. На рисунке эти фигуры будут располагаться в обратном порядке – так, окружность будет самой первой в стопке объектов (рис. 2.7):

(рис 2.7) Вертикальный порядок последовательности элементов

Можно сделать простой вывод – фрагмент кода, представляющий какой-либо объект, добавленный позже всех, графически будет располагаться выше всех. В табл. 2.7 приводится несколько простых примеров, содержащих последовательности элементов.

Последовательности изображений.
№	Код	Вид в браузере
2.7.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример sequence1.svg </desc> <rect x="10" y="10" width="180" height="80" fill="green"/> <polygon points="20,20 180,20 20,90" fill="blue" /> <circle cx="90" cy="60" r="25" fill="red" /> </svg>
	Описание
	Последовательность трех фигур – прямоугольника, полигона и окружности.
№	Код	Вид в браузере
2.7.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример sequence2.svg </desc> <circle cx="45" cy="34" r="25" fill="none" stroke="darkblue" stroke-width="4"/> <circle cx="100" cy="34" r="25" fill="none" stroke="black" stroke-width="4"/> <circle cx="155" cy="34" r="25" fill="none" stroke="red" stroke-width="4"/> <circle cx="72" cy="67" r="25" fill="none" stroke="yellow" stroke-width="4"/> <circle cx="127" cy="67" r="25" fill="none" stroke="green" stroke-width="4"/> </svg>
	Описание
	Эмблема олимпийского движения. Следует обратить внимание на перекрытие колец.
№	Код	Вид в браузере
2.7.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример sequence3.svg </desc> <!-- Небо --> <rect x="0" y="0" width="200" height="70" fill="skyblue"/> <!--Кольца радуги --> <ellipse cx="100" cy="80" rx="105" ry="60" fill="none" stroke="red" stroke-width="4"/> <ellipse cx="100" cy="80" rx="101" ry="56" fill="none" stroke="orange" stroke-width="4"/> <ellipse cx="100" cy="80" rx="97" ry="52" fill="none" stroke="yellow" stroke-width="4"/> <ellipse cx="100" cy="80" rx="93" ry="48" fill="none" stroke="green" stroke-width="4"/> <ellipse cx="100" cy="80" rx="89" ry="44" fill="none" stroke="deepskyblue" stroke-width="4"/> <ellipse cx="100" cy="80" rx="85" ry="40" fill="none" stroke="blue" stroke-width="4"/> <ellipse cx="100" cy="80" rx="81" ry="36" fill="none" stroke="purple" stroke-width="4"/> <!--Солнце --> <circle cx="12" cy="12" r="10" fill="orangered"/> <!--Лучи солнца --> <line x1="12" y1="12" x2="12" y2="40" stroke="orangered" stroke-width="2" /> <line x1="12" y1="12" x2="40" y2="12" stroke="orangered" stroke-width="2" /> <line x1="12" y1="12" x2="30" y2="30" stroke="orangered" stroke-width="2" /> <!--Земля--> <rect x="0" y="70" width="200" height="30" fill="lightgreen"/> </svg>
	Описание
	Простой пейзаж. Здесь уже становится сложно следить за блоками кода, отражающими разные объекты.

Стили в SVG – графике

В SVG – графике существуют несколько способов определения внешнего вида фигуры:

Применение атрибутов внутри определения элемента.

Применение каскадных таблиц стилей (CSS, Cascading Style Sheets) внутри определения элемента.

Применение каскадных таблиц стилей внутри SVG документа.

Применение внешних каскадных таблиц стилей.

Рассмотрим по отдельности каждый из этих способов

Применение атрибутов внутри определения элемента.

Это самый простой способ, с которым мы уже неоднократно сталкивались:

<rect x="50" y="40" width="100" height="30" fill="skyblue" stroke="red" stroke-width="2"/> (Пример rect6.svg)

Цвет прямоугольника, его контур, толщина контура задаются в виде набора XML – атрибутов. Для изменения внешнего вида элемента приходится редактировать значения его атрибутов.

Применение каскадных таблиц стилей (CSS, Cascading Style Sheets) внутри определения элемента.

Можно записывать оформление документа более компактным образом, используя атрибут style:

<rect x="50" y="40" width="100" height="30" style="fill:skyblue; stroke:red; stroke-width:2;"/> (Пример StyleElement.svg)

Внутри атрибута style = " " располагаются пары "свойство : значение" разделяемые точкой с запятой. Допускается запись с опусканием пробелов.

Применение каскадных таблиц стилей внутри SVG документа.

<svg width="200" height="100" >
     <defs>
     <style type="text/css">
     <![CDATA[
rect {
fill: skyblue;
stroke: red;
stroke-width: 2
}
]]></style>
     </defs>
     <rect x="50" y="40" width="100" height="30"/>
</svg>

(Пример StyleDocument.svg)

Внутри раздела Описание раздела CDATA смотрите здесь: http://www.intuit.ru/department/internet/xml/4/xml_4.html помещается описание элемента rect. Теперь это описание будет применяться ко всем создаваемым элементам типа rect. Для задания произвольного идентификатора стиля можно создавать пользовательские классы:

<svg width="200" height="100" >
     <defs>
     <style type="text/css">
     <![CDATA[
1.myFirstStyle
{
fill: skyblue;
stroke: red;
stroke-width: 2
}
2.mySecondStyle
{
fill: green;
stroke: red;
stroke-width: 2
}
]]></style>
     </defs>
     <rect x="50" y="10"
              width="100" height="30"
              class="myFirstStyle"/>
     <rect x="50" y="50"
              width="100" height="30"
              class="mySecondStyle"/>
</svg>

(Пример SomeStyleDocument.svg)

Теперь два элемента rect будут принимать различный вид в зависимости от указываемого стиля (рис. 2.8)

(рис 2.8) Пример SomeStyleDocument.svg

Применение внешних каскадных таблиц стилей.

Этот способ отличается от предыдущего тем, что CSS описание располагается в отдельном файле от SVG – документа:

rect {
fill: skyblue;
stroke: red;
stroke-width: 2
}

(Файл myStyle.css)

В самом SVG – документе добавляется ссылка на этот внешний файл:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="myStyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100" >
     <rect x="50" y="40" width="100" height="30"/>
</svg>

(Пример ExternStyle.svg)

В этом случае также допускается применение произвольных идентификаторов.

Группы элементов

В больших SVG – документах несколько элементов (например, формирующих один объект изображения) объединяются в группы, которые обладают следующими свойствами:

Для всех элементов, входящих в группу устанавливаются одинаковые свойства.

Для группы может быть определена новая система координат и применены преобразования как для единого целого.

Группа может стать источником для ссылки.

Тег <g> содержит элементы, объединяемые в группу. Например, для этой группы устанавливается оформление элементов при помощи атрибута style:

...
<g style="fill:skyblue; stroke: blue; stroke-width: 2">
      <rect x="10" y="10" width="180" height="80" />
     <polygon points="20,20 180,20 20,90" />
     <circle cx="90" cy="60"  r="25" />
</g>
</svg>

(Пример group1.svg)

В результате все элементы выглядят одинаково (рис. 2.9):

(рис 2.9) Применение стиля для группы. Пример group1.svg

Внутри определения может быть добавлен заголовок <title> и описание <desc> группы:

...
<g style="fill:skyblue; stroke: blue; stroke-width: 2">
     <title>Работа с группой элементов</title>
<desc> Группа из прямоугольника, окружности и полигона</desc>
      <rect x="10" y="10" width="180" height="80" />
     <polygon points="20,20 180,20 20,90" />
     <circle cx="90" cy="60"  r="25" />
     </g>
</svg>

Для использования группы в качестве элемента ей следует задать id и поместить внутри тега <defs>:

...
<defs>
     <g  id="myGroup" style="fill:skyblue; stroke: blue; stroke-width: 2">
      <rect x="10" y="10" width="180" height="80" />
     <polygon points="20,20 180,20 20,90" />
     <circle cx="90" cy="60"  r="25" />
     </g>
</defs>
     <!--Использование группы-->
     <use x="10" y="10" width="180" height="80" xlink:href="#myGroup" />
     <use x="10" y="100" width="180" height="80" xlink:href="#myGroup" />
     <use x="10" y="200" width="180" height="80" xlink:href="#myGroup" />
</svg>

(Пример group2.svg)

Элемент <defs> предназначен для помещения в него служебной разметки. Внутри тега <use> атрибуты x, y, width, height определяют положение клонируемого элемента, а атрибут xlink:href указывает id группы. Графически получаем серию одинаковых объектов (рис. 2.10):

(рис 2.10) Пример group2.svg

Элемент <g> допускает множественное вложение:

<g>
  <g>
    <g>
      <g>
<!--Описание элементов-->
      </g>
    </g>
  </g>
<g>

В этом случае нужно лишь соблюдать порядок вложенных тегов.

Основные типы данных SVG – графики

В SVG – графике имеется большое количество свойств (атрибутов). Каждое значение свойства имеет определенную размерность, которую можно отнести к заданному типу данных. В табл. 2.8 приводятся основные типы данных и их описание.

Типы данных SVG – графики.
Тип данных	Описание
`<integer>`	Содержит одну или несколько цифр от `"0"` до `"9"`
`<number>`	Включает в себя описание типа `<integer>`, но может содержать дробную часть числа.
`<length>`	Может быть представлено типом `<number>`. Поддерживается также два типа величин CSS: Относительные единицы длины: `em` – высота используемого шрифта. `ex` – высота буквы `"x"` `px` – пикселы `%` – проценты Абсолютные единицы длины: `in` – дюймы (1 дюйм = 2,54 см) `cm` – сантиметры `mm` – миллиметры `pt` – пункты (1 пункт = 1/72 дюйма) `pc` – пики (1 пик = 12 пунктов) По умолчанию приняты пикселы.
`<coordinate>`	Представляет координату (абсциссу или ординату)– расстояние от начала координат до заданной точки.
`<angle>`	Угол, измеряемый в следующих единицах : `deg` ( degree ) градусах, `grad` ( grades ) - градах, `rad` ( radians ) радианах. По умолчанию приняты градусы (также, как определено в CSS2).
`<color>`	Цвет, который можно задавать в виде имени или кода RGB как в спецификации HTML: `#rrggbb`.
`<paint>`	Рисование, возможные значения: `fill` – заливка формы или `stroke` - рисование контура.
`<transform-list>`	Список преобразований (например: `scale(2) translate(100,100)` ).
`<uri>`	Уникальный идентификатор ресурса (Uniform Resource Identifiers) – адрес ресурса в Интернете.
`<time>`	Время, измеряемой в миллисекундах: `ms` (milliseconds ) или в секундах: `s` ( seconds ). Может принимать только положительные значения.

Содержимое этой таблицы будем применять на протяжении всего этого курса.

Свойство ViewBox

Рассмотрим масштабирование SVG – документов. Представим себе, что у нас есть следующий фрагмент кода:

<svg width="200" height="100">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

(Пример rect6.svg)

Для прямоугольника его координаты, ширина и высота задаются с учетом размеров самого документа – 200 на 100 пикселей. При увеличении размеров документа, например в два раза, размеры прямоугольника останутся прежними:

<svg width="400" height="200">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

Понятно, что для пропорционального изменения следует увеличить все значения свойств элемента rect:

<svg width="400" height="200">
     <rect x="100" y="80" width="200" height="60"  fill="skyblue"
          stroke="red" stroke-width="4"/>
</svg>

Теперь мы действительно видим увеличенный рисунок (рис. 2.11):

(рис 2.11) Увеличение в два раза SVG – документа

Для пропорционального увеличения даже одного элемента приходится изменять все его свойства. А как быть, если рисунок состоит из нескольких десятков или сотен элементов? В этом случае можно добавить атрибут viewBox:

<svg width="200" height="100" viewBox="0 0 200 100">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

В значении атрибута viewBox указываются через пробелы четыре параметра – координата по x, координата по y, ширина и высота видимой области. Пока ничего не изменилось – графически рисунок выглядит точно так же, как и в примере rect6.svg. Увеличим в два раза ширину и высоту документа, оставляя неизменными все прочие атрибуты:

<svg width="400" height="200" viewBox="0 0 200 100">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

(Пример viewBox1.svg)

Теперь весь рисунок масштабируется без изменения свойств прямоугольника (см. рис. 2.11)! Дело в том, что теперь координаты всех элементов в документе определяются относительно параметров, указанных в атрибуте viewBox.

В табл. 2.9 приводится использование атрибута viewBox для масштабирования рисунка, состоящего из нескольких элементов.

Свойство ViewBox.
№	Код	Вид в браузере
2.9.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 100"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox1svg </desc> <rect x="50" y="40" width="100" height="30" fill="skyblue" stroke="red" stroke-width="2"/> </svg>
	Описание
	Полный листинг примера. Параметры атрибута viewBox соответствуют размерам исходного документа.
№	Код	Вид в браузере
2.9.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 800"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox2.svg </desc> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black" /> <circle cx="650" cy="300" r="25" fill="black" /> </svg>
	Описание
	Атрибут `viewBox="0 0 1000 800"`. Относительно этих параметров созданы все элементы – обратите внимание, размеры документа составляют всего `200 х 100` пикселей!
№	Код	Вид в браузере
2.9.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="5cm" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 800"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox3.svg </desc> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black" /> <circle cx="650" cy="300" r="25" fill="black" /> </svg>
	Описание
	Для документа установлен размер `5 х 5` сантиметров. Рисунок масштабируется.
№	Код	Вид в браузере
2.9.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 800"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox4.svg </desc> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black" /> <circle cx="650" cy="300" r="25" fill="black" /> </svg>
	Описание
	Для документа установлены размеры 100% х 100%. Это означает, что рисунок будет масштабироваться для браузера любого размера, заполняя весь экран.

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Основные фигуры SVG – графики

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

Окружность (circle)

Эллипс (ellipse)

Линия. (line)

Ломаная (polyline)

Многоугольник (polygone)

Вертикальный порядок последовательности объектов

Стили в SVG – графике

Группы элементов

Основные типы данных SVG – графики

Свойство ViewBox

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!