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

No compatibility data found. Please contribute data for "svg.attributes.presentation" (depth: 1) to the MDN compatibility data repository.

Document Tags and Contributors

Contributors to this page: Jeremie
Last updated by: Jeremie,