Вы находитесь на странице: 1из 56

Учебник HTML5 графики – SVG

SVG — это аббревиатура, и расшифровывается она как масштабируемая векторная графика (анг. Scalable Vector Graphics).

SVG входит в подмножество расширяемого языка разметки XML и предназначен для описания двумерной векторной или смешанной векторно-растровой графики в формате XML.

SVG поддерживает как статическую, так и анимированную интерактивную графику или, иными словами, декларативную и скриптовую.

SVG не поддерживает описание трехмерных объектов (здесь не следует путать с имитацией трехмерности при помощи различных приемов).

Что необходимо знать, чтобы продолжить изучение данного Учебника SVG? Прежде чем продолжить, вы должны обладать знаниями в следующих областях:

HTML

Если вы чувствуете, что вам необходимо освежить свои знания в этих областях, то вы можете ознакомиться с соответствующими разделами нашего сайта.

Введение в SVG

Что такое SVG?

SVG расшифровывается как масштабируемая векторная графика (анг. Scalable Vector Graphics)

SVG используется, чтобы определять векторную графику для сети

SVG определяет графические объекты в формате XML

SVG графика НЕ теряет в качестве при изменении размера или увеличении

Каждый элемент и каждый атрибут в SVG файлах может быть анимирован

SVG является рекомендацией консорциума W3C

SVG интегрируется с другими стандартами консорциума W3C, такими как DOM и XSL

Преимущества SVG

SVG имеет следующие преимущества над другими графическими форматами (как JPEG и GIF):

SVG изображения могут создаваться и редактироваться в любом текстовом редакторе

SVG изображения могут индексироваться, скриптоваться и сжиматься, по ним можно осуществлять поиск

SVG изображения легко масштабируются

SVG изображения могут распечатываться в высоком качестве при любом разрешении

Любую часть SVG изображения можно увеличивать без потери качества картинки

SVG — это открытый стандарт

SVG файлы — это чистый XML код

Главным конкурентом SVG является технология Flash. Тем не менее, самым большим преимуществом SVG над Flash является его совместимость с другими стандартами (например, XSL и DOM). Flash же основывается на проприетарной технологии и не является открытым стандартом.

Создание SVG изображений

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

SVG в HTML

В HTML5 вы можете включать элемент SVG непосредственно в HTML код веб-документа.

Включайте SVG непосредственно в HTML код страницы

Ниже приводится пример простой SVG графики:

приводится пример простой SVG графики: Вот HTML код, реализующий ее:

Вот HTML код, реализующий ее:

приводится пример простой SVG графики: Вот HTML код, реализующий ее:

Объяснения SVG кода:

SVG изображение начинается с элемента <svg>

Атрибуты width и height элемента <svg> определяют ширину и высоту SVG изображения

Элемент <circle> используется для рисования круга

Атрибуты cx и cy определяют координаты X и Y центра круга. Если атрибуты cx и cy не определяются, то координаты центра круга устанавливаются в значения (0, 0)

Атрибут r определяет радиус круга

Атрибуты stroke и stroke-width отвечают за то, как будет выводиться фигура. В данном примере устанавливается, что круг должен отображаться линией зеленого цвета толщиной 4px

Атрибут fill определяет цвет заливки круга. В данном примере задан желтый цвет

Закрывающий тег </svg> завершает описание SVG изображения

Примечание: Так как SVG декларация использует формат XML, все элементы должны быть закрыты в соответствии со спецификацией XML!

SVG прямоугольник

В SVG есть несколько предопределенных элементов, позволяющих разработчику рисовать различные фигуры:

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

Круг <circle>

Эллипс <ellipse>

Прямая линия <line>

Ломаная линия <polyline>

Многоугольник <polygon>

Контур <path>

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

SVG прямоугольник - <rect>

Пример №1

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

используется элемент <rect>: SVG код: Объяснение: ∑ Атрибуты

SVG код:

элемент <rect>: SVG код: Объяснение: ∑ Атрибуты width и

Объяснение:

Атрибуты width и height элемента <rect> определяют ширину и высоту прямоугольника

Атрибут style определяет CSS свойства прямоугольника

CSS свойство fill определяет цвет заливки прямоугольника

CSS свойство stroke-width определяет толщину рамки прямоугольника

CSS свойство stroke определяет цвет рамки прямоугольника

Пример №2

В следующем примере используются новые атрибуты:

SVG код: Объяснение: ∑ Атрибут x определяет позицию прямоугольника

SVG код:

SVG код: Объяснение: ∑ Атрибут x определяет позицию прямоугольника

Объяснение:

Атрибут x определяет позицию прямоугольника слева (например, x="50" помещает прямоугольник в 50px от левого отступа)

Атрибут y определяет позицию прямоугольника сверху (например, y="20" помещает прямоугольник в 20px от верхнего отступа)

CSS свойство fill-opacity определяет прозрачность цвета заливки (допустимый диапазон: от 0 до 1)

CSS свойство stroke-opacity определяет прозрачность цвета прорисовки (допустимый диапазон: от 0 до 1)

Пример №3

Определяем прозрачность всего элемента:

SVG код: Объяснение: ∑ CSS свойство opacity определяет значение

SVG код:

SVG код: Объяснение: ∑ CSS свойство opacity определяет значение

Объяснение:

CSS свойство opacity определяет значение прозрачности для всего элемента (допустимый диапазон: от 0 до 1)

Пример №4

В последнем примере создадим прямоугольник с закругленными углами:

SVG код: Объяснение: ∑ Атрибуты rx и ry закругляют углы

SVG код:

SVG код: Объяснение: ∑ Атрибуты rx и ry закругляют углы

Объяснение:

Атрибуты rx и ry закругляют углы прямоугольника

SVG круг

Чтобы нарисовать круг, используется элемент <circle>:

SVG круг Чтобы нарисовать круг, используется элемент <circle>:

SVG код:

SVG код: Объяснение: ∑ Атрибуты cx и cy определяют координаты X и Y

Объяснение:

Атрибуты cx и cy определяют координаты X и Y центра круга. Если атрибуты cx и cy не определяются, то центр круга устанавливается в координаты (0,0)

Атрибут r определяет радиус круга

SVG эллипс

Чтобы создать эллипс, используется элемент <ellipse>.

Эллипс имеет достаточно близкое отношение к кругу. Разница заключается в том, что у эллипса радиусы по горизонтальной и вертикальной оси разные, в то время как у круга они одинаковые.

Пример №1

Создадим эллипс:

время как у круга они одинаковые. Пример №1 Создадим эллипс: SVG код:

SVG код:

время как у круга они одинаковые. Пример №1 Создадим эллипс: SVG код:
Объяснение: ∑ Атрибут cx определяет координату X центра эллипса ∑

Объяснение:

Атрибут cx определяет координату X центра эллипса

Атрибут cy определяет координату Y центра эллипса

Атрибут rx определяет горизонтальный радиус

Атрибут ry определяет вертикальный радиус

Пример №2

Создадим три эллипса, расположенные друг над другом:

№2 Создадим три эллипса, расположенные друг над другом: SVG код:

SVG код:

№2 Создадим три эллипса, расположенные друг над другом: SVG код:

Пример №3 В следующем примере скомбинируем два эллипса (желтый и белый):

два эллипса (желтый и белый): SVG код: SVG прямая линия Чтобы

SVG код:

эллипса (желтый и белый): SVG код: SVG прямая линия Чтобы создать

SVG прямая линия

Чтобы создать прямую линию, используется элемент <line>:

SVG код: Объяснение: ∑ Атрибут x1 определяет координату X стартовой

SVG код:

SVG код: Объяснение: ∑ Атрибут x1 определяет координату X стартовой

Объяснение:

Атрибут x1 определяет координату X стартовой точки линии

Атрибут y1 определяет координату Y стартовой точки линии

Атрибут x2 определяет координату X конечной точки линии

Атрибут y2 определяет координату Y конечной точки линии

SVG многоугольник

Элемент <polygon> используется для создания графической фигуры, содержащей как минимум три стороны.

Многоугольники создаются из прямых линий, при этом контур "закрывается" (все линии связаны).

Пример №1

Создаем многоугольник с тремя сторонами:

многоугольник с тремя сторонами: SVG код: Объяснение: ∑ Атрибут

SVG код:

с тремя сторонами: SVG код: Объяснение: ∑ Атрибут points

Объяснение:

Атрибут points определяет координаты X и Y каждого угла многоугольника

Пример № 2

Создаем многоугольник с четырьмя сторонами:

SVG код: Пример №3 Нарисуем звезду при помощи элемента <polygon>:

SVG код:

SVG код: Пример №3 Нарисуем звезду при помощи элемента <polygon>:

Пример №3 Нарисуем звезду при помощи элемента <polygon>:

SVG код: Пример №4 Изменим свойство fill-rule на "evenodd":

SVG код:

SVG код: Пример №4 Изменим свойство fill-rule на "evenodd":

Пример №4 Изменим свойство fill-rule на "evenodd":

SVG код: SVG ломаная линия Элемент <polyline> используется для

SVG код:

SVG код: SVG ломаная линия Элемент <polyline> используется для

SVG ломаная линия

Элемент <polyline> используется для создания, так называемой, ломаной линии. Ломаная линия создается из прямых линий, при этом контур "не замыкается". Пример №1 Элемент <polyline> используется, чтобы создавать любую графическую фигуру, состоящую только из прямых линий:

SVG код: Объяснение: ∑ Атрибут points определяет координаты X и Y

SVG код:

SVG код: Объяснение: ∑ Атрибут points определяет координаты X и Y

Объяснение:

Атрибут points определяет координаты X и Y каждого "перелома" линии

Пример №2

Другой пример фигуры, состоящей только из прямых линий:

SVG код: Для создания контура используется элемент <path>. В

SVG код:

SVG код: Для создания контура используется элемент <path>. В

Для создания контура используется элемент <path>.

В качестве данных контура используются следующие команды:

M = переместить указатель

L = нарисовать линию

H = нарисовать горизонтальную линию

V = нарисовать вертикальную линию

C = нарисовать кубическую кривую Безье с двумя контрольными точками

S = нарисовать сглаженную кубическую кривую Безье с одной контрольной точкой

Q = нарисовать квадратичную кривую Безье с одной контрольной точкой

T = нарисовать сглаженную квадратичную кривую Безье. Контрольной точкой будет отражение контрольной точки предыдущей команды.

A = нарисовать эллиптическую кривую

Z = закрыть контур

Примечание: Все вышеприведенные команды имеют вариант записи в нижнем регистре. Если команда записана большими буквами, то позиционирование будет абсолютным. Если маленькими буквами, то позиционирование будет относительным.

Пример №1

В следующем примере определяется контур, который начинается в координатах (150,0), затем проводится линия в координаты (75,200), затем проводится линия в координаты (225,200) и, наконец, контур закрывается в начальных координатах (150,0):

в начальных координатах (150,0): SVG код: Пример №2 Кривые Безье

SVG код:

координатах (150,0): SVG код: Пример №2 Кривые Безье

Пример №2

Кривые Безье используются для моделирования плавных кривых линий, масштаб которых можно бесконечно увеличивать или уменьшать. Обычно, выбирается две конечных точных точки и одну или две контрольных. Кривую Безье с одной контрольной точкой называют квадратичной кривой Безье, а с двумя контрольными точками — кубической.

В следующем примере создается кубическая кривая Безье. Здесь A и C — соответственно начальная и конечная точки, B — контрольная точка:

начальная и конечная точки, B — контрольная точка: SVG код:

SVG код:

начальная и конечная точки, B — контрольная точка: SVG код:
Сложно? ДА!!!! Именно из-за сложности при рисовании контуров и

Сложно? ДА!!!! Именно из-за сложности при рисовании контуров и рекомендуется использовать специальный SVG редактор для создания сложной графики.

SVG текст

Для вывода текста используется элемент <text>. Пример №1 Выводим текст:

Пример №1 Выводим текст: SVG код: Пример №2 Повернем текст:

SVG код:

Пример №1 Выводим текст: SVG код: Пример №2 Повернем текст: SVG код:

Пример №2 Повернем текст:

Пример №1 Выводим текст: SVG код: Пример №2 Повернем текст: SVG код:

SVG код:

Пример №1 Выводим текст: SVG код: Пример №2 Повернем текст: SVG код:

Пример №3

Элемент <text> может содержать любое число подгрупп, состоящих из элемента <tspan>. Каждый элемент <tspan> может определять свои данные о формате и позиционировании.

Текст на нескольких строках (с элементом <tspan>):

строках (с элементом <tspan>): SVG код: . Пример №4 Текст как

SVG код:

.

(с элементом <tspan>): SVG код: . Пример №4 Текст как ссылка (с

Пример №4

Текст как ссылка (с элементом <a>):

SVG код: . Пример №4 Текст как ссылка (с элементом <a>): SVG код:

SVG код:

SVG код: . Пример №4 Текст как ссылка (с элементом <a>): SVG код:
SVG свойство stroke SVG предлагает широкий диапазон свойств,

SVG свойство stroke

SVG предлагает широкий диапазон свойств, отвечающих за стиль контуров графических фигур. Эти свойства имеют вид "stroke-*". Здесь мы рассмотрим следующие свойства:

stroke

stroke-width

stroke-linecap

stroke-dasharray

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

SVG свойство stroke

Свойство stroke определяет цвет линии, текста или контура (обводки) элемента:

цвет линии, текста или контура (обводки) элемента: SVG код:

SVG код:

цвет линии, текста или контура (обводки) элемента: SVG код:
SVG свойство stroke-width Свойство stroke-width определяет толщину линии,

SVG свойство stroke-width

Свойство stroke-width определяет толщину линии, текста или контура (обводки) элемента:

текста или контура (обводки) элемента: SVG код: SVG свойство stroke-linecap

SVG код:

текста или контура (обводки) элемента: SVG код: SVG свойство stroke-linecap

SVG свойство stroke-linecap

Свойство stroke-linecap определяет различные типы концов открытых линий:

типы концов открытых линий: SVG код: SVG свойство stroke-dasharray

SVG код:

концов открытых линий: SVG код: SVG свойство stroke-dasharray Свойство

SVG свойство stroke-dasharray

Свойство stroke-dasharray используется для создания прерывистых линий:

stroke-dasharray используется для создания прерывистых линий: SVG код:

SVG код:

stroke-dasharray используется для создания прерывистых линий: SVG код:
SVG фильтры SVG фильтры позволяют добавлять различные графические

SVG фильтры

SVG фильтры позволяют добавлять различные графические эффекты SVG графике.

<defs> и <filter>

Все SVG фильтры определяются внутри элемента <defs>. Элемент <defs> это сокращение от английского слова "definitions" (пер. "определения") и содержит определение специальных элементов (таких как фильтры).

Элемент <filter> предназначен для определения SVG фильтра. У элемента <filter> должен быть задан обязательный атрибут id, который идентифицирует фильтр. Графический объект затем указывает на этот фильтр.

Элементы SVG фильтров

В SVG доступны следующие элементы фильтров:

<feBlend> - фильтр для комбинирования изображений

<feColorMatrix> - фильтр для трансформации цветов

<feComponentTransfer>

<feComposite>

<feConvolveMatrix>

<feDiffuseLighting>

<feDisplacementMap>

<feFlood>

<feGaussianBlur>

<feImage>

<feMerge>

<feMorphology>

<feOffset> - фильтр для создания теней

<feSpecularLighting>

<feTile>

<feTurbulence>

<feDistantLight> - фильтр для освещения

<fePointLight> - фильтр для освещения

<feSpotLight> - фильтр для освещения

С любым элементом SVG можно использовать любое количество фильтров!

В данной главе Учебника по SVG графике мы всего лишь продемонстрируем несколько примеров использования SVG фильтров, чтобы вы смогли себе представить возможности SVG графики.

Эффект размытия

Фильтр <feGaussianBlur>.

Пример

Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:

Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:

SVG код:

SVG код: Объяснение: ∑ Атрибут id элемента <filter> определяет

Объяснение:

Атрибут id элемента <filter> определяет уникальное имя фильтра

Эффект размытия создается при помощи элемента <feGaussianBlur>

Часть in="SourceGraphic" определяет, что эффект создается для всего элемента

Атрибут stdDeviation определяет размер размытия

Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"

Создание тени (<feOffset>)

Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или графический элемент) и немного сдвигается в XY плоскостях.

Пример

Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое изображение (при помощи элемента <feBlend>):

SVG код: Объяснение: ∑ Атрибут id элемента <filter> определяет

SVG код:

SVG код: Объяснение: ∑ Атрибут id элемента <filter> определяет

Объяснение:

Атрибут id элемента <filter> определяет уникальное имя фильтра

Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"

Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):

SVG код: Объяснение: ∑ Атрибут stdDeviation элемента <feGaussianBlur>

SVG код:

SVG код: Объяснение: ∑ Атрибут stdDeviation элемента <feGaussianBlur>

Объяснение:

Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия

Теперь делаем тень черной:

SVG код: Объяснение: ∑ Значение атрибута in элемента <feOffset>

SVG код:

SVG код: Объяснение: ∑ Значение атрибута in элемента <feOffset>

Объяснение:

Значение атрибута in элемента <feOffset> изменено на "SourceAlpha", которое использует альфа-канал вместо всего RGBA набора пикселя для создания размытия

Теперь обработаем тень как цвет:

SVG код: Объяснение:

SVG код:

SVG код: Объяснение:

Объяснение:

Фильтр <feColorMatrix> используется для трансформации цветов сдвинутого изображения в сторону черного цвета. Три значения '0.2' в матрице умножаются на значения красного, зеленого и синего каналов. Уменьшение их значений сдвигает цвет в сторону черного (значение черного цвета = 0)

SVG градиенты

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

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

SVG элементы, определяющие градиенты, должны располагаться внутри элемента <defs>. Элемент <defs> это сокращение от английского слова "definitions" (пер. "определения") и содержит определение специальных элементов (таких как градиенты).

Линейный градиент - <linearGradient>

Чтобы определить линейный градиент, в SVG используется элемент <linearGradient>.

Линейный градиент может быть горизонтальным, вертикальным или угловым:

Горизонтальный градиент создается, когда координаты y1 и y2 одинаковые, а координаты x1 и x2 разные

Вертикальный градиент создается, когда координаты x1 и x2 одинаковые, а координаты y1 и y2 разные

Угловой градиент создается, когда координаты x1 и x2 и координаты y1 и y2 разные

Пример №1

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

SVG код: Объяснение: ∑ Атрибут id элемента <linearGradient> определяет

SVG код:

SVG код: Объяснение: ∑ Атрибут id элемента <linearGradient> определяет

Объяснение:

Атрибут id элемента <linearGradient> определяет уникальное имя градиента

Атрибуты x1, x2, y1, y2 элемента <linearGradient> определяют начальную и конечную позицию градиента

Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>. Атрибут offsetиспользуется, чтобы определить, где цвет градиента начинается и заканчивается

Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом

Пример №2 Создадим эллипс с вертикальным линейным градиентом от желтого цвета к красному:

от желтого цвета к красному: SVG код: Пример №3 Создадим эллипс

SVG код:

желтого цвета к красному: SVG код: Пример №3 Создадим эллипс с

Пример №3 Создадим эллипс с горизонтальным линейным градиентом от желтого цвета к красному и добавим текст внутри эллипса:

SVG код: Объяснение: ∑ Элемент <text> добавляет текст Радиальный

SVG код:

SVG код: Объяснение: ∑ Элемент <text> добавляет текст Радиальный

Объяснение:

Элемент <text> добавляет текст

Радиальный градиент - <radialGradient>

Чтобы определить радиальный градиент, используется элемент <radialGradient>. Пример №1 Создадим эллипс с радиальным градиентом от белого цвета к синему:

от белого цвета к синему: SVG код: Объяснение: ∑ Атрибут id

SVG код:

от белого цвета к синему: SVG код: Объяснение: ∑ Атрибут id

Объяснение:

Атрибут id элемента <radialGradient> определяет уникальное имя градиента

Атрибуты cx, cy и r определяют внешний круг, fx и fy определяют внутренний круг

Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>. Атрибут offsetиспользуется, чтобы определить, где цвет градиента начинается и заканчивается

Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом

Пример №2

Создадим еще один эллипс с радиальным градиентом от белого цвета к синему:

эллипс с радиальным градиентом от белого цвета к синему: SVG код:

SVG код:

эллипс с радиальным градиентом от белого цвета к синему: SVG код:

Список SVG элементов

Элемент

Описание

Атрибуты

<a>

Создает ссылку вокруг SVG элемента

xlink:show

xlink:actuate

xlink:href

target

<altGlyph>

Предоставляет контроль над символами (глифами), используемыми для отображения специальных символьных данных

x

y

 

dx

dy

rotate

glyphRef

format

xlink:href

<altGlyphDef>

Определяет подстановочный набор символов (глифов)

id

<altGlyphItem>

Определяет вариантный набор символов (глифов) подстановки

id

<animate>

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

attributeName="имя атрибута" by="относительное смещение" from="начальное значение" to="конечное значение"

dur="длительность"

repeatCount="сколько раз применяется

анимация"

Элемент

Описание

Атрибуты

<animateMotion>

Заставляет указанный элемент двигаться по заданной траектории

calcMode="метод интерполяции. Принимает значение 'discrete', 'linear', 'paced' или 'spline'" path="траектория движения" keyPoints="как далеко по траектории движения должен сдвигаться объект за заданный отрезок времени" rotate="задает трансформацию поворота" xlink:href="ссылка URI на элемент <path>, который определяет траекторию движения"

<animateTransform>

Анимирует атрибут трансформации на заданном элементе. Это позволяет анимации контролировать трансляцию, масштабирование, поворот и/или перекос

by="относительное значение сдвига" from="начальное значение" to="конечное значение" type="тип трансформации. Может быть 'translate', 'scale', 'rotate', 'skewX', 'skewY'"

<circle>

Определяет круг

cx="x-координата центра круга" cy="y-координата центра круга" r="радиус круга". Обязательный. + презентационные атрибуты:

Color, FillStroke, Graphics

<clipPath>

Обрезка состоит в том, чтобы скрыть из вида то, что в обычных условиях прорисовывается. Шаблон, который определяет, что рисовать, а что нет, называется контур обрезки

clip-path="контур обрезки, на который ссылаются, пересекается с ссылающимся контуром обрезки" clipPathUnits="Может быть 'userSpaceOnUse' или 'objectBoundingBox'. Второе значение делает дочерние элементы частью ограничивающего объект блока, использующего

Элемент

Описание

Атрибуты

   

маску (по умолчанию: 'userSpaceOnUse')"

<color-profile>

Определяет описание цветового профиля (когда стили документа определяются при помощи CSS)

local="уникальный ID сохраненного локально цветового профиля" name="" rendering-intent="auto | perceptual | relative- colorimetric | saturation | absolute-colorimetric" xlink:href="URI на ICC ресурс профиля"

<cursor>

Определяет платформо-независимый пользовательский курсор

x="x-координата верхнего левого угла курсора (по умолчанию 0)" y="y-координата верхнего левого угла курсора (по умолчанию 0)" xlink:href="URI изображения, используемого как курсор"

<defs>

Контейнер для элементов, на которые будут ссылаться другие элементы

 

<desc>

Текстовое описание для контейнерных или графических элементов в SVG (пользовательские программы могут выводить данный текст как всплывающую подсказку)

 

<ellipse>

Определяет эллипс

cx="x-координата центра эллипса" cy="y-координата центра эллипса" rx="длина радиуса по оси x". Обязательный параметр. ry="длина радиуса по оси y". Обязательный параметр. + презентационные атрибуты:

Элемент

Описание

Атрибуты

   

Color, FillStroke, Graphics

<feBlend>

Совмещает два объекта в соответствии с заданным режимом смешивания

mode="режим смешивания изображений: normal | multiply | screen | darken | lighten" in="определяет ввод для заданного примитива фильтра: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="вводная второго изображения для операции смешивания"

feColorMatrix

SVG фильтр. Применяет матричную трансформацию

 

feComponentTransfer

SVG фильтр. Выполняет покомпонентную модификацию данных

 

feComposite

SVG фильтр.

 

feConvolveMatrix

SVG фильтр.

 

feDiffuseLighting

SVG фильтр.

 

feDisplacementMap

SVG фильтр.

 

feDistantLight

SVG фильтр. Определяет источник света

 

feFlood

SVG фильтр.

 

Элемент

Описание

Атрибуты

feFuncA

SVG фильтр. Подэлемент для feComponentTransfer

 

feFuncB

SVG фильтр. Подэлемент для feComponentTransfer

 

feFuncG

SVG фильтр. Подэлемент для feComponentTransfer

 

feFuncR

SVG фильтр. Подэлемент для feComponentTransfer

 

feGaussianBlur

SVG фильтр. Выполняет размытие изображения по Гауссу

 

feImage

SVG фильтр.

 

feMerge

SVG фильтр. Создает слои изображений друг над другом

 

feMergeNode

SVG фильтр. Подэлемент для feMerge

 

feMorphology

SVG фильтр. Выполняет "утолщение" (fattening) или "утончение" (thinning) текущего графического объекта

 

feOffset

SVG фильтр. Сдвигает изображение относительно его текущей позиции

 

fePointLight

SVG фильтр.

 

feSpecularLighting

SVG фильтр.

 

feSpotLight

SVG фильтр.

 

Элемент

Описание

Атрибуты

feTile

SVG фильтр.

 

feTurbulence

SVG фильтр.

 

filter

Контейнер для фильтров

 

font

Определяет шрифт

 

font-face

Описывает характеристики шрифта

 

font-face-format

   

font-face-name

   

font-face-src

   

font-face-uri

   

foreignObject

   

<g>

Группирует элементы

id="имя группы" fill="цвет заливки для группы" opacity="прозрачность для группы" + презентационные атрибуты:

Все

glyph

Определяет графику для заданного символа (глифа)

 

Элемент

Описание

Атрибуты

glyphRef

Определяет допустимый для использования символ (глиф)

 

hkern

   

<image>

Определяет изображение

x="x-координата верхнего левого угла изображения" y="y-координата верхнего левого угла изображения" width="ширина изображения". Обязательный параметр. height="высота изображения". Обязательный

параметр. xlink:href="путь к изображению". Обязательный параметр.

+

презентационные атрибуты:

Color, Graphics, Images, Viewports

<line>

Определяет линию

x1="x начала линии"

y1="y начала линии" x2="x конца линии" y2="y конца линии"

+

презентационные атрибуты:

Color, FillStroke, Graphics, Markers

<linearGradient>

Определяет линейный градиент. Линейный градиент заполняет объект, используя вектор направления, и может быть горизонтальным, вертикальным или угловым

id="уникальный идентификатор. Требуется для обращения к этому шаблону" gradientUnits="'userSpaceOnUse' или 'objectBoundingBox'. Используйте область видимости или объект, чтобы определить относительную позицию точек вектора. (по

Элемент

Описание

Атрибуты

   

умолчанию 'objectBoundingBox')" gradientTransform="трансформация, применяемая к градиенту" x1="x начальной точки вектора градиента (число или % - 0% по умолчанию)" y1="y начальной точки вектора градиента (0% по умолчанию)" x2="x конечной точки вектора градиента (100% по умолчанию)" y2="y конечной точки вектора градиента (0% по умолчанию)" spreadMethod="'pad' или 'reflect' или 'repeat'" xlink:href="ссылка на другой градиент, чьи атрибуты используются как атрибуты по умолчанию. Работает рекурсивно"

<marker>

Маркеры устанавливаются в вершинах прямых и ломаных линий, многоугольников и контуров. Этим элементам можно задавать атрибуты "marker-start", "marker-mid" и "marker-end", которые по умолчанию наследуются, либо установить им значение 'none', либо прописать в них URI определенного маркера. Прежде, чем ссылаться через URI маркера, его нужно определить. Любой тип графической фигуры можно помещать внутри маркера. Маркеры рисуются наверху элемента, к которому они прикреплены

markerUnits="'strokeWidth' или 'userSpaceOnUse'. Если используется значение 'strokeWidth', то маркер равен ширине прорисовки. В обратном случае маркер не масштабируется и использует то же поле видимости, что и ссылающийся на него элемент (по умолчанию 'strokeWidth')" refx="позиция, где маркер присоединяется к вершине (по умолчанию 0)" refy="позиция, где маркер присоединяется к вершине (по умолчанию 0)" orient="'auto' или угол, под которым буде показываться маркер. При значении 'auto' угол будет рассчитываться таким образом, чтобы ось x проходила по касательной к вершине фигуры

Элемент

Описание

Атрибуты

   

(по умолчанию 0)" markerWidth="ширина маркера (по умолчанию

3)"

markerHeight="высота маркера (по умолчанию

3)"

viewBox="точки "видимости" в этой SVG области рисования. 4 значения, разделенных пробелом или запятой. (мин x, мин y, ширина, высота)" + презентационные атрибуты:

Все

<mask>

Наложение маски это комбинирование значений прозрачности и обрезки. Как и с обрезкой, чтобы определять секции маски, можно использовать формы, текст или контур. По умолчанию состояние маски полностью прозрачное, что противоположно проекции обрезки. Графический объект в маске устанавливает, какие части маски будут непрозрачными

maskUnits="'userSpaceOnUse' или 'objectBoundingBox'. Устанавливает, будет ли маска считаться относительно всей области видимости или только объекта (по умолчанию 'objectBoundingBox')" maskContentUnits="Устанавливает, будет ли содержимое маски считаться относительно всей области видимости или только объекта. 'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'userSpaceOnUse')" x="проекция маски (по умолчанию -10%)" y="проекция маски (по умолчанию -10%)" width="проекция маски (по умолчанию 120%)" height="проекция маски (по умолчанию 120%)"

metadata

Задает метаданные

 

Элемент

Описание

Атрибуты

missing-glyph

   

mpath

   

<path>

Определяет контур

d="набор команд, определяющих контур" pathLength="если задан, контур будет масштабирован таким образом, что вычисленная длина точек контура будет равняться этому значению" transform="список трансформаций" + презентационные атрибуты:

Color, FillStroke, Graphics, Markers

<pattern>

Определяет паттерн. Сначала задаются координаты и размер показываемой области видимости. Затем в паттерн добавляются графические фигуры. Когда достигается край области видимости, паттерн повторяется

id="уникальный идентификатор паттерна." Обязателен. patternUnits="'userSpaceOnUse' или 'objectBoundingBox'. Задает систему координат паттерна. Первое значение определяет координаты относительно всей области видимости, второе относительно объекта, использующего паттерн." patternContentUnits="Устанавливает систему координат содержимого паттерна. 'userSpaceOnUse' или 'objectBoundingBox'" patternTransform="позволяет добавить трансформацию паттерна" x="положение паттерна относительно верхнего левого угла по горизонтали (по умолчанию 0)" y="положение паттерна относительно верхнего левого угла по горизонтали (по умолчанию 0)"

Элемент

Описание

Атрибуты

   

width="ширина паттерна (по умолчанию 100%)" height="высота паттерна (по умолчанию 100%)" viewBox="указывает "видимую область" в области рисования SVG. 4 значения, разделенные пробелом или запятой. (мин x, мин y, ширина, высота)" xlink:href="ссылка на другой паттерн, значения атрибутов которого нужно унаследовать. Рекурсивный"

<polygon>

Определяет многоугольник - графическую фигуру, у которой есть по меньшей мере три стороны.

points="вершины многоугольника. Число вершин должно быть четным". Обязателен.

fill-rule="часть презентационных атрибутов заливки"

+

презентационные атрибуты:

Color, FillStroke, Graphics, Markers

<polyline>

Определяет ломанную линию

points="узлы ломанной линии". Обязателен.

+

презентационные атрибуты:

Color, FillStroke, Graphics, Markers

<radialGradient>

Определяет радиальный градиент. Радиальные градиенты создаются следующим образом: накладывается круг и плавно меняются значения между градиентными точками остановки от точки фокуса к внешнему радиусу.

gradientUnits="'userSpaceOnUse' или 'objectBoundingBox'. Используйте область видимости или объект, чтобы определить относительную позицию точек вектора. (по умолчанию 'objectBoundingBox')" gradientTransform="трансформация, применяемая к градиенту" cx="x центра градиента (число или % - по умолчанию 50%)"

Элемент

Описание

Атрибуты

   

cy="y центра градиента (по умолчанию 50%)" r="радиус градиента (по умолчанию 50%)" fx="x точки фокуса градиента (по умолчанию

0%)"

fy="y точки фокуса градиента (по умолчанию

0%)"

spreadMethod="'pad' или 'reflect' или 'repeat'" xlink:href="ссылка на другой градиент, чьи атрибуты используются как атрибуты по умолчанию. Работает рекурсивно"

<rect>

Определяет прямоугольник

x="x верхнего левого угла" y="y верхнего левого угла" rx="x радиуса (чтобы скруглить элемент)" ry="y радиуса (чтобы скруглить элемент)" width="ширина прямоугольника". Обязательный атрибут. height="высота прямоугольника". Обязательный атрибут. + презентационные атрибуты:

Color, FillStroke, Graphics

script

Контейнер для скриптов (например, ECMAScript)

 

set

Устанавливает значение атрибута на заданную длительность

 

<stop>

Точка остановки градиента

offset="смещение точки остановки (от 0 до 1 или от 0% до 100%)". Обязательный атрибут. stop-color="цвет точки остановки" stop-opacity="прозрачность точки остановки (от

Элемент

Описание

Атрибуты

   

0 до 1)"

style

Позволяет подключать каскадные таблицы стилей непосредственно внутри содержимого SVG

 

<svg>

Создает фрагмент SVG документа

x="x верхнего левого угла (по умолчанию 0)" y="y верхнего левого угла (по умолчанию 0)" width="ширина svg фрагмента (по умолчанию

100%)"

height="высота svg фрагмента (по умолчанию

100%)"

viewBox="точки "видимости" в этой SVG области рисования. 4 значения, разделенных пробелом или запятой. (мин x, мин y, ширина, высота)" preserveAspectRatio="'none' или любая из 9 комбинаций вида 'xVALYVAL', где VAL это 'min', 'mid' или 'max'. (по умолчанию xMidYMid)" zoomAndPan="'magnify' или 'disable'. Значение 'magnify' позволяет пользователям панаромировать и увеличивать файл (по умолчанию magnify)" xml="внешний <svg> элемент должен устанавливать SVG и свое пространство имен:

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xml:space="preserve"" + презентационные атрибуты:

Элемент

Описание

Атрибуты

   

Все

switch

   

symbol

   

<text>

Определяет текст

x="список координат по оси x. N-e количество x-координат соответствует n-му количеству символов текста. Если есть дополнительные символы, которые идут после того, как позиции закончились, то они ставятся после последнего символа. 0 по умолчанию" y="список координат по оси y. (см. x). 0 по умолчанию" dx="список длин по оси x, сдвигающие символы относительно абсолютной позиции последнего нарисованного глифа. (см. x)" dy="список длин по оси y, сдвигающие символы относительно абсолютной позиции последнего нарисованного глифа. (см. x)" rotate="список значений разворотов. N-e количество разворотов соответствует n-му количеству символов текста. Дополнительным символам не дается последнее значение разворота" textLength="конечная длина текста, в которую средства просмотра SVG будут пытаться уместить текст, изменяя расстояние между символами и их размеры. (по умолчанию стандартная длина текста)"

Элемент

Описание

Атрибуты

   

lengthAdjust="указывает средствам просмотра, чем манипулировать, пробелами и символами

или только пробелами, для того, чтобы сделать текст нужной длины, если задана конечная длина текста. Принимает значения 'spacing' и 'spacingAndGlyphs'"

+

презентационные атрибуты:

Color, FillStroke, Graphics, FontSpecification, TextContentElements

textPath

   

title

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

 

<tref>

Ссылается на элемент <text> в SVG документе и повторно использует его

Идентичны элементу <text>

<tspan>

Идентичен элементу <text>, но при этом может быть вложен в тег <text> и в сам себя

Идентичны элементу <text>

+

дополнительно:

 

xlink:href="ссылка на элемент <text>"

<use>

Использует URI, чтобы ссылаться на теги <g>, <svg> или другие графические элементы с уникальным атрибутом id и копировать его. Копия будет только ссылкой на оригинал, таким образом существовать в документе будет только оригинал. Любые изменения в оригинале будут отражаться во всех его копиях.

x="координата x верхнего левого угла клонированного элемента" y="координата y верхнего левого угла клонированного элемента" width="ширина клонированного элемента" height="высота клонированного элемента" xlink:href="URI ссылка на клонированный

Элемент

Описание

Атрибуты

   

элемент" + презентационные атрибуты:

Все

view

   

vkern