| Элемент | Описание | Атрибуты |
|---|---|---|
| <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 |
Список SVG элементов
