svg

Creates an <svg> element from mods.

Represents a hyperlink, linking to another resource.

• a @ MDN

• SVGAElement @ MDN

This attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system. If the attribute is not specified, the effect is as if the attribute were set to the value of the ascent attribute.

Value <number>

accent-height @ MDN

This attribute controls whether or not the animation is cumulative. It is frequently useful for repeated animations to build upon the previous results, accumulating with each iteration. This attribute said to the animation if the value is added to the previous animated attribute's value on each iteration.

Value none | sum

accumulate @ MDN

This attribute controls whether or not the animation is additive. It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values. This attribute said to the animation if their values are added to the original animated attribute's value.

Value replace | sum

additive @ MDN

The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css alignment-baseline for further information.

Value: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit

alignment-baseline @ MDN

The altGlyph element allows sophisticated selection of the glyphs used to render its child character data.

altGlyph @ MDN

The altGlyphDef element defines a substitution representation for glyphs.

altGlyphDef @ MDN

The altGlyphItem element provides a set of candidates for glyph substitution by the altGlyph element.

altGlyphItem @ MDN

The animate element is put inside a shape element and defines how an attribute of an element changes over the animation

animate @ MDN

The animateMotion element causes a referenced element to move along a motion path.

animateMotion @ MDN

The animateTransform element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.

animateTransform @ MDN

This attribute defines the maximum unaccented depth of the font within the font coordinate system. If the attribute is not specified, the effect is as if the attribute were set to the vert-origin-y value for the corresponding font.

Value <number>

ascent @ MDN

This attribute indicates the name of the attribute in the parent element that is going to be changed during an animation.

Value <attributeName>

attributeName @ MDN

This attribute specifies the namespace in which the target attribute and its associated values are defined.

Value CSS | XML | auto

attributeType @ MDN

The azimuth attribute represent the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis. If the attribute is not specified, then the effect is as if a value of 0 were specified.

Value <number>

azimuth @ MDN

The baseFrequency attribute represent The base frequencies parameter for the noise function of the <feturbulence> primitive. If two <number>s are provided, the first number represents a base frequency in the X direction and the second value represents a base frequency in the Y direction. If one number is provided, then that value is used for both X and Y. Negative values are forbidden. If the attribute is not specified, then the effect is as if a value of 0 were specified.

Value <number-optional-number>

baseFrequency @ MDN

The baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css baseline-shift for further information.

Value auto | baseline | sup | sub | <percentage> | <length> | inherit

baseline-shift @ MDN

This attribute defines when an animation should begin. The attribute value is a semicolon separated list of values. The interpretation of a list of start times is detailed in the SMIL specification in "Evaluation of begin and end time lists". Each individual value can be one of the following: <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accessKey-value>, <wallclock-sync-value> or the keyword indefinite.

Value <begin-value-list>

begin @ MDN

The bias attribute shifts the range of the filter. After applying the kernelMatrix of the <feConvolveMatrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. This allows representation of values that would otherwise be clamped to 0 or 1. If bias is not specified, then the effect is as if a value of 0 were specified.

Value <number>

bias @ MDN

This attribute specifies the interpolation mode for the animation. The default mode is linear, however if the attribute does not support linear interpolation (e.g. for strings), the calcMode attribute is ignored and discrete interpolation is used.

Value discrete | linear | paced | spline

calcMode @ MDN

The circle element is an SVG basic shape, used to create circles based on a center point and a radius.

• circle @ MDN

• SVGCircleElement @ MDN

The clip attribute has the same parameter values as defined for the css clip property. Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the <shape>. The value of auto defines a clipping path along the bounds of the viewport created by the given element. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css clip for further information.

Value auto | <shape> | inherit

clip @ MDN

The clip-path attribute bind the element is applied to with a given <clipPath> element As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

Value <FuncIRI> | none | inherit

clip-path @ MDN

The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn.

• clipPath @ MDN

• SVGClipPathElement @ MDN

The clipPathUnits attribute defines the coordinate system for the contents of the <clipPath> element. the clipPathUnits attribute is not specified, then the effect is as if a value of userSpaceOnUse were specified. Note that values defined as a percentage inside the content of the <clipPath> are not affected by this attribute. It means that even if you set the value of maskContentUnits to objectBoundingBox, percentage values will be calculated as if the value of the attribute were userSpaceOnUse.

Value userSpaceOnUse | objectBoundingBox

clipPathUnits @ MDN

The clip-rule attribute only applies to graphics elements that are contained within a <clipPath> element. The clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clipPath> definitions.

Value nonezero | evenodd | inherit

clip-rule @ MDN

The color attribute is used to provide a potential indirect value (currentColor) for the fill, stroke, stop-color, flood-color and lighting-color attributes. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css color for further information.

Value <color> | inherit

color @ MDN

The color-interpolation attribute specifies the color space for gradient interpolations, color animations and alpha compositing.When a child element is blended into a background, the value of the color-interpolation attribute on the child determines the type of blending, not the value of the color-interpolation on the parent. For gradients which make use of the xlink:href attribute to reference another gradient, the gradient uses the color-interpolation attribute value from the gradient element which is directly referenced by the fill or stroke attribute. When animating colors, color interpolation is performed according to the value of the color-interpolation attribute on the element being animated. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css color-interpolation for further information

Value auto | sRGB | linearRGB | inherit

color-interpolation @ MDN

The color-interpolation-filters attribute specifies the color space for imaging operations performed via filter effects. Note that color-interpolation-filters has a different initial value than color-interpolation. color-interpolation-filters has an initial value of linearRGB, whereas color-interpolation has an initial value of sRGB. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css color-interpolation-filters for further information

Value auto | sRGB | linearRGB | inherit

color-interpolation-filters @ MDN

The color-profile attribute is used to define which color profile a raster image included through the <image> element should use. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css color-profile for further information.

Value auto | sRGB | <name> | <IRI> | inherit

color-profile @ MDN

The element allows describing the color profile used for the image.

color-profile @ MDN

The color-rendering attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations. color-rendering takes precedence over color-interpolation-filters. For example, assume color-rendering: optimizeSpeed and color-interpolation-filters: linearRGB. In this case, the SVG user agent should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by color-interpolation-filters: linearRGB. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css color-rendering for further information

Value auto | optimizeSpeed | optimizeQuality | inherit

color-rendering @ MDN

The contentScriptType attribute on the <svg> element specifies the default scripting language for the given document fragment. This attribute sets the default scripting language used to process the value strings in event attributes. This language must be used for all instances of script that do not specify their own scripting language. The value content-type specifies a media type, per MIME Part Two: Media Types [RFC2046]. The default value is application/ecmascript

Value <content-type>

contentScriptType @ MDN

This attribute specifies the style sheet language for the given document fragment. The contentStyleType is specified on the <svg> element. By default, if it's not defined, the value is text/css

Value <content-type>

contentStyleType @ MDN

The cursor element can be used to define a platform-independent custom cursor. A recommended approach for defining a platform-independent custom cursor is to create a PNG image and define a cursor element that references the PNG image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).

cursor @ MDN

The cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element.This attribute behave exactly like the css cursor property except that if the browser suport the <cursor> element, it should allow to use it with the <funciri> notation. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css cursor for further information.

Value auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | inherit

cursor @ MDN

For the <circle> and the <ellipse> element, this attribute define the x-axis coordinate of the center of the element. If the attribute is not specified, the effect is as if a value of "0" were specified.For the <radialGradient> element, this attribute define the x-axis coordinate of the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. If the attribute is not specified, the effect is as if a value of 50% were specified

Value <coordinate>

cx @ MDN

For the <circle> and the <ellipse> element, this attribute define the y-axis coordinate of the center of the element. If the attribute is not specified, the effect is as if a value of "0" were specified.For the <radialGradient> element, this attribute define the x-axis coordinate of the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. If the attribute is not specified, the effect is as if a value of 50% were specified

Value <coordinate>

cy @ MDN

The d attribute defines a path to be drawn. It contains a series of commands and parameters used by the path element. Each command is designated by a specific letter (e.g., M for 'move to', L for 'line to', C for 'curve to', etc.). Following the command letter are the parameters for that command, typically coordinate pairs or triplets.

Value: <path-data>

d @ MDN

SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a use element to render those elements wherever you want on the viewport.

• defs @ MDN

• SVGDefsElement @ MDN

Each container element or graphics element in an SVG drawing can supply a desc description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, desc elements are not rendered as part of the graphics. Alternate presentations are possible, both visual and aural, which display the desc element but do not display path elements or other graphics elements. The desc element generally improve accessibility of SVG documents

• desc @ MDN

• SVGDescElement @ MDN

The diffuseConstant attribute represents the kd value in the Phong lighting model. In SVG, this can be any non-negative number. If the attribute is not specified, then the effect is as if a value of 1 were specified.

Value: <number>

diffuseConstant @ MDN

The direction attribute specifies the base writing direction of text and the direction of embeddings and overrides for the Unicode bidirectional algorithm. It defines whether the text is rendered left-to-right (ltr) or right-to-left (rtl). As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet.

Value: ltr | rtl | inherit

direction @ MDN

The display attribute lets you control the rendering of graphical or container elements. A value of display="none" indicates that the given element and its children will not be rendered.

display @ MDN

The divisor attribute specifies the value by which the resulting number of applying the kernelMatrix of the <feConvolveMatrix> element to the input image color value is divided to yield the destination color value.

Value: <number>

divisor @ MDN

The dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context.

Value: auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

dominant-baseline @ MDN

The dur attribute indicates the simple duration of an animation. The attribute value can be a <clock-value> or the indefinite keyword. A clock-value is a time value that can be used to control the timeline of the animation. It can be specified as hh:mm:ss.s or ms, where the former indicates hours, minutes, seconds, and milliseconds, and the latter indicates milliseconds.

Value: <clock-value> | media | indefinite

dur @ MDN

The dx attribute indicates a shift along the x-axis on the position of an element or its content. The exact effect of this attribute is dependent on the element for which it's being used. For <text> elements, dx defines the distance to offset the current text position along the x-axis. For <feOffset>, dx defines the x offset of the filter input graphic.

Value: <number> | <percentage> | <length>

dx @ MDN

The dy attribute indicates a shift along the y-axis on the position of an element or its content. The exact effect of this attribute is dependent on the element for which it's being used. For <text> elements, dy defines the distance to offset the current text position along the y-axis. For <feOffset>, dy defines the y offset of the filter input graphic.

Value: <number> | <percentage> | <length>

dy @ MDN

The edgeMode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. If attribute is not specified, then the effect is as if a value of duplicate were specified.

Value: duplicate | wrap | none

edgeMode @ MDN

The elevation attribute specifies the direction angle for a light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer of the content. If the attribute is not specified, then the effect is as if a value of 0 were specified.

Value: <number>

elevation @ MDN

The ellipse element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse titled at a 45 degree angle), but can be rotated by using the transform attribute.

• ellipse @ MDN

• SVGEllipseElement @ MDN

The end attribute defines an end value for the animation that can constrain the active duration. The attribute value is a semicolon-separated list of values. Each value can be a <clock-value>, a <syncbase-value>, an <event-value>, a <repeat-value>, an <accessKey-value>, a <wallclock-sync-value> or the keyword indefinite.

Value: <end-value-list>

end @ MDN

The externalResourcesRequired attribute is a hint to browsers about whether external resources need to be fetched for the current element to render correctly. Note: This attribute is deprecated and browsers may ignore it.

Value: true | false

externalResourcesRequired @ MDN

The feBlend filter composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode attribute.

• feBlend @ MDN

• SVGFEBlendElement @ MDN

This filter changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color.

• feColorMatrix @ MDN

• SVGFEColorMatrixElement @ MDN

The color of each pixel is modified by changing each channel (R, G, B, and A) to the result of what the children feFuncR, feFuncB, feFuncG, and feFuncA return.

• feComponentTransfer @ MDN

• SVGComponentTransferFunctionElement @ MDN

This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.

• feComposite @ MDN

• SVGFECompositeElement @ MDN

the feConvolveMatrix element applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.

• feConvolveMatrix @ MDN

• SVGFEConvolveMatrixElement @ MDN

This filter primitive lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map.

• feDiffuseLighting @ MDN

• SVGFEDiffuseLightingElement @ MDN

This filter primitive uses the pixels values from the image from in2 to spatially displace the image from in.

• feDisplacementMap @ MDN

• SVGFEDisplacementMapElement @ MDN

This filter primitive define a distant light source that can be used within a lighting filter primitive: feDiffuseLighting or feSpecularLighting.

• feDistantLighting @ MDN

• SVGFEDistantLightElement @ MDN

The filter fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

• feFlood @ MDN

• SVGFEFloodElement @ MDN

This filter primitive defines the transfer function for the alpha component of the input graphic of its parent feComponentTransfer element.

• feFuncA @ MDN

• SVGFEFuncAElement @ MDN

This filter primitive defines the transfer function for the blue component of the input graphic of its parent feComponentTransfer element.

• feFuncB @ MDN

• SVGFEFuncBElement @ MDN

This filter primitive defines the transfer function for the green component of the input graphic of its parent feComponentTransfer element.

• feFuncG @ MDN

• SVGFEFuncGElement @ MDN

This filter primitive defines the transfer function for the red component of the input graphic of its parent feComponentTransfer element.

• feFuncR @ MDN

• SVGFEFuncRElement @ MDN

The filter blurs the input image by the amount specified in stdDeviation, which defines the bell-curve.

• feGaussianBlur @ MDN

• SVGFEGaussianBlurElement @ MDN

The feImage filter fetches image data from an external source and provides the pixel data as output (meaning, if the external source is an SVG image, it is rasterize).

• feImage @ MDN

• SVGFEImageElement @ MDN

The feMerge filter allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a feMergeNode child.

• feMerge @ MDN

• SVGFEMergeElement @ MDN

The feMergeNode takes the result of another filter to be processed by its parent feMerge.

• feMergeNode @ MDN

• SVGFEMergeNodeElement @ MDN

This filter is used to erode or dilate the input image. It's usefulness lies especially in fattening or thinning effects.

• feMorphology @ MDN

• SVGFEMorphologyElement @ MDN

The input image as a whole is offset by the values specified in the dx and dy attributes. It's used in creating drop-shadows.

• feOffset @ MDN

• SVGFEOffsetElement @ MDN

Defines the <fePointLight> SVG tag.

• fePointLight @ MDN

• SVGFEPointLightElement @ MDN

This filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.

• feSpecularLighting @ MDN

• SVGFESpecularLightingElement @ MDN

Defines the <feSpotlight> SVG tag.

• feSpotlight @ MDN

• SVGFESpotLightElement @ MDN

An input image is tiled and the result used to fill a target. The effect is similar to the one of a pattern.

• feTile @ MDN

• SVGFETileElement @ MDN

This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble.

• feTurbulence @ MDN

• SVGFETurbulenceElement @ MDN

The fill attribute is a presentation attribute defining the color used to paint the element's interior. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <color> | <FuncIRI> | none | currentColor

fill @ MDN

The fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to the fill of a shape. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: [0-1] | <percentage>

fill-opacity @ MDN

The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. It's used by the fill operation to determine which areas of a shape are filled when the shape overlaps itself.

Value: nonzero | evenodd | inherit

fill-rule @ MDN

The filter element serves as container for atomic filter operations. It is never rendered directly. A filter is referenced by using the filter attribute on the target SVG element.

• filter @ MDN

• SVGFilterElement @ MDN

The filter attribute defines the filter effects to apply to the element. It contains a reference to a <filter> element which defines the filter to use. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <FuncIRI>

filter @ MDN

The filterRes attribute indicates the width and height of the intermediate images in pixels for a filter primitive. It takes the form of two numbers separated by whitespace. Note: This attribute is deprecated and may be removed in future SVG versions.

Value: <number-optional-number>

filterRes @ MDN

The filterUnits attribute defines the coordinate system for the attributes x, y, width and height. If not specified, the effect is as if a value of objectBoundingBox were specified.

Value: userSpaceOnUse | objectBoundingBox

filterUnits @ MDN

The flood-color attribute indicates what color to use to flood the current filter primitive. The keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the fill and stroke attributes.

Value: currentColor | <color> | <icccolor>

flood-color @ MDN

The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion. If a value is outside the range 0.0 to 1.0, it is clamped to the nearest valid value.

Value: <alpha-value>

flood-opacity @ MDN

The font element defines a font to be used for text layout.

font @ MDN

The font-face element corresponds to the CSS @font-face declaration. It defines a font's outer properties.

font-face @ MDN

The font-face-format element describes the type of font referenced by its parent font-face-uri.

font-face-format @ MDN

The font-face-name element points to a locally installed copy of this font, identified by its name.

font-face-name @ MDN

The font-face-src element corresponds to the src property in CSS @font-face descriptions. It serves as container for font-face-name, pointing to locally installed copies of this font, and font-face-uri, utilizing remotely defined fonts.

font-face-src @ MDN

The font-face-uri element points to a remote definition of the current font.

font-face-uri @ MDN

The font-family attribute indicates which font family will be used to render the text. It works identically to the CSS font-family property. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]

font-family @ MDN

The font-size attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <absolute-size> | <relative-size> | <length> | <percentage>

font-size @ MDN

The font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <number>

font-size-adjust @ MDN

The font-stretch attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

font-stretch @ MDN

The font-variant attribute indicates whether the text is to be rendered using variations of the font's glyphs, such as small caps or ligatures. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: normal | small-caps | inherit

font-variant @ MDN

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight @ MDN

The foreignObject element allows for inclusion of a foreign XML namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

foreignObject @ MDN

The from attribute indicates the initial value of the attribute that will be modified during the animation. When used with the to attribute, the animation will change the modified attribute from the from value to the to value.

Value: <value>

from @ MDN

The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements. Attributes applied are inherited by child elements. In addition, it can be used to define complex objects that can later be referenced with the use element.

• g @ MDN

• SVGGElement @ MDN

A glyph defines a single glyph in an SVG font.

glyph @ MDN

The glyphRef element provides a single possible glyph to the referencing altGlyph substitution.

glyphRef @ MDN

The gradientTransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system. This allows for things such as skewing the gradient or rotating it.

Value: <transform-list>

gradientTransform @ MDN

The gradientUnits attribute defines the coordinate system used for attributes specified on the gradient elements. If not specified, the effect is as if a value of objectBoundingBox were specified.

Value: userSpaceOnUse | objectBoundingBox

gradientUnits @ MDN

The height attribute defines the vertical length of an element in the user coordinate system. For SVG elements, it determines the height of the viewport or viewBox.

Value: <length> | <percentage> | auto

height @ MDN

The horizontal distance between two glyphs can be fine-tweaked with an hkern Element. This process is known as Kerning.

hkern @ MDN

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it. Note: SVG 2 removed the xlink:href attribute in favor of simply href.

Value: <URL>

href @ MDN

The SVG Image Element (image) allows a raster image into be included in an SVG document.

• image @ MDN

• SVGImageElement @ MDN

The imageRendering attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: auto | optimizeSpeed | optimizeQuality

imageRendering @ MDN

The in attribute identifies input for the given filter primitive. The value can be either a reference to a result from a previous filter primitive, or one of the standard filter input keywords.

Value: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>

in @ MDN

The in2 attribute identifies the second input for the given filter primitive. It works exactly like the in attribute. This attribute is only valid for the feBlend, feComposite, feDisplacementMap, and feMorphology filter primitives.

Value: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>

in2 @ MDN

The k1 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive. If this attribute is not set, the effect is as if a value of 0 were used.

Value: <number>

k1 @ MDN

The k2 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive. If this attribute is not set, the effect is as if a value of 0 were used.

Value: <number>

k2 @ MDN

The k3 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive. If this attribute is not set, the effect is as if a value of 0 were used.

Value: <number>

k3 @ MDN

The k4 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive. If this attribute is not set, the effect is as if a value of 0 were used.

Value: <number>

k4 @ MDN

The kernelMatrix attribute defines the list of numbers that make up the kernel matrix for the <feConvolveMatrix> element. The number of entries in the list must equal to orderX times orderY.

Value: <list-of-numbers>

kernelMatrix @ MDN

The kernelUnitLength attribute has two meanings based on the context it's used in. For lighting filter primitives, it represents the x and y coordinates for the distance from the source to the surface. For feConvolveMatrix, it defines the intended distance in current filter units between successive columns and rows in the kernelMatrix.

Value: <number-optional-number>

kernelUnitLength @ MDN

The kerning attribute indicates whether the browser should adjust inter-glyph spacing based on kerning tables in the font or not. Note: This attribute is deprecated and may be removed in future SVG versions.

Value: auto | <length>

kerning @ MDN

The keySplines attribute defines a set of Bézier control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing. This attribute is ignored unless the calcMode attribute is set to spline.

Value: <list-of-control-points>

keySplines @ MDN

The keyTimes attribute represents a list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation.

Value: <list-of-times>

keyTimes @ MDN

The letter-spacing attribute controls spacing between text characters, in addition to any spacing from the kerning attribute. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: normal | <length>

letter-spacing @ MDN

The lighting-color attribute defines the color of the light source for filter primitives <feDiffuseLighting> and <feSpecularLighting>. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: currentColor | <color> | <icccolor>

lighting-color @ MDN

The limitingConeAngle attribute represents the angle in degrees between the spot light axis (i.e., the axis between the light source and the point to which it is pointing at) and the spot light cone. If no value is specified, then the effect is as if a value of 90 were specified.

Value: <angle>

limitingConeAngle @ MDN

The line element is an SVG basic shape, used to create a line connecting two points.

• line @ MDN

• SVGLineElement @ MDN

linearGradient lets authors define linear gradients to fill or stroke graphical elements.

• linearGradient @ MDN

• SVGLinearGradientElement @ MDN

The local attribute defines one side of a coordinate transformation to be applied to an element. It's used along with the 'from' attribute, which defines the other side of the transformation.

Value: <string>

local @ MDN

The marker element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given path, line, polyline or polygon element.

• marker @ MDN

• SVGMarkerElement @ MDN

The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <FuncIRI>

marker-end @ MDN

The markerHeight attribute represents the height of the viewport into which the marker is to be fitted when it is rendered according to the viewBox and preserveAspectRatio attributes.

Value: <length>

markerHeight @ MDN

The marker-mid attribute defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given shape. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <FuncIRI>

marker-mid @ MDN

The marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <FuncIRI>

marker-start @ MDN

The markerUnits attribute defines the coordinate system for the markerWidth and markerHeight attributes and the contents of the <marker>. If not specified, the effect is as if a value of strokeWidth were specified.

Value: userSpaceOnUse | strokeWidth

markerUnits @ MDN

The markerWidth attribute represents the width of the viewport into which the marker is to be fitted when it is rendered according to the viewBox and preserveAspectRatio attributes.

Value: <length>

markerWidth @ MDN

In SVG, you can specify that any other graphics object or g element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the mask element. A mask is used/referenced using the mask property.

• mask @ MDN

• SVGMaskElement @ MDN

The mask attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <FuncIRI>

mask @ MDN

The maskContentUnits attribute indicates which coordinate system to use for the contents of the <mask> element. If not specified, the effect is as if a value of userSpaceOnUse were specified.

Value: userSpaceOnUse | objectBoundingBox

maskContentUnits @ MDN

The maskUnits attribute indicates which coordinate system to use for the attributes x, y, width and height on the <mask> element. If not specified, the effect is as if a value of objectBoundingBox were specified.

Value: userSpaceOnUse | objectBoundingBox

maskUnits @ MDN

The max attribute defines the maximum value of the range input. It must be greater than or equal to the value of the min attribute. If the value is less than the minimum value, the minimum value is used instead.

Value: <number>

max @ MDN

Metadata is structured data about data. Metadata which is included with SVG content should be specified within metadata elements. The contents of the metadata should be elements from other XML namespaces such as RDF, FOAF, etc.

• metadata @ MDN

• SVGMetadataElement @ MDN

The min attribute defines the minimum value of the range input. It must be less than or equal to the value of the max attribute. If the value is greater than the maximum value, the maximum value is used instead.

Value: <number>

min @ MDN

The missing-glyph's content is rendered, if for a given character the font doesn't define an appropriate glyph.

missing-glyph @ MDN

The mode attribute defines the blending mode on the <feBlend> filter primitive.

Value: normal | multiply | screen | darken | lighten

mode @ MDN

the mpath sub-element for the animateMotion element provides the ability to reference an external path element as the definition of a motion path.

mpath @ MDN

The numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive. If not specified, the effect is as if a value of 1 were specified.

Value: <integer>

numOctaves @ MDN

The offset attribute either defines the distance of an <stop> element from the start of the gradient, or defines the displacement value for a <feOffset> element. For <stop> elements, it's a percentage or a number between 0 and 1. For <feOffset>, it represents the displacement in the x or y direction.

Value: <number> | <percentage>

offset @ MDN

The opacity attribute specifies the transparency of an object or of a group of objects. It's a multiplier on the alpha channel and can take a value between 0 and 1 (or a percentage). As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: [0-1] | <percentage>

opacity @ MDN

The operator attribute has different meanings based on the context where it's used. For feComposite, it defines the compositing operation to be performed. For feMorphology, it defines whether to erode or dilate the source graphic.

Value: over | in | out | atop | xor | arithmetic (for feComposite) Value: erode | dilate (for feMorphology)

operator @ MDN

The order attribute indicates the size of the matrix to be used by the <feConvolveMatrix> element. It contains two numbers separated by whitespace which define the number of columns and rows in the matrix.

Value: <number-pair>

order @ MDN

This attribute defines the orientation of the marker relative to the shape it is attached to.

Value type: auto|auto-start-reverse|<angle> ; Default value: 0; Animatable: yes

orient @ MDN

The overflow attribute sets what to do when an element's content is too big to fit in its block formatting context. This attribute has the same parameter values as the CSS overflow property. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: visible | hidden | scroll | auto

overflow @ MDN

The paint-order attribute specifies the order in which the fill, stroke, and markers of a given shape or text element are painted. By default, the order is: fill, stroke, markers. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: normal | [ fill || stroke || markers ]

paint-order @ MDN

The path element is the generic element to define a shape. All the basic shapes can be created with a path element.

• path @ MDN

• SVGPathElement @ MDN

The pathLength attribute lets authors specify a total length for the path, in user units. This value is used to calibrate the browser's distance calculations with those of the author, particularly useful for text on a path or motion animations.

Value: <number>

pathLength @ MDN

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using the pattern element and then referenced by properties fill and stroke on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern.

• pattern @ MDN

• SVGPatternElement @ MDN

The patternContentUnits attribute defines the coordinate system for the contents of the <pattern>. If not specified, the effect is as if a value of userSpaceOnUse were specified.

Value: userSpaceOnUse | objectBoundingBox

patternContentUnits @ MDN

The patternTransform attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system. This allows for effects like rotating or skewing the pattern tiles.

Value: <transform-list>

patternTransform @ MDN

The patternUnits attribute defines the coordinate system for attributes x, y, width, and height. If not specified, the effect is as if a value of objectBoundingBox were specified.

Value: userSpaceOnUse | objectBoundingBox

patternUnits @ MDN

The pointer-events attribute defines whether or when an element may be the target of a mouse event. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none

pointer-events @ MDN

The points attribute defines a list of points required to draw a <polyline> or <polygon> element. Each point is defined by a pair of X and Y coordinates in the user coordinate system.

Value: <list-of-points>

points @ MDN

The pointsAtX attribute represents the X location in the coordinate system established by the primitiveUnits attribute on the <filter> element of the point at which the light source is pointing.

Value: <number>

pointsAtX @ MDN

The pointsAtY attribute represents the Y location in the coordinate system established by the primitiveUnits attribute on the <filter> element of the point at which the light source is pointing.

Value: <number>

pointsAtY @ MDN

The pointsAtZ attribute represents the Z location in the coordinate system established by the primitiveUnits attribute on the <filter> element of the point at which the light source is pointing.

Value: <number>

pointsAtZ @ MDN

The polygon element defines a closed shape consisting of a set of connected straight line segments.

• polygon @ MDN

• SVGPolygonElement @ MDN

The polyline element is an SVG basic shape, used to create a series of straight lines connecting several points. Typically a polyline is used to create open shapes

• polyline @ MDN

• SVGPolylineElement @ MDN

The preserveAlpha attribute indicates how a <feConvolveMatrix> element handles alpha transparency. If set to false, the convolution matrix is applied to the alpha channel in the same way as the RGB color channels. If set to true, the alpha channel is kept unchanged.

Value: true | false

preserveAlpha @ MDN

The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio should fit into a viewport with a different aspect ratio. It consists of an optional alignment parameter and an optional 'meet or slice' reference.

Value: [none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax] [meet | slice]

preserveAspectRatio @ MDN

The primitiveUnits attribute defines the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion. If not specified, the effect is as if a value of userSpaceOnUse were specified.

Value: userSpaceOnUse | objectBoundingBox

primitiveUnits @ MDN

The r attribute defines the radius of a circle. If the attribute is not specified, the effect is as if a value of 0 were specified.

Value: <length> | <percentage>

r @ MDN

radialGradient lets authors define radial gradients to fill or stroke graphical elements.

• radialGradient @ MDN

• SVGRadialGradientElement @ MDN

The radius attribute represents the radius (or radii) for the operation on a given <feMorphology> filter primitive. If two numbers are provided, the first represents the x-radius and the second the y-radius. If one number is provided, then that value is used for both x and y.

Value: <number-optional-number>

radius @ MDN

The rect element is an SVG basic shape, used to create rectangles based on the position of a corner and their width and height. It may also be used to create rectangles with rounded corners.

• rect @ MDN

• SVGRectElement @ MDN

The refX attribute is used alongside the refY attribute to provide coordinates for the location on the marker where it will be joined to its markable element. Coordinates are relative to the marker's coordinate system (after application of the ‘viewBox’ and ‘preserveAspectRatio’ attributes), and not the markable element it is placed on.

refX @ MDN

The refY attribute is used alongside the refY attribute to provide coordinates for the location on the marker where it will be joined to its markable element. Coordinates are relative to the marker's coordinate system (after application of the ‘viewBox’ and ‘preserveAspectRatio’ attributes), and not the markable element it is placed on.

refY @ MDN

The repeatCount attribute indicates the number of times an animation will repeat. It can be a simple count or the keyword 'indefinite', which specifies that the animation will repeat indefinitely.

Value: <number> | indefinite

repeatCount @ MDN

The repeatDur attribute specifies the total duration for repeating an animation. It can be a time value or the keyword 'indefinite', which specifies that the animation will repeat indefinitely.

Value: <clock-value> | indefinite

repeatDur @ MDN

The requiredFeatures attribute takes a list of feature strings, with the element only being rendered if all features are supported by the browser. Note: This attribute is deprecated and may be removed in future SVG versions.

Value: <list-of-features>

requiredFeatures @ MDN

The restart attribute specifies whether or not an animation can restart. It can be set to always, never, or whenNotActive, with always being the default.

Value: always | never | whenNotActive

restart @ MDN

The result attribute defines the assigned name for this filter primitive. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same <filter> element.

Value: <filter-primitive-reference>

result @ MDN

The rx attribute defines the x-radius of a rounded corner for the element. For <rect> elements, this is used for rounded corners. For <ellipse> elements, this defines the x-radius of the ellipse. If the attribute is not specified, the effect is as if a value of 0 were specified.

Value: <length> | <percentage> | auto

rx @ MDN

The ry attribute defines the y-radius of a rounded corner for the element. For <rect> elements, this is used for rounded corners. For <ellipse> elements, this defines the y-radius of the ellipse. If the attribute is not specified, the effect is as if a value of 0 were specified.

Value: <length> | <percentage> | auto

ry @ MDN

The scale attribute defines the displacement scale factor to be used on a <feDisplacementMap> filter primitive. The amount is expressed in the coordinate system established by the primitiveUnits attribute on the <filter> element.

Value: <number>

scale @ MDN

The seed attribute represents the starting number for the pseudo random number generator of the <feTurbulence> primitive. If the attribute is not specified, the effect is as if a value of 0 were specified.

Value: <number>

seed @ MDN

The set element provides a simple means of just setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. The set element is non-additive. The additive and accumulate attributes are not allowed, and will be ignored if specified.

set @ MDN

The shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: auto | optimizeSpeed | crispEdges | geometricPrecision

shape-rendering @ MDN

The specularConstant attribute controls the ratio of reflection of the specular lighting. It represents the ks value in the Phong lighting model. The bigger the value, the more light is reflected. If not specified, the effect is as if a value of 1 were specified.

Value: <number>

specularConstant @ MDN

The specularExponent attribute controls the focus for the light source. The larger the value, the more focused the light source becomes. It represents the shininess of the surface and corresponds to the n value in the Phong lighting model.

Value: <number>

specularExponent @ MDN

The spreadMethod attribute determines how a gradient behaves if it starts or ends inside the bounds of the target rectangle but the gradient does not fill the entire rectangle. If not specified, the effect is as if a value of pad were specified.

Value: pad | reflect | repeat

spreadMethod @ MDN

The stdDeviation attribute defines the standard deviation for the blur operation in a Gaussian blur filter. If two <number>s are provided, the first number represents the standard deviation along the x-axis. The second value represents the standard deviation along the y-axis.

Value: <number-optional-number>

stdDeviation @ MDN

The stitchTiles attribute defines how the Perlin Noise tiles behave at the border. If not specified, the effect is as if a value of noStitch were specified.

Value: stitch | noStitch

stitchTiles @ MDN

The ramp of colors to use on a gradient is defined by the stop elements that are child elements to either the lineargradient element or the radialGradient element.

• stop @ MDN

• SVGStopElement @ MDN

The stop-color attribute indicates what color to use at a gradient stop. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: currentColor | <color> | <icccolor>

stop-color @ MDN

The stop-opacity attribute defines the opacity of a given color gradient stop. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <opacity-value>

stop-opacity @ MDN

The stroke attribute defines the color of the outline on a given graphical element. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <paint>

stroke @ MDN

The stroke-dasharray attribute defines the pattern of dashes and gaps used to paint the outline of the shape. It's a list of comma and/or white space separated <length>s and <percentage>s. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: none | <dasharray>

stroke-dasharray @ MDN

The stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <percentage> | <length>

stroke-dashoffset @ MDN

The stroke-linecap attribute specifies the shape to be used at the end of open subpaths when they are stroked. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: butt | round | square

stroke-linecap @ MDN

The stroke-linejoin attribute specifies the shape to be used at the corners of paths when they are stroked. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: arcs | bevel | miter | miter-clip | round

stroke-linejoin @ MDN

The stroke-miterlimit attribute specifies the limit on the ratio of the miter length to the stroke-width when two line segments meet at a sharp angle and miter joins have been specified. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <number>

stroke-miterlimit @ MDN

The stroke-opacity attribute specifies the opacity of the outline on the current object. Its value ranges from 0 to 1 or as a percentage. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: [0-1] | <percentage>

stroke-opacity @ MDN

The stroke-width attribute specifies the width of the outline on the current object. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: <length> | <percentage>

stroke-width @ MDN

The style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.

Value: <style>

style @ MDN

The surfaceScale attribute represents the height of the surface for a light filter primitive. If the attribute is not specified, then the effect is as if a value of 1 were specified.

Value: <number>

surfaceScale @ MDN

When it is not the root element, the svg element can be used to nest a standalone SVG fragment inside the current document (which can be an HTML document). This standalone fragment has its own viewPort and its own coordinate system.

• svg @ MDN

• SVGSVGElement @ MDN

The switch element evaluates the requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a g, then the entire subtree is either processed/rendered or bypassed/not rendered.

• switch @ MDN

• SVGSwitchElement @ MDN

The symbol element is used to define graphical template objects which can be instantiated by a use element. The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility. note that a symbol element itself is not rendered. Only instances of a symbol element (i.e., a reference to a symbol by a use element) are rendered.

• symbol @ MDN

• SVGSymbolElement @ MDN

The target attribute specifies where to open the link referenced by the <a> element. It's similar to the target attribute in HTML.

Value: _self | _parent | _top | _blank | <name>

target @ MDN

The targetX attribute determines the positioning in X of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero. The value must be such that: 0 <= targetX < orderX.

Value: <integer>

targetX @ MDN

The targetY attribute determines the positioning in Y of the convolution matrix relative to a given target pixel in the input image. The topmost row of the matrix is row number zero. The value must be such that: 0 <= targetY < orderY.

Value: <integer>

targetY @ MDN

The text element defines a graphics element consisting of text. Note that it is possible to apply a gradient, pattern, clipping path, mask or filter to text.

• text @ MDN

• SVGTextElement @ MDN

The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.

Value: start | middle | end

text-anchor @ MDN

The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the text-decoration-line and text-decoration-style properties.

Value: none | [ underline || overline || line-through || blink ] | inherit

text-decoration @ MDN

In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a path element. To specify that a block of text is to be rendered along the shape of a path, include the given text within a textPath element which includes an xlink:href attribute with a reference to a path element.

• textPath @ MDN

• SVGTextPathElement @ MDN

The text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: auto | optimizeSpeed | optimizeLegibility | geometricPrecision

text-rendering @ MDN

Each container element or graphics element in an SVG drawing can supply a title description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, title elements are not rendered as part of the graphics. Alternate presentations are possible, both visual and aural, which display the title element but do not display path elements or other graphics elements. The title element generally improve accessibility of SVG documents.

• title @ MDN

• SVGTextPathElement @ MDN

The to attribute indicates the final value of the attribute that will be modified during the animation. The value of the attribute will change between the from attribute value and this value.

Value: <value>

to @ MDN

The transform attribute defines a list of transform definitions that are applied to an element and the element's children. Transforms include rotate, scale, translate, skewX, skewY, and matrix.

Value: <transform-list>

transform @ MDN

The textual content for a text can be either character data directly embedded within the text element or the character data content of a referenced element, where the referencing is specified with a tref element.

tref @ MDN

Within a text element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a tspan element.

• tspan @ MDN

• SVGTSpanElement @ MDN

Alias for the type member defining the type SVG attribute.

The type attribute specifies the type of animation or filter. The meaning and allowed values depend on the element it's used on. For <animateTransform>, it defines the type of transformation. For <feColorMatrix>, it defines the type of matrix operation.

Value: varies by element

Aliases: typ

type @ MDN

The use element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is, much like anonymous content and XBL. Since the cloned nodes are not exposed, care must be taken when using CSS to style a use element and its hidden descendants. CSS attributes are not guaranteed to be inherited by the hidden, cloned DOM unless you explicitly request it using CSS inheritance.

• use @ MDN

• SVGUseElement @ MDN

The values attribute has different meanings depending on the context where it's used. For animation elements, it defines a list of values to animate through. For <feColorMatrix>, it defines a list of values for the color transformation matrix.

Value: <list-of-values>

values @ MDN

A view is a defined way to view the image, like a zoom level or a detail view.

• view @ MDN

• SVGViewElement @ MDN

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. It's specified as four numbers: min-x, min-y, width and height, separated by whitespace and/or a comma.

Value: <min-x> <min-y> <width> <height>

viewBox @ MDN

The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse, the element is not drawn. With a value of visible, the element is drawn.

Value: visible | hidden | collapse | inherit

visibility @ MDN

The vertical distance between two glyphs in top-to-bottom fonts can be fine-tweaked with an vkern Element. This process is known as Kerning.

vkern @ MDN

The width attribute defines the horizontal length of an element in the user coordinate system. For SVG elements, it determines the width of the viewport or viewBox.

Value: <length> | <percentage> | auto

width @ MDN

The word-spacing attribute specifies spacing behavior between words. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: normal | <length>

word-spacing @ MDN

The writing-mode attribute specifies whether the initial inline-progression-direction for a text element is left-to-right, right-to-left, or top-to-bottom. As a presentation attribute, it can also be used as a property directly inside a CSS stylesheet.

Value: lr-tb | rl-tb | tb-rl | lr | rl | tb | horizontal-tb | vertical-rl | vertical-lr

writing-mode @ MDN

The x attribute defines an x-axis coordinate in the user coordinate system. The exact effect of this coordinate depends on the element it's used on.

Value: <coordinate>

x @ MDN

The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that use x1 include <line>, <linearGradient>, and other gradient elements.

Value: <coordinate>

x1 @ MDN

The x2 attribute is used to specify the second x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that use x2 include <line>, <linearGradient>, and other gradient elements.

Value: <coordinate>

x2 @ MDN

The xChannelSelector attribute indicates which color channel from the input image to use to displace the pixels in the <feDisplacementMap> filter primitive. If not specified, the effect is as if a value of A were specified.

Value: R | G | B | A

xChannelSelector @ MDN

The xmlns attribute specifies the XML namespace for the SVG document. For SVG, the namespace is always http://www.w3.org/2000/svg.

Value: http://www.w3.org/2000/svg

svg @ MDN

The y attribute defines a y-axis coordinate in the user coordinate system. The exact effect of this coordinate depends on the element it's used on.

Value: <coordinate>

y @ MDN

The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that use y1 include <line>, <linearGradient>, and other gradient elements.

Value: <coordinate>

y1 @ MDN

The y2 attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that use y2 include <line>, <linearGradient>, and other gradient elements.

Value: <coordinate>

y2 @ MDN

The yChannelSelector attribute indicates which color channel from the input image to use to displace the pixels in the <feDisplacementMap> filter primitive. If not specified, the effect is as if a value of A were specified.

Value: R | G | B | A

yChannelSelector @ MDN

The z attribute defines the location along the Z-axis for a light source in the coordinate system established by the primitiveUnits attribute on the <filter> element. If the attribute is not specified, the effect is as if a value of 0 were specified.

Value: <number>

z @ MDN