SVG Presentation Attributes

Draft
This page is not complete.

SVG presentation attributes are CSS properties that can be used as attributes on SVG elements.

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 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 since SVG 2
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
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 since SVG 2
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 since SVG 2
It controls glyph orientation when the inline-progression-direction is horizontal.
Value: <angle>|inherit; Animatable: No
glyph-orientation-vertical Deprecated since SVG 2
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 since SVG 2
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
Hins 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
alignment-baselineChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
baseline-shiftChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
clipChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
clip-pathChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
clip-ruleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
colorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-interpolationChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-interpolation-filtersChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-profile
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-renderingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
cursorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
directionChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
displayChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
dominant-baselineChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
enable-background
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fillChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fill-opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fill-ruleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
filterChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
flood-colorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
flood-opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-familyChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-sizeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-size-adjustChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-stretchChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-styleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-variantChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
font-weightChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
glyph-orientation-horizontalChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
glyph-orientation-verticalChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
image-renderingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
kerningChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
letter-spacingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
lighting-colorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
marker-endChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
marker-midChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
marker-startChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
maskChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
overflowChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
paint-order
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pointer-eventsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
shape-renderingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
solid-colorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
solid-opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stop-colorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stop-opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
strokeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-dasharrayChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-dashoffsetChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-linecapChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-linejoinChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-miterlimitChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
stroke-widthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
text-anchorChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
text-decorationChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
text-overflowChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
text-renderingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transformChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
unicode-bidiChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
vector-effectChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
visibilityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
white-spaceChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
word-spacingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
writing-modeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Document Tags and Contributors

Contributors to this page: a-mt, Jeremie
Last updated by: a-mt,