Список 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="вводная второго изображения для операции смешивания"
feColorMatrixSVG фильтр. Применяет матричную трансформацию
feComponentTransferSVG фильтр. Выполняет покомпонентную модификацию данных
feCompositeSVG фильтр.
feConvolveMatrixSVG фильтр.
feDiffuseLightingSVG фильтр.
feDisplacementMapSVG фильтр.
feDistantLightSVG фильтр. Определяет источник света
feFloodSVG фильтр.
feFuncASVG фильтр. Подэлемент для feComponentTransfer
feFuncBSVG фильтр. Подэлемент для feComponentTransfer
feFuncGSVG фильтр. Подэлемент для feComponentTransfer
feFuncRSVG фильтр. Подэлемент для feComponentTransfer
feGaussianBlurSVG фильтр. Выполняет размытие изображения по Гауссу
feImageSVG фильтр.
feMergeSVG фильтр. Создает слои изображений друг над другом
feMergeNodeSVG фильтр. Подэлемент для feMerge
feMorphologySVG фильтр. Выполняет "утолщение" (fattening) или "утончение" (thinning) текущего графического объекта
feOffsetSVG фильтр. Сдвигает изображение относительно его текущей позиции
fePointLightSVG фильтр.
feSpecularLightingSVG фильтр.
feSpotLightSVG фильтр.
feTileSVG фильтр.
feTurbulenceSVG фильтр.
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