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 provides a hint to the browser about how to optimize its color interpolation and compositing operations.
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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung 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: Jeremie
Last updated by: Jeremie,