Список 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