Справочник SVG
SVG-рисунки и изображения создаются с помощью разных элементов. Здесь вы можете найти таблицу элементов SVG с соответствующими описаниями и атрибутами.
Элементы SVG
| Element | Description | Attributes |
|---|---|---|
<a> | Создаёт ссылку на другие веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или любой другой URL. | href target |
<altGlyph> | Управляет глифами, используемыми для отображения определённых символьных данных. Устарело в SVG 2. | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Указывает набор подстановок для глифов. Устарело в SVG 2. | id |
<altGlyphItem> | Указывает набор-кандидат для подстановки глифов. Устарело в SVG 2. | id |
<animate> | Указывает, как атрибут элемента изменяется со временем. | attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of times the animation will take place" |
<animateMotion> | Заставляет указанный элемент перемещаться вдоль траектории движения. | calcMode="interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'" path="motion path" keyPoints="how far the object will move along the motion path for each keyTimes values" rotate="rotation transformation" href = URI reference to the <path> element specifying the motion path |
<animateTransform> | Анимирует атрибут преобразования у целевого элемента, позволяя анимации управлять переносом, вращением, масштабированием и/или наклоном. | by="relative offset value" from="starting value" to="ending value" type="transformation type which is to have its values change in time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
<circle> | Указывает круг. | cx="x-axis center of the circle" cy="y-axis center of the circle" r="radius of the circle". Required. presentation attributes: Color, FillStroke, Graphics |
<clipPath> | Указывает обрезающий контур. | clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. default: 'userSpaceOnUse' |
<color-profile> | Указывает описание цветового профиля, используемого для изображения. | local="unique ID for a color profile stored locally" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href = URI of an ICC profile resource |
<cursor> | Указывает пользовательский курсор, независимый от платформы. Устарело в SVG 2. | x="x-axis top-left corner of the cursor (default is 0)" y="y-axis top-left corner of the cursor (default is 0)" href = URI of the image to use as the cursor |
<defs> | Сохраняет графические объекты, которые будут использованы позже. | |
<desc> | Предоставляет текстовое описание для любого графического элемента SVG или контейнерного элемента. | |
<ellipse> | Указывает эллипс. | cx="x-axis center of the ellipse" cy="y-axis center of the ellipse" rx="length of the ellipse's radius along the x-axis". Required. ry="length of the ellipse's radius along the y-axis". Required. presentation attributes: Color, FillStroke, Graphics |
<feBlend> | Смешивает два объекта вместе. | mode="image blending modes normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
<feColorMatrix> | Примитив фильтра SVG. | in type="matrix|saturate|hueRotate|luminanceToAlpha" values result |
<feComposite> | Примитив фильтра SVG. | in="identifies the first input image" in2="identifies the second input image" operator="over|in|out|atop|xor|arithmetic" k1="arithmetic coefficient" k2="arithmetic coefficient" k3="arithmetic coefficient" k4="arithmetic coefficient" result |
<feConvolveMatrix> | Примитив фильтра SVG. | in="identifies the input image" order="number of columns and rows in the kernel matrix" kernelMatrix="list of kernel values" divisor="divisor for the kernel values" bias="bias value" targetX="x position of the convolution matrix" targetY="y position of the convolution matrix" edgeMode="duplicate|wrap|none" kernelUnitLength="length of the kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | Примитив фильтра SVG. | in="identifies the input image" surfaceScale="surface scale factor" diffuseConstant="diffuse reflection constant" kernelUnitLength="length of the kernel" result |
<feDisplacementMap> | Примитив фильтра SVG. | in="identifies the first input image" in2="identifies the second input image" scale="scale factor" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Примитив фильтра SVG. | azimuth="azimuth angle" elevation="elevation angle" |
<feFlood> | Примитив фильтра SVG. | flood-color="flood color" flood-opacity="flood opacity" result |
<feFuncA> | Фильтр SVG. Подэлемент feComponentTransfer. | |
<feFuncB> | Фильтр SVG. Подэлемент feComponentTransfer. | |
<feFuncG> | Фильтр SVG. Подэлемент feComponentTransfer. | |
<feFuncR> | Фильтр SVG. Подэлемент feComponentTransfer. | |
<feGaussianBlur> | Фильтр SVG. Создаёт гауссово размытие изображения. | in="identifies the input image" stdDeviation="standard deviation for the blur" edgeMode="duplicate|wrap|none" result |
<feImage> | Фильтр SVG. | href = URI reference to the image preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL'" result |
<feMerge> | Фильтр SVG. Создаёт слои изображения. | result |
<feMergeNode> | Фильтр SVG. Подэлемент feMerge. | in="identifies the input image" |
<feMorphology> | Фильтр SVG. Выполняет «утончение» или «утолщение». | in="identifies the input image" operator="erode|dilate" radius="radius of the effect" result |
<feOffset> | Фильтр SVG. Смещает входное изображение. | in="identifies the input image" dx="horizontal offset" dy="vertical offset" result |
<fePointLight> | Фильтр SVG. | x="x position of the light source" y="y position of the light source" z="z position of the light source" |
<feSpecularLighting> | Фильтр SVG. | in="identifies the input image" surfaceScale="surface scale factor" specularConstant="specular reflection constant" specularExponent="specular exponent" kernelUnitLength="length of the kernel" result |
<feSpotLight> | Фильтр SVG. | x="x position of the light source" y="y position of the light source" z="z position of the light source" pointsAtX="x coordinate of the point at which the light points" pointsAtY="y coordinate of the point at which the light points" pointsAtZ="z coordinate of the point at which the light points" specularExponent="specular exponent" limitingConeAngle="limiting cone angle" |
<feTile> | Фильтр SVG. | in="identifies the input image" result |
<feTurbulence> | Фильтр SVG. | baseFrequency="base frequency" numOctaves="number of octaves" seed="seed value" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
<filter> | Указывает пользовательский эффект фильтра. | |
<font> | Указывает шрифт. Устарело в SVG 2. | |
<font-face> | Описывает характеристики шрифта. Устарело в SVG 2. | |
<font-face-format> | Указывает тип шрифта, на который ссылается его родительский элемент <font-face-uri>. | |
<font-face-name> | Ссылается на локальный шрифт по имени. | |
<font-face-src> | Соответствует дескриптору src в правилах CSS @font-face. | |
<font-face-uri> | Указывает удалённое определение текущего шрифта. | |
<foreignObject> | Позволяет пользовательским агентам предоставлять возможности графического отображения помимо тех, что определены в спецификации. | |
<g> | Группирует элементы вместе. | id="name of the group" fill="fill color for the group" opacity="opacity for the group" presentation attributes: All |
<glyph> | Указывает графику для определённого глифа. Устарело в SVG 2. | |
<glyphRef> | Указывает возможный глиф для использования. Устарело в SVG 2. | |
<hkern> | Указывает пары кернинга и значения корректировки в горизонтальном значении продвижения. Устарело в SVG 2. | |
<image> | Указывает изображение. | x="x-axis top-left corner of the image" y="y-axis top-left corner of the image" width="width of the image". Required. height="height of the image". Required. href = path to the image. Required. presentation attributes: Color, Graphics, Images, Viewports |
<line> | Указывает линию. | x1="x start point of the line" y1="y start point of the line" x2="x end point of the line" y2="y end point of the line" presentation attributes: Color, FillStroke, Graphics, Markers |
<linearGradient> | Указывает линейный градиент, который заполняет объект с использованием вектора. | id="a unique id used to reference this pattern. Required to reference it" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="the transformation to apply to the gradient" x1="x start point of the gradient vector (number or % - 0% is default)" y1="y start point of the gradient vector. (0% default)" x2="x end point of the gradient vector. (100% default)" y2="y end point of the gradient vector. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<marker> | Указывает графику, которая будет использоваться для рисования наконечников стрелок. Эти элементы могут использовать следующие атрибуты маркера: "marker-start", "marker-mid" и "marker-end". Определите маркер до того, как ссылаться на него через его URI. | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default 'strokeWidth')" refx="the position where the marker connects with the vertex (default 0)" refy="the position where the marker connects with the vertex (default 0)" orient="'auto' or an angle to always display the marker at. 'auto' will compute an angle making the x-axis a tangent of the vertex (default 'auto')" markerWidth="width of the marker (default 3)" markerHeight="height of the marker (default 3)" viewBox="SVG viewport’s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)" presentation attributes: All |
<mask> | Указывает альфа-маску, которая представляет собой сочетание значений непрозрачности и обрезки. Маскирование — это сочетание значений непрозрачности и обрезки. Вы можете использовать текст, фигуры или пути для определения секций маски. Состояние маски по умолчанию — полностью прозрачное. Графика в маске определяет, насколько непрозрачны её части. | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: 'objectBoundingBox')" maskContentUnits="Specifies the coordinate system for the content of <mask>. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" x="clipping plane of the mask (default: -10%)" y="clipping plane of the mask (default: -10%)" width="clipping plane of the mask (default: 120%)" height="clipping plane of the mask (default: 120%)" |
<metadata> | Указывает метаданные. | |
<missing-glyph> | Указывает глиф, используемый, когда символ не может быть отображён. | |
<mpath> | Ссылается на внешний элемент <path> как на определение траектории движения. | |
<path> | Указывает путь. | d="a set of commands specifying the path" pathLength="the total length for the path" transform="a list of transformations" presentation attributes: Color, FillStroke, Graphics, Markers |
<pattern> | Указывает графический объект, который можно перерисовывать через повторяющиеся интервалы координат. | id="unique id used for referencing this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="the whole pattern can be transformed" x="pattern's offset from the top-left corner (default 0)" y="pattern's offset from the top-left corner. (default 0)" width="width of the pattern tile (default 100%)" height="height of the pattern tile (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" href = reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive |
<polygon> | Указывает графику, содержащую как минимум три точки. | points="the points of the polygon. At least three points are required." fill-rule="part of the FillStroke presentation attributes" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Указывает любую фигуру, состоящую только из прямых линий. | points="the points on the polyline". Required. presentation attributes: Color, FillStroke, Graphics, Markers |
<radialGradient> | Указывает радиальный градиент. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="transformation to apply to the gradient" cx="center point of the gradient (number or % - 50% is default)" cy="center point of the gradient. (50% default)" r="radius of the gradient. (50% default)" fx="focus point of the gradient. (0% default)" fy="focus point of the gradient. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = Reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<rect> | Указывает прямоугольник. | x="x-axis top-left corner of the rectangle" y="y-axis top-left corner of the rectangle" rx="x-axis radius (to round the element)" ry="y-axis radius (to round the element)" width="width of the rectangle". Required. height="height of the rectangle" Required. presentation attributes: Color, FillStroke, Graphics |
<script> | Добавляет скрипты в документ SVG. | |
<set> | Устанавливает значение атрибута на заданную длительность. | |
<stop> | Указывает цвет и его позицию для использования на градиенте. | offset="offset for this stop (0 to 1/0% to 100%)". Required. stop-color="color of this stop" stop-opacity="opacity of this stop (0 to 1)" |
<style> | Позволяет встраивать таблицы стилей внутрь содержимого SVG. | |
<svg> | Создаёт фрагмент документа SVG. | x="top left corner when embedded (default 0)" y="top left corner when embedded (default 0)" width="width of the svg fragment (default 100%)" height="height of the svg fragment (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)" zoomAndPan="'magnify' or 'disable'. (default magnify)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" presentation attributes: All |
<switch> | Позволяет отображать разные фигуры в зависимости от использования языка просмотрщиком SVG. | |
<symbol> | Указывает повторно используемые символы. | |
<text> | Указывает текст. | x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x). 0 is default" dx="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" dy="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" rotate="a list of rotations. The nth rotation is performed on the nth character." textLength="a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length)" lengthAdjust="tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Ссылается на элемент <text> и размещает текст вдоль пути. | |
<title> | Описание для элементов контейнера SVG или графического элемента. | |
<tref> | Ссылается на элемент <text> в документе SVG. Устарело в SVG 2. | href = URI reference to the referenced text content |
<tspan> | Указывает подстроку внутри другого элемента <tspan> или элемента <text>. | Identical to the <text> element and in addition: href = Reference to a <text> element |
<use> | Использует URI для ссылки на <svg>, <g> или другой графический элемент с уникальным атрибутом id и дублирует его. | x="x-axis top-left corner of the cloned element" y="y-axis top-left corner of the cloned element" width="width of the cloned element" height="height of the cloned element" href = URI reference to the cloned element presentation attributes: All |
<view> | Это способ просмотра изображения. | |
<vkern> | Указывает пары кернинга для вертикально ориентированных пар глифов. Устарело в SVG 2. |
Practice
What are some of the features that can be included in SVGs while coding in HTML?