W3cubDocs

/SVG

SVG Presentation Attributes

Attributes

alignment-baseline

It specifies how an object is aligned along the font baseline with respect to its parent. Value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; Animatable: Yes

baseline-shift

It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. Value: auto|baseline|super|sub|<percentage>|<length>|inherit; Animatable: Yes

clip Deprecated

It defines what portion of an element is visible. Value: auto|<shape>|inherit; Animatable: Yes

clip-path

It binds the element it is applied to with a given <clipPath> element. Value: none|<FuncIRI>|inherit; Animatable: Yes

clip-rule

It indicates how to determine what side of a path is inside a shape in order to know how a <clipPath> should clip its target. Value: nonzero|evenodd|inherit; Animatable: Yes

color

It provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. Value: <color>|inherit; Animatable: Yes

color-interpolation

It specifies the color space for gradient interpolations, color animations, and alpha compositing. Value: auto|sRGB|linearRGB|inherit; Animatable: Yes

color-interpolation-filters

It specifies the color space for imaging operations performed via filter effects. Value: auto|sRGB|linearRGB|inherit; Animatable: Yes

color-profile Deprecated

It defines which color profile a raster image included through the <image> element should use. Value: auto|sRGB|linearRGB|<name>|<IRI>|inherit; Animatable: Yes

color-rendering

It provides a hint to the browser about how to optimize its color interpolation and compositing operations. Value: auto|optimizeSpeed|optimizeQuality|inherit; Animatable: Yes

cursor

It specifies the mouse cursor displayed when the mouse pointer is over an element. Value: <FuncIRI>|<keywords>|inherit; Animatable: Yes

d

It defines a path to be drawn. Value: path()|none

direction

It specifies the base writing direction of text. Value: ltr|rtl|inherit; Animatable: Yes

display

It allows to control the rendering of graphical or container elements. Value: see CSS display; Animatable: Yes

dominant-baseline

It defines the baseline used to align the box's text and inline-level contents. Value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; Animatable: Yes

enable-background Deprecated

It tells the browser how to manage the accumulation of the background image. Value: accumulate|new|inherit; Animatable: No

fill

It defines the color of the inside of the graphical element it applies to. Value: <paint>; Animatable: Yes

fill-opacity

It specifies the opacity of the color or the content the current object is filled with. Value: <number>|<percentage>; Animatable: Yes

fill-rule

It indicates how to determine what side of a path is inside a shape. Value: nonzero|evenodd|inherit; Animatable: Yes

filter

It defines the filter effects defined by the <filter> element that shall be applied to its element. Value: <FuncIRI>|none|inherit; Animatable: Yes

flood-color

It indicates what color to use to flood the current filter primitive subregion defined through the <feFlood> or <feDropShadow> element. Value: <color>; Animatable: Yes

flood-opacity

It indicates the opacity value to use across the current filter primitive subregion defined through the <feFlood> or <feDropShadow> element. Value: <number>|<percentage>; Animatable: Yes

font-family

It indicates which font family will be used to render the text of the element. Value: see CSS font-family; Animatable: Yes

font-size

It specifies the size of the font. Value: see CSS font-size; Animatable: Yes

font-size-adjust

It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters. Value: <number>|none|inherit; Animatable: Yes

font-stretch

It selects a normal, condensed, or expanded face from a font. Value: see CSS font-stretch; Animatable: Yes

font-style

It specifies whether a font should be styled with a normal, italic, or oblique face from its font-family. Value: normal|italic|oblique; Animatable: Yes

font-variant

It specifies whether a font should be used with some of their variation such as small caps or ligatures. Value: see CSS font-variant; Animatable: Yes

font-weight

It specifies the weight (or boldness) of the font. Value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; Animatable: Yes

glyph-orientation-horizontal Deprecated

It controls glyph orientation when the inline-progression-direction is horizontal. Value: <angle>|inherit; Animatable: No

glyph-orientation-vertical Deprecated

It controls glyph orientation when the inline-progression-direction is vertical. Value: auto|<angle>|inherit; Animatable: No

image-rendering

It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. Value: auto|optimizeQuality|optimizeSpeed; Animatable: Yes

kerning Deprecated

It indicates whether the browser should adjust inter-glyph spacing. Value: auto|<length>|inherit; Animatable: Yes

letter-spacing

It controls spacing between text characters. Value: normal|<length>|inherit; Animatable: Yes

lighting-color

It defines the color of the light source for filter primitives elements <feDiffuseLighting> and <feSpecularLighting>. Value: <color>; Animatable: Yes

marker-end

It defines the arrowhead or polymarker that will be drawn at the final vertex of the given <path> element or basic shape. Value: <FuncIRI>|none|inherit; Animatable: Yes

marker-mid

It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given <path> element or basic shape. Value: <FuncIRI>|none|inherit; Animatable: Yes

marker-start

It defines the arrowhead or polymarker that will be drawn at the first vertex of the given <path> element or basic shape. Value: <FuncIRI>|none|inherit; Animatable: Yes

mask

It alters the visibility of an element by either masking or clipping the image at specific points. Value: see CSS mask; Animatable: Yes

opacity

It specifies the transparency of an object or a group of objects. Value: <opacity-value>; Animatable: Yes

overflow

Specifies whether the content of a block-level element is clipped when it overflows the element's box. Value: visible|hidden|scroll|auto|inherit; Animatable: Yes

pointer-events

Defines whether or when an element may be the target of a mouse event. Value: bounding-box|visiblePainted|visibleFill|visibleStroke|visible |painted|fill|stroke|all|none; Animatable: Yes

shape-rendering

Hints about what tradeoffs to make as the browser renders <path> element or basic shapes. Value: auto|optimizeSpeed|crispEdges|geometricPrecision |inherit; Animatable: Yes

solid-color

- Value:; Animatable: -

solid-opacity

- Value:; Animatable: -

stop-color

Indicates what color to use at that gradient stop. Value: currentcolor|<color>|<icccolor>|inherit; Animatable: Yes

stop-opacity

Defines the opacity of a given gradient stop. Value: <opacity-value>|inherit; Animatable: Yes

stroke

Defines the color used to paint the outline of the shape. Value: <paint>; Animatable: Yes

stroke-dasharray

Defines the pattern of dashes and gaps used to paint the outline of the shape. Value: none|<dasharray>; Animatable: Yes

stroke-dashoffset

Defines an offset on the rendering of the associated dash array. Value: <percentage>|<length>; Animatable: Yes

stroke-linecap

Defines the shape to be used at the end of open subpaths when they are stroked. Value: butt|round|square; Animatable: Yes

stroke-linejoin

Defines the shape to be used at the corners of paths when they are stroked. Value: arcs|bevel|miter|miter-clip|round; Animatable: Yes

stroke-miterlimit

Defines a limit on the ratio of the miter length to the stroke-width used to draw a miter join. Value: <number>; Animatable: Yes

stroke-opacity

Defines the opacity of the stroke of a shape. Value: <opacity-value>|<percentage>; Animatable: Yes

stroke-width

Defines the width of the stroke to be applied to the shape. Value: <length>|<percentage>; Animatable: Yes

text-anchor

Defines the vertical alignment a string of text. Value: start|middle|end|inherit; Animatable: Yes

text-decoration

Sets the appearance of decorative lines on text. Value: none|underline|overline|line-through|blink|inherit; Animatable: Yes

text-rendering

Hints about what tradeoffs to make as the browser renders text. Value: auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit; Animatable: Yes

transform

Defines a list of transform definitions that are applied to an element and the element's children. Value: <transform-list>; Animatable: Yes

unicode-bidi

- Value:; Animatable: -

vector-effect

Specifies the vector effect to use when drawing an object. Value: default|non-scaling-stroke|inherit|<uri>; Animatable: Yes

visibility

Lets you control the visibility of graphical elements. Value: visible|hidden|collapse|inherit; Animatable: Yes

word-spacing

Specifies spacing behavior between words. Value: <length>|inherit; Animatable: Yes

writing-mode

Specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. Value: lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; Animatable: Yes

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
alignment-baseline No No No No No No No No No No No No
baseline-shift No No No No No No No No No No No No
clip No No No No No No No No No No No No
clip-path No No No No No No No No No No No No
clip-rule No No No No No No No No No No No No
color No No No No No No No No No No No No
color-interpolation No No No No No No No No No No No No
color-interpolation-filters No No No No No No No No No No No No
color-profile No No No No No No No No No No No No
cursor No No No No No No No No No No No No
direction No No No No No No No No No No No No
display No No No No No No No No No No No No
dominant-baseline No No No No No No No No No No No No
enable-background No No No No No No No No No No No No
fill No No 3 No No No No No 4 No No No
fill-opacity No No No No No No No No No No No No
fill-rule No No No No No No No No No No No No
filter No No No No No No No No No No No No
flood-color No No No No No No No No No No No No
flood-opacity No No No No No No No No No No No No
font-family No No No No No No No No No No No No
font-size No No No No No No No No No No No No
font-size-adjust No No No No No 16.4 No No No No 16.4 No
font-stretch No No No No No No No No No No No No
font-style No No No No No No No No No No No No
font-variant No No No No No No No No No No No No
font-weight No No No No No No No No No No No No
glyph-orientation-horizontal No No No No No No No No No No No No
glyph-orientation-vertical No No No No No No No No No No No No
image-rendering No No No No No No No No No No No No
kerning No No No No No No No No No No No No
letter-spacing 1 12 73 9 Yes 5.1 ≤37 18 No Yes 5 1.0
lighting-color No No No No No No No No No No No No
marker-end No No No No No No No No No No No No
marker-mid No No No No No No No No No No No No
marker-start No No No No No No No No No No No No
mask No No No No No No No No No No No No
opacity No No No No No No No No No No No No
overflow No No No No No No No No No No No No
paint-order Yes ≤79 Yes No Yes Yes No Yes Yes No No Yes
pointer-events No No No No No No No No No No No No
shape-rendering No No No No No No No No No No No No
solid-color No No No No No No No No No No No No
solid-opacity No No No No No No No No No No No No
stop-color No No No No No No No No No No No No
stroke No No 3 No No No No No 4 No No No
stroke-dasharray No No No No No No No No No No No No
stroke-dashoffset No No No No No No No No No No No No
stroke-linecap No No No No No No No No No No No No
stroke-linejoin No No No No No No No No No No No No
stroke-miterlimit No No No No No No No No No No No No
stroke-opacity No No No No No No No No No No No No
stroke-width No No No No No No No No No No No No
text-anchor No No No No No No No No No No No No
text-decoration No No No No No No No No No No No No
text-overflow No No No No No No No No No No No No
text-rendering No No No No No No No No No No No No
transform No No No No No No No No No No No No
transform-origin Yes Yes 77 No Yes
YesDoes not work with transform SVG presentation attribute. Only works with transform CSS property. See bug 201854.
Yes Yes No Yes
YesDoes not work with transform SVG presentation attribute. Only works with transform CSS property. See bug 201854.
Yes
unicode-bidi No No No No No No No No No No No No
vector-effect 12 79 15 No 15 5.1 4.4 18 15 14 5 1.0
visibility No No No No No No No No No No No No
white-space No No No No No No No No No No No No
word-spacing 1 12 73 9 Yes 5.1 ≤37 18 No Yes 5 1.0
writing-mode No No No No No No No No No No No No

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation