Html5 y SVG

Учебник HTML5 графики – SVG
SVG — это аббревиатура, и расшифровывается она как масштабируемая векторная графика (анг. Scalable Vector Graphics).
SVG входит в подмножество расширяемого языка разметки XML и предназначен для описания двумерной векторной или смешанной
векторно-растровой графики в формате XML.
SVG поддерживает как статическую, так и анимированную интерактивную графику или, иными словами, декларативную и скриптовую.
SVG не поддерживает описание трехмерных объектов (здесь не следует путать с имитацией трехмерности при помощи различных приемов).
Что необходимо знать, чтобы продолжить изучение данного Учебника SVG?
Прежде чем продолжить, вы должны обладать знаниями в следующих областях:
• HTML
• Базовый XML
Если вы чувствуете, что вам необходимо освежить свои знания в этих областях, то вы можете ознакомиться с соответствующими разделами
нашего сайта.
• Введение в SVG
• SVG в HTML
• SVG прямоугольник
• SVG круг
• SVG эллипс
• SVG прямая линия
• SVG многоугольник
• SVG ломаная линия
• SVG контур
• SVG текст
• SVG свойство stroke
• SVG фильтры
• SVG градиенты
• Список SVG элементов
Введение в 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 графики:
Вот HTML код, реализующий ее:

<!DOCTYPE html>
<html>
<body>
<h1>Моя первая SVG графика</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</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>:
SVG код:
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Объяснение:
• Атрибуты width и height элемента <rect> определяют ширину и высоту прямоугольника
• Атрибут style определяет CSS свойства прямоугольника
• CSS свойство fill определяет цвет заливки прямоугольника
• CSS свойство stroke-width определяет толщину рамки прямоугольника
• CSS свойство stroke определяет цвет рамки прямоугольника
Пример №2
В следующем примере используются новые атрибуты:
SVG код:
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
• Атрибут x определяет позицию прямоугольника слева (например, x="50" помещает прямоугольник в 50px от левого отступа)
• Атрибут y определяет позицию прямоугольника сверху (например, y="20" помещает прямоугольник в 20px от верхнего отступа)
• CSS свойство fill-opacity определяет прозрачность цвета заливки (допустимый диапазон: от 0 до 1)
• CSS свойство stroke-opacity определяет прозрачность цвета прорисовки (допустимый диапазон: от 0 до 1)
Пример №3
Определяем прозрачность всего элемента:
SVG код:
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
• CSS свойство opacity определяет значение прозрачности для всего элемента (допустимый диапазон: от 0 до 1)
Пример №4
В последнем примере создадим прямоугольник с закругленными углами:
SVG код:
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
• Атрибуты rx и ry закругляют углы прямоугольника
SVG круг
Чтобы нарисовать круг, используется элемент <circle>:
SVG код:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
• Атрибуты cx и cy определяют координаты X и Y центра круга. Если атрибуты cx и cy не определяются, то центр круга устанавливается
в координаты (0,0)
• Атрибут r определяет радиус круга
SVG эллипс
Чтобы создать эллипс, используется элемент <ellipse>.
Эллипс имеет достаточно близкое отношение к кругу. Разница заключается в том, что у эллипса радиусы по горизонтальной и вертикальной
оси разные, в то время как у круга они одинаковые.
Пример №1
Создадим эллипс:
SVG код:
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
• Атрибут cx определяет координату X центра эллипса
• Атрибут cy определяет координату Y центра эллипса
• Атрибут rx определяет горизонтальный радиус
• Атрибут ry определяет вертикальный радиус
Пример №2
Создадим три эллипса, расположенные друг над другом:
SVG код:
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
Пример №3
В следующем примере скомбинируем два эллипса (желтый и белый):
SVG код:
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
SVG прямая линия

Чтобы создать прямую линию, используется элемент <line>:
SVG код:
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
• Атрибут x1 определяет координату X стартовой точки линии
• Атрибут y1 определяет координату Y стартовой точки линии
• Атрибут x2 определяет координату X конечной точки линии
• Атрибут y2 определяет координату Y конечной точки линии
SVG многоугольник
Элемент <polygon> используется для создания графической фигуры, содержащей как минимум три стороны.
Многоугольники создаются из прямых линий, при этом контур "закрывается" (все линии связаны).
Пример №1
Создаем многоугольник с тремя сторонами:
SVG код:
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
• Атрибут points определяет координаты X и Y каждого угла многоугольника
Пример № 2
Создаем многоугольник с четырьмя сторонами:
SVG код:
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Пример №3
Нарисуем звезду при помощи элемента <polygon>:
SVG код:
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
Пример №4
Изменим свойство fill-rule на "evenodd":
SVG код:
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG ломаная линия

Элемент <polyline> используется для создания, так называемой, ломаной линии.
Ломаная линия создается из прямых линий, при этом контур "не замыкается".
Пример №1
Элемент <polyline> используется, чтобы создавать любую графическую фигуру, состоящую только из прямых линий:
SVG код:
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
• Атрибут points определяет координаты X и Y каждого "перелома" линии
Пример №2
Другой пример фигуры, состоящей только из прямых линий:
SVG код:
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg> SVG контур

Для создания контура используется элемент <path>.
В качестве данных контура используются следующие команды:
• M = переместить указатель
• L = нарисовать линию
• H = нарисовать горизонтальную линию
• V = нарисовать вертикальную линию
• C = нарисовать кубическую кривую Безье с двумя контрольными точками
• S = нарисовать сглаженную кубическую кривую Безье с одной контрольной точкой
• Q = нарисовать квадратичную кривую Безье с одной контрольной точкой
• T = нарисовать сглаженную квадратичную кривую Безье. Контрольной точкой будет отражение контрольной точки предыдущей
команды.
• A = нарисовать эллиптическую кривую
• Z = закрыть контур
Примечание: Все вышеприведенные команды имеют вариант записи в нижнем регистре. Если команда записана большими буквами, то
позиционирование будет абсолютным. Если маленькими буквами, то позиционирование будет относительным.
Пример №1
В следующем примере определяется контур, который начинается в координатах (150,0), затем проводится линия в координаты (75,200), затем
проводится линия в координаты (225,200) и, наконец, контур закрывается в начальных координатах (150,0):
SVG код:
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Пример №2
Кривые Безье используются для моделирования плавных кривых линий, масштаб которых можно бесконечно увеличивать или уменьшать.
Обычно, выбирается две конечных точных точки и одну или две контрольных. Кривую Безье с одной контрольной точкой называют
квадратичной кривой Безье, а с двумя контрольными точками — кубической.
В следующем примере создается кубическая кривая Безье. Здесь A и C — соответственно начальная и конечная точки, B — контрольная
точка:
SVG код:
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"

<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"

<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>

<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Сложно? ДА!!!! Именно из-за сложности при рисовании контуров и рекомендуется использовать специальный SVG редактор для создания
сложной графики.
SVG текст
Для вывода текста используется элемент <text>.
Пример №1
Выводим текст:
SVG код:
<text x="0" y="15" fill="red">Я люблю SVG!</text>
</svg>
Пример №2
Повернем текст:
SVG код:
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">Я люблю SVG</text>
</svg>
Пример №3
Элемент <text> может содержать любое число подгрупп, состоящих из элемента <tspan>. Каждый элемент <tspan> может определять свои
данные о формате и позиционировании.
Текст на нескольких строках (с элементом <tspan>):
.
SVG код:
<text x="10" y="20" style="fill:red;">Несколько строк:
<tspan x="10" y="45">Первая строка .</tspan>
<tspan x="10" y="70">Вторая строка .</tspan>
</text>
</svg>
Пример №4
Текст как ссылка (с элементом <a>):
SVG код:
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://msiter.ru/" target="_blank">
<text x="0" y="15" fill="red">Я люблю SVG!</text>
</a>
</svg>
SVG свойство stroke

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

Свойство stroke определяет цвет линии, текста или контура (обводки) элемента:
SVG код:
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
SVG свойство stroke-width

Свойство stroke-width определяет толщину линии, текста или контура (обводки) элемента:
SVG код:
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
</g>
</svg>
SVG свойство stroke-linecap

Свойство stroke-linecap определяет различные типы концов открытых линий:
SVG код:
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
SVG свойство stroke-dasharray

Свойство stroke-dasharray используется для создания прерывистых линий:
SVG код:
<g fill="none" stroke="black" stroke-width="4">

<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</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>, чтобы создать эффект размытия:
SVG код:
<defs>
<filter id="f0" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f0)" />
</svg>
• Атрибут id элемента <filter> определяет уникальное имя фильтра
• Эффект размытия создается при помощи элемента <feGaussianBlur>
• Часть in="SourceGraphic" определяет, что эффект создается для всего элемента
• Атрибут stdDeviation определяет размер размытия
• Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"
Создание тени (<feOffset>)

Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или
графический элемент) и немного сдвигается в XY плоскостях.
Пример
Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое
изображение (при помощи элемента <feBlend>):
SVG код:
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
</svg>
• Атрибут id элемента <filter> определяет уникальное имя фильтра
• Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"
Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):
SVG код:
<defs>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
</svg>
• Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия
Теперь делаем тень черной:
SVG код:
<defs>
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
</filter>
</defs>
</svg>
• Значение атрибута in элемента <feOffset> изменено на "SourceAlpha", которое использует альфа-канал вместо всего RGBA набора
пикселя для создания размытия
Теперь обработаем тень как цвет:
SVG код:
<defs>
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
</filter>
</defs>
</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 код:
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
• Атрибут id элемента <linearGradient> определяет уникальное имя градиента
• Атрибуты x1, x2, y1, y2 элемента <linearGradient> определяют начальную и конечную позицию градиента
• Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>.
Атрибут offsetиспользуется, чтобы определить, где цвет градиента начинается и заканчивается
• Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом
Пример №2
Создадим эллипс с вертикальным линейным градиентом от желтого цвета к красному:
SVG код:
<defs>
</linearGradient>
</defs>
</svg>
Пример №3
Создадим эллипс с горизонтальным линейным градиентом от желтого цвета к красному и добавим текст внутри эллипса:
SVG код:
<defs>
</linearGradient>
</defs>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
• Элемент <text> добавляет текст
Радиальный градиент - <radialGradient>

Чтобы определить радиальный градиент, используется элемент <radialGradient>.
Пример №1
Создадим эллипс с радиальным градиентом от белого цвета к синему:
SVG код:
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
</radialGradient>
</defs>
</svg>
• Атрибут id элемента <radialGradient> определяет уникальное имя градиента
• Атрибуты cx, cy и r определяют внешний круг, fx и fy определяют внутренний круг
• Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>.
Атрибут offsetиспользуется, чтобы определить, где цвет градиента начинается и заканчивается
• Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом
Пример №2
Создадим еще один эллипс с радиальным градиентом от белого цвета к синему:
SVG код:
<defs>
<radialGradient id="grad2" cx="30%" cy="30%" r="30%" fx="50%" fy="50%">
</radialGradient>
</defs>
</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> Определяет описание цветового профиля (когда стили документа local="уникальный ID сохраненного локально
определяются при помощи CSS) цветового профиля"
name=""
rendering-intent="auto | perceptual | relative-
colorimetric | saturation | absolute-colorimetric"
xlink:href="URI на ICC ресурс профиля"
<cursor> Определяет платформо-независимый пользовательский курсор x="x-координата верхнего левого угла курсора
(по умолчанию 0)"
y="y-координата верхнего левого угла курсора
xlink:href="URI изображения, используемого
как курсор"
<defs> Контейнер для элементов, на которые будут ссылаться другие

элементы
<desc> Текстовое описание для контейнерных или графических элементов

в SVG (пользовательские программы могут выводить данный текст
как всплывающую подсказку)
<ellipse> Определяет эллипс cx="x-координата центра эллипса"

cy="y-координата центра эллипса"
rx="длина радиуса по оси x". Обязательный
параметр.
ry="длина радиуса по оси y". Обязательный
параметр.
<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> Маркеры устанавливаются в вершинах прямых и ломаных линий, markerUnits="'strokeWidth' или

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

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="список трансформаций"
<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="часть презентационных атрибутов
заливки"
<polyline> Определяет ломанную линию points="узлы ломанной линии". Обязателен.

<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="высота прямоугольника". Обязательный
атрибут.
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> или другие x="координата x верхнего левого угла
графические элементы с уникальным атрибутом id и копировать клонированного элемента"
его. Копия будет только ссылкой на оригинал, таким образом y="координата y верхнего левого угла
существовать в документе будет только оригинал. Любые клонированного элемента"
изменения в оригинале будут отражаться во всех его копиях. width="ширина клонированного элемента"
height="высота клонированного элемента"
xlink:href="URI ссылка на клонированный
элемент"
Все
view
vkern

Html5 y SVG

Загружено:

Сведения о документе

Описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Описание:

Авторское право:

Доступные форматы

Html5 y SVG

Оригинальное название:

Загружено:

Описание:

Авторское право:

Доступные форматы

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

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

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

<h1>Моя первая SVG графика</h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

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

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

<rect x="50" y="20" width="150" height="150"

<rect x="50" y="20" width="150" height="150"

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />

<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />

<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />

<svg height="100" width="500">

<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />

<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />

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

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />

<polygon points="100,10 40,198 190,78 10,78 160,198"

<polygon points="100,10 40,198 190,78 10,78 160,198"

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

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"

</svg> SVG контур

<path d="M150 0 L75 200 L225 200 Z" />

<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"

stroke-width="3" fill="none" />

<path id="lineBC" d="M 250 50 l 150 300" stroke="red"

stroke-width="3" fill="none" />

<path d="M 100 350 q 150 -300 300 0" stroke="blue"

stroke-width="5" fill="none" />

<g stroke="black" stroke-width="3" fill="black">

<circle id="pointA" cx="100" cy="350" r="3" />

<circle id="pointB" cx="250" cy="50" r="3" />

<circle id="pointC" cx="400" cy="350" r="3" />

<g font-size="30" font-family="sans-serif" fill="black" stroke="none"

<text x="100" y="350" dx="-30">A</text>

<text x="250" y="50" dy="-10">B</text>

<text x="400" y="350" dx="30">C</text>

<text x="0" y="15" fill="red">Я люблю SVG!</text>

<text x="0" y="15" fill="red" transform="rotate(30 20,40)">Я люблю SVG</text>

<text x="10" y="20" style="fill:red;">Несколько строк:

<tspan x="10" y="45">Первая строка .</tspan>

<tspan x="10" y="70">Вторая строка .</tspan>

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">

<text x="0" y="15" fill="red">Я люблю SVG!</text>

SVG свойство stroke

SVG свойство stroke

<path stroke="black" d="M5 40 l215 0" />

<path stroke="blue" d="M5 60 l215 0" />

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

<g fill="none" stroke="black">

<path stroke-width="2" d="M5 20 l215 0" />