The values attribute has different meanings, depending upon the context where it's used, either it defines a sequence of values used over the course of an animation, or it's a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.

You can use this attribute with the following SVG elements:

animate, animateMotion, animateTransform

For <animate>, <animateMotion>, and <animateTransform>, values is a list of values defining the sequence of values over the course of the animation. If this attribute is specified, any from, to, and by attribute values set on the element are ignored.

Value <list-of-values>
Default value None
Animatable No

The value holds a semicolon-separated list of one or more values. The type of the values is defined by the href and attributeName attributes.


For the <feColorMatrix> element, values is a list of numbers interpreted differently depending on the value of the type attribute.

Value <list-of-numbers>
Default value If type="matrix", identity matrix,
if type="saturate", 1, resulting in identity matrix,
if type="hueRotate", 0, resulting in identity matrix
Animatable Yes

The value is a list of numbers, which is interpreted differently depending on the value of the type attribute:

  • For type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 … a34), separated by whitespace and/or a comma.
  • For type="saturate", values is a single real number value (0 to 1).
  • For type="hueRotate", values is a single one real number value (degrees).
  • For type="luminanceToAlpha", values is not applicable.


Filter Effects Module Level 1
# element-attrdef-fecolormatrix-values
SVG Animations Level 2
# ValuesAttribute