SVG Presentation Attributes
SVG presentation attributes are CSS properties that can be used as attributes on SVG elements.
- alignment-baseline
- baseline-shift
- clip
- clip-path
- clip-rule
- color
- color-interpolation
- color-interpolation-filters
- color-profile
- color-rendering
- cursor
- d
- direction
- display
- dominant-baseline
- enable-background
- fill
- fill-opacity
- fill-rule
- filter
- flood-color
- flood-opacity
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
- glyph-orientation-horizontal
- glyph-orientation-vertical
- image-rendering
- kerning
- letter-spacing
- lighting-color
- marker-end
- marker-mid
- marker-start
- mask
- opacity
- overflow
- pointer-events
- shape-rendering
- solid-color
- solid-opacity
- stop-color
- stop-opacity
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- text-anchor
- text-decoration
- text-rendering
- transform
- unicode-bidi
- vector-effect
- visibility
- word-spacing
- writing-mode
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:nonezero
|evenodd
|inherit
; Animatable: Yes -
color
-
It provides a potential indirect value (
currentcolor
) for thefill
,stroke
,stop-color
,flood-color
andlighting-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
|visibleFil
|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 |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
baseline-shift |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
clip |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
clip-path |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
clip-rule |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
color |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
color-interpolation |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
color-interpolation-filters |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
color-profile |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
color-rendering |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
cursor |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
direction |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
display |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
dominant-baseline |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
enable-background |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
fill |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
fill-opacity |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
fill-rule |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
filter |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
flood-color |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
flood-opacity |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-family |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-size |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-size-adjust |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-stretch |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-style |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-variant |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
font-weight |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
glyph-orientation-horizontal |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
glyph-orientation-vertical |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
image-rendering |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
kerning |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
letter-spacing |
1
|
12
|
73
|
9
|
Yes
|
5.1
|
≤37
|
18
|
No
|
Yes
|
5
|
1.0
|
lighting-color |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
marker-end |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
marker-mid |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
marker-start |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
mask |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
opacity |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
overflow |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
paint-order |
Yes
|
≤79
|
Yes
|
No
|
Yes
|
Yes
|
No
|
Yes
|
Yes
|
No
|
No
|
Yes
|
pointer-events |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
shape-rendering |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
solid-color |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
solid-opacity |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stop-color |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-dasharray |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-dashoffset |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-linecap |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-linejoin |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-miterlimit |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-opacity |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
stroke-width |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
text-anchor |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
text-decoration |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
text-overflow |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
text-rendering |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
transform |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
transform-origin |
Yes
|
Yes
|
77
|
?
|
Yes
|
Yes
Does not work with
transform SVG presentation attribute. Only works with
transform CSS property. See
bug 201854.
|
Yes
|
Yes
|
No
|
Yes
|
Yes
Does not work with
transform SVG presentation attribute. Only works with
transform CSS property. See
bug 201854.
|
Yes
|
unicode-bidi |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
vector-effect |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
visibility |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
white-space |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
word-spacing |
1
|
12
|
73
|
9
|
Yes
|
5.1
|
≤37
|
18
|
No
|
Yes
|
5
|
1.0
|
writing-mode |
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
© 2005–2021 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