Справочник SVG
SVG-рисунки и изображения создаются с помощью различных элементов. Здесь вы найдёте таблицу SVG-элементов с описаниями и атрибутами.
SVG (Scalable Vector Graphics) — это основанный на XML язык разметки для описания двумерной графики, которая остаётся чёткой при любом размере. Каждая фигура, градиент, фильтр или анимация в SVG-документе записывается с помощью специального элемента. Эта страница является кратким справочником по всем стандартным SVG-элементам, сгруппированным по назначению, с кратким описанием и наиболее часто используемыми атрибутами. Используйте её как дополнение к практическим главам — начните с введения в SVG и SVG в HTML5 — и возвращайтесь сюда, когда нужно вспомнить, что делает элемент или какие атрибуты он принимает.
В столбце Атрибуты запись вида attr="…" описывает значение, которое ожидает изменяемый атрибут, а presentation attributes: … перечисляет группы атрибутов представления, поддерживаемых элементом и стилизуемых через CSS. Устаревшие элементы помечены, и там, где существует современная замена, на неё дана ссылка.
Основные фигуры
Геометрические примитивы, используемые для рисования видимой графики в SVG.
| Элемент | Описание | Атрибуты |
|---|---|---|
<circle> | Рисует окружность. См. главу SVG circle. | cx="координата центра окружности по оси x" cy="координата центра окружности по оси y" r="радиус окружности (обязательный)" presentation attributes: Color, FillStroke, Graphics |
<ellipse> | Рисует эллипс. См. главу SVG ellipse. | cx="координата центра эллипса по оси x" cy="координата центра эллипса по оси y" rx="радиус по оси x (обязательный)" ry="радиус по оси y (обязательный)" presentation attributes: Color, FillStroke, Graphics |
<line> | Рисует прямую линию между двумя точками. См. главу SVG line. | x1="начальная точка линии по оси x" y1="начальная точка линии по оси y" x2="конечная точка линии по оси x" y2="конечная точка линии по оси y" presentation attributes: Color, FillStroke, Graphics, Markers |
<path> | Рисует произвольную фигуру на основе набора команд пути. См. главу SVG path. | d="набор команд, задающих путь" pathLength="общая длина пути" transform="список преобразований" presentation attributes: Color, FillStroke, Graphics, Markers |
<polygon> | Рисует замкнутую фигуру из списка не менее трёх точек. См. главу SVG polygon. | points="точки многоугольника (обязательно не менее трёх)" fill-rule="часть атрибутов представления FillStroke" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Рисует незамкнутую фигуру из соединённых прямолинейных сегментов. См. главу SVG polyline. | points="точки на полилинии (обязательные)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Рисует прямоугольник, при необходимости со скруглёнными углами. См. главу SVG rectangle. | x="верхний левый угол прямоугольника по оси x" y="верхний левый угол прямоугольника по оси y" rx="радиус скругления угла по оси x" ry="радиус скругления угла по оси y" width="ширина прямоугольника (обязательная)" height="высота прямоугольника (обязательная)" presentation attributes: Color, FillStroke, Graphics |
Текст
Элементы для отображения и размещения текста внутри SVG. См. главу SVG text.
| Элемент | Описание | Атрибуты |
|---|---|---|
<text> | Рисует текстовую строку в заданной позиции. | x="список позиций по оси x; n-я позиция присваивается n-му символу (по умолчанию 0)" y="список позиций по оси y (см. x; по умолчанию 0)" dx="смещения символов относительно абсолютной позиции предыдущего глифа по x (см. x)" dy="смещения символов относительно абсолютной позиции предыдущего глифа по y (см. x)" rotate="список поворотов; n-й поворот применяется к n-му символу" textLength="целевая длина, в которую браузер пытается уместить текст, регулируя межсимвольный интервал и/или глифы (по умолчанию: нормальная длина текста)" lengthAdjust="что регулировать для соответствия textLength: 'spacing' или 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Размещает текст вдоль контура referenced-элемента <path>. | href="URI-ссылка на путь, вдоль которого размещается текст" |
<tspan> | Выделяет подстроку текста внутри <text> или <tspan> для стилизации или перепозиционирования. | Идентично элементу <text>, а также: href="ссылка на элемент <text>" |
Градиенты и паттерны
Серверы заливки, заполняющие или обводящие фигуры градиентами или повторяющимися тайлами. См. главы линейные градиенты и радиальные градиенты.
| Элемент | Описание | Атрибуты |
|---|---|---|
<linearGradient> | Определяет градиент, переходящий между цветами вдоль прямого вектора. | id="уникальный id для ссылки на этот градиент (обязательный для использования)" gradientUnits="'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'objectBoundingBox')" gradientTransform="преобразование, применяемое к градиенту" x1="начало вектора градиента по оси x (число или %; по умолчанию 0%)" y1="начало вектора градиента по оси y (по умолчанию 0%)" x2="конец вектора градиента по оси x (по умолчанию 100%)" y2="конец вектора градиента по оси y (по умолчанию 0%)" spreadMethod="'pad', 'reflect' или 'repeat'" href="ссылка на другой градиент, атрибуты и остановки которого наследуются как значения по умолчанию (рекурсивно)" |
<radialGradient> | Определяет градиент, переходящий между цветами от центральной точки наружу. | gradientUnits="'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'objectBoundingBox')" gradientTransform="преобразование, применяемое к градиенту" cx="центр градиента (число или %; по умолчанию 50%)" cy="центр градиента (по умолчанию 50%)" r="радиус градиента (по умолчанию 50%)" fx="фокусная точка градиента (по умолчанию 0%)" fy="фокусная точка градиента (по умолчанию 0%)" spreadMethod="'pad', 'reflect' или 'repeat'" href="ссылка на другой градиент, атрибуты и остановки которого наследуются как значения по умолчанию (рекурсивно)" |
<stop> | Определяет один цвет и его позицию внутри градиента. | offset="смещение для этой остановки, от 0 до 1 или от 0% до 100% (обязательное)" stop-color="цвет этой остановки" stop-opacity="непрозрачность этой остановки, от 0 до 1" |
<pattern> | Определяет графический тайл, повторяющийся для заливки или обводки фигуры. | id="уникальный id для ссылки на этот паттерн (обязательный)" patternUnits="'userSpaceOnUse' или 'objectBoundingBox'; второе значение делает x, y, width, height дробью (или %) от ограничивающего прямоугольника объекта, использующего паттерн" patternContentUnits="'userSpaceOnUse' или 'objectBoundingBox'" patternTransform="преобразование, применяемое ко всему паттерну" x="смещение паттерна от верхнего левого угла (по умолчанию 0)" y="смещение паттерна от верхнего левого угла (по умолчанию 0)" width="ширина тайла паттерна (по умолчанию 100%)" height="высота тайла паттерна (по умолчанию 100%)" viewBox="область, видимая в этой области рисования: min-x, min-y, width, height (разделённые пробелами или запятыми)" href="ссылка на другой паттерн, атрибуты которого наследуются как значения по умолчанию, а дочерние элементы также наследуются (рекурсивно)" |
Фильтры
Примитивы фильтра (семейство fe*) и контейнер <filter>, объединяющиеся для создания графических эффектов: размытия, освещения и сдвига цветов. См. главы введение в фильтры SVG, эффекты размытия и тени.
| Элемент | Описание | Атрибуты |
|---|---|---|
<filter> | Контейнер, объединяющий примитивы фильтра в многократно используемый именованный эффект фильтра. | |
<feBlend> | Смешивает два входных изображения, используя режим смешивания. | mode="режим смешивания: normal|multiply|screen|darken|lighten" in="первый вход: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="второй вход для смешивания" result |
<feColorMatrix> | Применяет матричное преобразование к каналам цвета и альфа входного изображения. | in="определяет входное изображение" type="matrix|saturate|hueRotate|luminanceToAlpha" values="значения для выбранного типа" result |
<feComponentTransfer> | Ремаппирует каждый канал цвета/альфа независимо с помощью дочерних элементов feFunc*. | in="определяет входное изображение" result |
<feFuncA> | Определяет функцию передачи для альфа-канала <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Определяет функцию передачи для красного канала <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Определяет функцию передачи для зелёного канала <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Определяет функцию передачи для синего канала <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Объединяет два входа с помощью операторов компоузитинга Porter-Duff или арифметических операторов. | in="определяет первое входное изображение" in2="определяет второе входное изображение" operator="over|in|out|atop|xor|arithmetic" k1="арифметический коэффициент" k2="арифметический коэффициент" k3="арифметический коэффициент" k4="арифметический коэффициент" result |
<feConvolveMatrix> | Применяет матрицу свёртки (ядро) для эффектов повышения резкости или тиснения. | in="определяет входное изображение" order="количество столбцов и строк матрицы ядра" kernelMatrix="список значений ядра" divisor="делитель для значений ядра" bias="значение смещения" targetX="позиция матрицы свёртки по x" targetY="позиция матрицы свёртки по y" edgeMode="duplicate|wrap|none" kernelUnitLength="длина ядра" preserveAlpha="true|false" result |
<feDiffuseLighting> | Освещает входное изображение как рассеянную (матовую) поверхность, используя альфа-канал как карту рельефа. | in="определяет входное изображение" surfaceScale="масштабный коэффициент поверхности" diffuseConstant="константа диффузного отражения" kernelUnitLength="длина ядра" result |
<feDisplacementMap> | Смещает пиксели одного входа, используя цветовые каналы другого. | in="определяет первое входное изображение" in2="определяет второе входное изображение" scale="масштабный коэффициент" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Определяет удалённый (направленный) источник света для фильтра освещения. | azimuth="угол азимута" elevation="угол возвышения" |
<feFlood> | Заливает область фильтра одним цветом и непрозрачностью. | flood-color="цвет заливки" flood-opacity="непрозрачность заливки" result |
<feGaussianBlur> | Применяет гауссово размытие к входному изображению. | in="определяет входное изображение" stdDeviation="стандартное отклонение для размытия" edgeMode="duplicate|wrap|none" result |
<feImage> | Загружает внешнее изображение или referenced-элемент в качестве входных данных фильтра. | href="URI-ссылка на изображение" preserveAspectRatio="'none' или одна из 9 комбинаций 'xVALYVAL'" result |
<feMerge> | Накладывает несколько входов слоями, используя дочерние элементы <feMergeNode>. | result |
<feMergeNode> | Определяет один входной слой для родительского элемента <feMerge>. | in="определяет входное изображение" |
<feMorphology> | Сужает (эрозия) или расширяет (дилатация) входное изображение. | in="определяет входное изображение" operator="erode|dilate" radius="радиус эффекта" result |
<feOffset> | Сдвигает входное изображение на заданное смещение (основа эффекта тени). | in="определяет входное изображение" dx="горизонтальное смещение" dy="вертикальное смещение" result |
<fePointLight> | Определяет точечный источник света для фильтра освещения. | x="позиция источника света по x" y="позиция источника света по y" z="позиция источника света по z" |
<feSpecularLighting> | Освещает входное изображение как зеркальную (блестящую) поверхность, используя альфа-канал как карту рельефа. | in="определяет входное изображение" surfaceScale="масштабный коэффициент поверхности" specularConstant="константа зеркального отражения" specularExponent="показатель зеркального отражения" kernelUnitLength="длина ядра" result |
<feSpotLight> | Определяет прожекторный источник для фильтра освещения. | x="позиция источника света по x" y="позиция источника света по y" z="позиция источника света по z" pointsAtX="координата x точки, на которую направлен свет" pointsAtY="координата y точки, на которую направлен свет" pointsAtZ="координата z точки, на которую направлен свет" specularExponent="показатель зеркального отражения" limitingConeAngle="угол ограничивающего конуса" |
<feTile> | Повторяет (тайлирует) входной сигнал фильтра для заполнения области фильтра. | in="определяет входное изображение" result |
<feTurbulence> | Генерирует шум Перлина или фрактальный шум (для текстур вроде облаков или мрамора). | baseFrequency="базовая частота" numOctaves="количество октав" seed="начальное значение" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Анимация
Элементы, изменяющие значения атрибутов с течением времени. Они являются дочерними по отношению к анимируемому элементу (или ссылаются на него).
| Элемент | Описание | Атрибуты |
|---|---|---|
<animate> | Анимирует один атрибут или свойство элемента за временной интервал. | attributeName="имя целевого атрибута" by="относительное значение смещения" from="начальное значение" to="конечное значение" dur="продолжительность" repeatCount="количество повторений анимации" |
<animateMotion> | Перемещает элемент вдоль траектории движения с течением времени. | calcMode="режим интерполяции: 'discrete', 'linear', 'paced' или 'spline'" path="траектория движения" keyPoints="расстояние, на которое объект перемещается вдоль пути для каждого значения keyTimes" rotate="преобразование поворота" href="URI-ссылка на элемент <path>, задающий траекторию движения" |
<animateTransform> | Анимирует атрибут преобразования (перемещение, масштабирование, поворот, наклон) с течением времени. | by="относительное значение смещения" from="начальное значение" to="конечное значение" type="тип преобразования: 'translate', 'scale', 'rotate', 'skewX' или 'skewY'" |
<mpath> | Ссылается на внешний элемент <path> для использования в качестве траектории движения для <animateMotion>. | href="URI-ссылка на элемент пути" |
<set> | Устанавливает атрибут в значение на заданную продолжительность (анимация без интерполяции). | attributeName="имя целевого атрибута" to="устанавливаемое значение" begin="когда начинается изменение" dur="как долго удерживается значение" |
Контейнеры и структура
Элементы, группирующие, ссылающиеся, определяющие или организующие контент, а не рисующие его напрямую.
| Элемент | Описание | Атрибуты |
|---|---|---|
<a> | Создаёт ссылку на веб-страницу, файл, адрес электронной почты, местоположение или любой другой URL. | href target |
<clipPath> | Определяет обтравочный путь, ограничивающий отображаемую область элемента. | clipPathUnits="'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'userSpaceOnUse')" |
<defs> | Хранит графические объекты для последующего использования по ссылке (не отображается напрямую). | |
<desc> | Предоставляет только текстовое описание SVG-графики или контейнерного элемента (для доступности). | |
<foreignObject> | Встраивает контент из другого XML-пространства имён (например, HTML) внутрь SVG, позволяя браузеру его отрендерить. | x y width height |
<g> | Группирует элементы, чтобы преобразования и атрибуты представления применялись ко всем сразу. | id="имя группы" fill="цвет заливки группы" opacity="непрозрачность группы" presentation attributes: All |
<image> | Встраивает растровое или SVG-изображение в документ. | x="верхний левый угол изображения по оси x" y="верхний левый угол изображения по оси y" width="ширина изображения (обязательная)" height="высота изображения (обязательная)" href="путь к изображению (обязательный)" presentation attributes: Color, Graphics, Images, Viewports |
<marker> | Определяет графику (например, наконечник стрелки), отображаемую в вершинах линии, полилинии или пути через marker-start, marker-mid и marker-end. Определите маркер до того, как ссылаться на него. | markerUnits="'strokeWidth' или 'userSpaceOnUse'; при 'strokeWidth' одна единица равна одной ширине обводки, иначе маркер не масштабируется (по умолчанию 'strokeWidth')" refX="позиция, в которой маркер соединяется с вершиной (по умолчанию 0)" refY="позиция, в которой маркер соединяется с вершиной (по умолчанию 0)" orient="'auto' или угол; 'auto' делает ось x касательной к вершине (по умолчанию 'auto')" markerWidth="ширина маркера (по умолчанию 3)" markerHeight="высота маркера (по умолчанию 3)" viewBox="границы viewport: min-x, min-y, width, height (разделённые пробелами или запятыми)" presentation attributes: All |
<mask> | Определяет альфа-маску, сочетающую непрозрачность и обрезку; текст, фигуры или пути определяют, какие части видны (по умолчанию полностью прозрачна). | maskUnits="система координат для x, y, width, height маски: 'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'objectBoundingBox')" maskContentUnits="система координат для содержимого маски: 'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'userSpaceOnUse')" x="плоскость обрезки маски (по умолчанию -10%)" y="плоскость обрезки маски (по умолчанию -10%)" width="плоскость обрезки маски (по умолчанию 120%)" height="плоскость обрезки маски (по умолчанию 120%)" |
<metadata> | Содержит машиночитаемые метаданные (например, RDF) о документе; не отображается. | |
<script> | Встраивает или ссылается на скрипт (обычно JavaScript) для интерактивности. | href="URI внешнего скрипта" type="MIME-тип языка скрипта" |
<style> | Встраивает таблицу стилей CSS внутрь SVG-документа. | type="MIME-тип таблицы стилей (text/css)" media="медиазапрос, к которому применяются стили" |
<svg> | Корневой (или вложенный) контейнер, определяющий фрагмент SVG-документа и его систему координат. | x="верхний левый угол при встраивании (по умолчанию 0)" y="верхний левый угол при встраивании (по умолчанию 0)" width="ширина фрагмента (по умолчанию 100%)" height="высота фрагмента (по умолчанию 100%)" viewBox="область, видимая в этой области рисования: min-x, min-y, width, height (разделённые пробелами или запятыми)" preserveAspectRatio="'none' или одна из 9 комбинаций 'xVALYVAL', где VAL — 'min', 'mid' или 'max' (по умолчанию xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Отображает только первый дочерний элемент, чьи тестовые атрибуты (например, язык или поддержка функций) возвращают true. | |
<symbol> | Определяет многократно используемый шаблон, не отображаемый до тех пор, пока он не будет создан элементом <use>. | |
<title> | Предоставляет краткое доступное имя (часто отображаемое как подсказка) для родительского элемента. | |
<use> | Клонирует и отображает referenced-элемент (например, <svg>, <g> или фигуру) по его id. | x="верхний левый угол клонированного элемента по оси x" y="верхний левый угол клонированного элемента по оси y" width="ширина клонированного элемента" height="высота клонированного элемента" href="URI-ссылка на клонируемый элемент" presentation attributes: All |
<view> | Определяет именованное представление (viewBox и соотношение сторон), на которое можно нацелиться по URL-фрагменту. | viewBox preserveAspectRatio zoomAndPan="'magnify' или 'disable' (по умолчанию magnify)" |
Устаревшие элементы
Эти элементы устарели в SVG 2 и не должны использоваться в новых документах. Где существует современная замена, она указана в описании.
| Элемент | Описание | Атрибуты |
|---|---|---|
<altGlyph> | Управлял глифами, используемыми для отображения конкретных символов. Устарел в SVG 2; прямой замены нет (используйте Unicode-текст в <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Определял набор замен для глифов. Устарел в SVG 2; замены нет. | id |
<altGlyphItem> | Определял набор кандидатов для замены глифов. Устарел в SVG 2; замены нет. | id |
<color-profile> | Описывал цветовой профиль, применяемый к изображению. Устарел в SVG 2; используйте вместо него CSS at-rule @color-profile и функцию color(). | local="уникальный ID для локально хранимого цветового профиля" name="имя профиля" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI ресурса ICC-профиля" |
<cursor> | Определял независимый от платформы пользовательский курсор. Устарел в SVG 2; используйте вместо него CSS-свойство cursor. | x="верхний левый угол курсора по оси x (по умолчанию 0)" y="верхний левый угол курсора по оси y (по умолчанию 0)" href="URI изображения, используемого в качестве курсора" |
<font> | Определял SVG-шрифт. Устарел в SVG 2; используйте вместо него CSS @font-face с форматами веб-шрифтов. | |
<font-face> | Описывал характеристики шрифта. Устарел в SVG 2; используйте вместо него правило CSS @font-face. | |
<font-face-format> | Указывал тип шрифта, на который ссылается родительский <font-face-uri>. Устарел в SVG 2; используйте вместо него подсказку format() в CSS @font-face. | |
<font-face-name> | Ссылался на локальный шрифт по имени. Устарел в SVG 2; используйте вместо него функцию local() в CSS @font-face. | |
<font-face-src> | Отражал дескриптор src правил CSS @font-face. Устарел в SVG 2; используйте вместо него дескриптор src в CSS @font-face. | |
<font-face-uri> | Ссылался на удалённое определение текущего шрифта. Устарел в SVG 2; используйте вместо него src: url() в CSS @font-face. | |
<glyph> | Определял графику для конкретного глифа в SVG-шрифте. Устарел в SVG 2; замены нет. | |
<glyphRef> | Ссылался на глиф для использования в качестве альтернативы. Устарел в SVG 2; замены нет. | |
<hkern> | Определял горизонтальные кернинг-пары и корректировки в SVG-шрифте. Устарел в SVG 2; вместо этого используйте кернинг веб-шрифтов. | |
<missing-glyph> | Определял глиф, используемый когда символ не может быть отображён в SVG-шрифте. Устарел в SVG 2; замены нет. | |
<tref> | Ссылался на текстовое содержимое другого элемента и отображал его. Устарел в SVG 2; замены нет. | href="URI-ссылка на referenced текстовый контент" |
<vkern> | Определял вертикальные кернинг-пары в SVG-шрифте. Устарел в SVG 2; вместо этого используйте кернинг веб-шрифтов. |
Практика
Практика
Какие из перечисленных возможностей можно использовать в SVG при написании кода на HTML?
Was this page helpful?