444.50K

Category:

internet

Тема №3. SVG (1)

1. Компьютерная графика

Москин Николай Дмитриевич
Институт математики и информационных
технологий
Петрозаводский государственный университет
1

2. § 3 SVG

SVG (Scalable Vector Graphics – масштабируемая
векторная графика) язык разметки, созданный
Консорциумом Всемирной паутины (W3C),
предназначенный для описания двухмерной
векторной и смешанной векторно/растровой
графики в формате XML.
http://www.w3.org/Graphics/SVG/
2

3. Создание SVG-документов

SVG понимает три типа графических объектов:
формы векторной графики (например,
траектории, состоящие из прямых и кривых
линий), изображения и текст.
SVG-документы можно создать путем
экспортирования из программы типа Adobe
Illustrator (при этом в диалоговом окне лучше
отключить опцию Preserve Illustrator Editing
Capabilities).
3

4. Пример (1)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="120" y="120" width="126" height="126" fill="lime"
stroke="magenta" stroke-width="4" />
</svg>
4

5. Пример (1)

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

Имя элемента
Атрибут
Примечание
rect
x
Координаты верхнего левого угла
y
width
Ширина и высота
height
rx
Радиусы скругленных углов
ry
6

7. Окружности

Имя элемента
Атрибут
Примечание
circle
cx
Координаты центра
cy
r
Радиус
7

8. Эллипсы

Имя элемента
Атрибут
Примечание
ellipse
cx
Координаты центра
cy
rx
Радиусы x и y
ry
8

9. Линии

Имя элемента
Атрибут
Примечание
line
x1
Координаты конечных точек
y1
x2
y2
9

10. Ломаные линии и многоугольники

Имя элемента
Атрибут
Примечание
polyline
points
Список точек
polygon
points
Список точек
Атрибуты points вмещают последовательность
координат, разделенных пробелами, запятыми или
и тем, и другим.
10

11. Штрих и заполнение

Атрибуты stroke и fill задают цвет
штриха и заполнение.
Свойства stroke-width – толщина
штриха, stroke-linejoin – определяет,
как будут выглядеть соединения линий
на углах (miter – фацетное соединения
(по умолч.), round – скругленное, bevel
– фаска), stroke-linecap – определяет,
как будут выглядеть концы линий (butt
(по умолч.), round, square).
11

12. Пример (2)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="#F67155" stroke="none"/>
<polygon points="50,10 66,10, 76,27 66,42 50,42 40,25"
fill="#697FBA" stroke="none" />
<polyline points="40,25 1,50 50,99 99,50 76,27"
stroke="#99A6CF" stroke-linejoin="round"
stroke-linecap="round" fill="none" />
</svg>
12

13. Пример (2)

14. Траектории

Траекторию можно задать с помощью элемента path:
<path fill=“none” stroke=“#99A6CF” stroke-linecap=“round”
stroke-linejoin=“round” d=“M40,25 l-39,25 l49,49 l49-49
l-23-23” />
M (“move to”) указывает на координаты точки x и y, в
которой начинается траектория;
L (“line”) рисует прямые отрезки до точки (x, y). При
использовании l указывается смещение.
14

15. Кривые Безье

C: после C указывается шесть координат x2, y2, x3, y3,
x4, y4. Это положения направляющих точек P2=(x2, y2) и
P3=(x3, y3) и конца сегмента кривой Безье P4=(x4, y4).
Для объединения сегментов кривых в гладкую
траекторию используется команда S: после S
указываются четыре координаты P3=(x3, y3) и P4=(x4,
y4). Пропущенная направляющая точка P2 считается
равной второй направляющей точке предыдущего
сегмента кривой, отраженного относительно текущей
точки.
Q: построение квадратичной кривой Безье с одной
направляющей точкой.
15

16. Гладкое соединение кривых Безье

<path fill=“none” stroke=“#99A6CF” stroke-width=“2”
d=“M0, 0 C80, 50, 80, 60, 0, 80 S0, 150, 80, 120”/>.
16

17. Пример (3)

SVG поддерживает линейные и радиальные
градиенты:
<linearGradient id="lgrad_1">
<stop offset="0" stop-color="#0C419A"/>
<stop offset="0.4494" stop-color="#F7F632"/>
<stop offset="1" stop-color="#F5160F"/>
</linearGradient>
<circle cx="50" cy="50" r="50" fill="url(#lgrad_1)"
stroke="none" />
17

18. Пример (3)

19. Пример (4)

<radialGradient id=“rgrad_1">
<stop offset="0" stop-color="#0C419A"/>
<stop offset="0.4494" stop-color="#F7F632"/>
<stop offset="1" stop-color="#F5160F"/>
</radialGradient>
<circle cx="50" cy="50" r="50" fill="url(#rgrad_1)"
stroke="none" />
19

20. Пример (4)

21. Преобразования

С помощью атрибута transform, который можно
использовать с любым графическим элементом,
можно задать следующие преобразования:
Translate (в скобках указывается перемещение по
оси x и y):
<rect x=“120” y=“120” width=“126” height=“126”
fill=“lime” stroke=“magenta” stroke-width=“4”
transform=“translate(-50, 64)”/>
21

22. Преобразования

Scale (в скобках указываются коэффициенты
горизонтального и вертикального масштабирования).
Rotate (в скобках указываются угол поворота в
градусах, координаты x и y центра вращения).
SkewX и skewY (в скобках указывается угол
сдвига в градусах):
<rect x=“120” y=“120” width=“126” height=“126”
fill=“lime” stroke=“magenta” stroke-width=“4”
transform=“skewX(-30), skewY(-45)”/>
22

23. Элемент <g>…</g>

Элемент <g>…</g>
Иногда требуется применить одно и то же
преобразование сразу к нескольким объектам:
<g transform="scale(1.5), rotate(-90, 50, 50)">
<circle cx="50" cy="50" r="50" fill="#F67155"
stroke="none"/>
<polygon points="50,10 66,10 76,27 66,42 50,42
40,25" fill="#697FBA" stroke="none"/>
<polyline points="40,25 1,50 50,99 99,50 76,27"
stroke="#99A6CF" stroke-linejoin="round" strokelinecap="round" fill="none"/>
</g>
23

24. Результат преобразования

25. Текст

Строки текста, которые внедряются в документ
SVG, вносятся в элемент text.
<text x=“0” y=“0” font-family=“Officina-Sans” fontsize=“7” font-style=“italic” font-weight=“bold”
fill=“#F67155”>
Текст в SVG
</text>
25

26. Анимация в SVG

Любой элемент может содержать элемент
animate с несколькими атрибутами, задающий, как
его значения должны меняться со временем:
<polygon points=“50,10 66,10 76,27 66,42 50,42
40,25” fill=“#697FBA” stroke=“none”>
<animate attributeName=“fill” values=“#697FBA;
#F67155; #697FBA” dur=“2s” calcMode=“discrete”
repeatCount=“indefinite” />
</polygon>
26

English Русский Rules