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

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

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

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

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

glyph-orientation-vertical

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

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