Promoting SVG attributes to properties so that they may be animated with CSS Animations

If we take each row in the SVG 1.1 Attribute Table appendix that is marked as animatable, we start with 184 attributes. This includes separate entries for, say, width on rect to width on image, since they have different definitions in the specification. On the other hand, transform has a single definition which many other elements reference, so there is only a single row for it.

The only animatable attribute I can see we definitely want to exclude from promoting to a property is class.

Initial mapping

I'll start here with a fairly blind mapping of attributes to properties, unifying only where it is really obvious.

AttributeElementsProperty
filter-specific attributes:
filterResfilterfilter-res
filterUnitsfilterfilter-units
primitiveUnitsfilterfilter-primitive-units
infeBlend, feColorMatrix, etc.filter-input
in2feBlend, feComposite, feDisplacementMapfilter-input-2
resultfeBlend, feColorMatrix, etc.filter-result
modefeBlendblend-mode
typefeColorMatrixcolor-matrix-type
valuesfeColorMatrixcolor-matrix-values
k1feCompositecomposite-arithmetic-constant-1
k2feCompositecomposite-arithmetic-constant-2
k3feCompositecomposite-arithmetic-constant-3
k4feCompositecomposite-arithmetic-constant-4
operatorfeCompositecomposite-operator
biasfeConvolveMatrixconvolve-bias
divisorfeConvolveMatrixconvolve-divisor
edgeModefeConvolveMatrixconvolve-edge-mode
kernelMatrixfeConvolveMatrixconvolve-kernel-matrix
kernelUnitLengthfeConvolveMatrixconvolve-kernel-unit-length
orderfeConvolveMatrixconvolve-order
preserveAlphafeConvolveMatrixconvolve-preserve-alpha
targetXfeConvolveMatrixconvolve-target-x
targetYfeConvolveMatrixconvolve-target-y
diffuseConstantfeDiffuseLightinglighting-diffuse-constant
kernelUnitLengthfeDiffuseLighting, feSpecularLightinglighting-kernel-unit-length
surfaceScalefeDiffuseLighting, feSpecularLightinglighting-surface-scale
specularConstantfeSpecularLightinglighting-specular-constant
specularExponentfeSpecularLightinglighting-specular-exponent
scalefeDisplacementMapdisplacement-map-scale
xChannelSelectorfeDisplacementMapdisplacement-map-x-channel
yChannelSelectorfeDisplacementMapdisplacement-map-y-channel
stdDeviationfeGaussianBlurgaussian-blur-standard-deviation
operatorfeMorphologymorphology-operator
radiusfeMorphologymorphology-radius
dxfeOffsetoffset-dx
dyfeOffsetoffset-dy
baseFrequencyfeTurbulenceturbulence-frequence
numOctavesfeTurbulenceturbulence-octaves
seedfeTurbulenceturbulence-seed
stitchTilesfeTurbulenceturbulence-stitch-tiles
typefeTurbulenceturbulence-type
typefeFuncA, etc.transfer-function-type
amplitudefeFuncA, etc.transfer-function-slope
exponentfeFuncA, etc.transfer-function-exponent
interceptfeFuncA, etc.transfer-function-intercept
offsetfeFuncA, etc.transfer-function-offset
slopefeFuncA, etc.transfer-function-slope
tableValuesfeFuncA, etc.transfer-function-table
azimuthfeDistantLightlight-azimuth
elevationfeDistantLightlight-elevation
limitingConeAnglefeSpotLightlight-limiting-cone-angle
pointsAtXfeSpotLightlight-points-at-x
pointsAtYfeSpotLightlight-points-at-y
pointsAtZfeSpotLightlight-points-at-z
specularExponentfeSpotLightlight-specular-exponent
xfeSpotLight, fePointLightlight-position-x
yfeSpotLight, fePointLightlight-position-y
zfeSpotLight, fePointLightlight-position-z
gradient-specific attributes:
gradientTransformlinearGradient, radialGradientgradient-transform
gradientUnitslinearGradient, radialGradientgradient-units
spreadMethodlinearGradient, radialGradientgradient-spread-method
xlink:hreflinearGradient, radialGradientgradient-parent
x1linearGradientgradient-start-x
y1linearGradientgradient-start-y
x2linearGradientgradient-end-x
y2linearGradientgradient-end-y
cxradialGradientgradient-center-x
cyradialGradientgradient-center-y
fxradialGradientgradient-focus-x
fyradialGradientgradient-focus-y
rradialGradientgradient-radius
remaining attributes:
clipPathUnitsclipPathclip-path-units
cxcircle, ellipsecenter-x
cycircle, ellipsecenter-y
dpathpath-data
dxaltGlyph, text, tref, tspanglyph-offset-x
dyaltGlyph, text, tref, tspanglyph-offset-y
widthfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)width
markerWidthmarkerwidth
heightfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)height
markerHeightmarkerheight
lengthAdjusttext, textPath, tref, tspantext-length-adjust
markerUnitsmarkermarker-units
maskContentUnitsmaskmask-content-units
maskUnitsmaskmask-units
methodtextPathtext-path-method
offsetstopstop-offset
orientmarkermarker-orient
pathLengthpathpath-length
patternContentUnitspatternpattern-content-units
patternTransformpatternpattern-transform
patternUnitspatternpattern-units
pointspolygon, polylinepoly-points
preserveAspectRatiofeImage, image, marker, etc.preserve-aspect-ratio
rcirclecircle-radius
refXmarkermarker-reference-point-x
refYmarkermarker-reference-point-y
rotatealtGlyph, text, tref, tspanglyph-rotate
rxellipseellipse-radius-x
ryellipseellipse-radius-y
rxrectrect-corner-radius-x
ryrectrect-corner-radius-y
spacingtextPathtext-path-spacing
startOffsettextPathtext-path-start-offset
targetalink-target
textLengthtext, textPath, tref, tspantext-length
transforma, circle, etc.transform
viewBoxmarker, pattern, etc.viewbox
xaltGlyph, text, tref, tspanglyph-position-x
yaltGlyph, text, tref, tspanglyph-position-y
xcursorcursor-reference-point-x
ycursorcursor-reference-point-y
xfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)left
yfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)top
x1lineline-start-x
y1lineline-start-y
x2lineline-end-x
y2lineline-end-y
xlink:hrefalink-href
xlink:hrefcursorcursor-image
xlink:hreffeImageimage-href
xlink:hreffilterfilter-parent
xlink:hrefimageimage-href
xlink:hrefpatternpattern-parent
xlink:hreftextPathtext-path-reference
xlink:hrefuseused-content
xlink:hreftreftext-content

That is new properties.

The names I chose for properties are certainly up for discussion. I tried not to be constrained by the existing names of the SVG attributes and instead chose names that look more like real CSS properties.

Since it still seems to be open whether we want to promote the filter and gradient attributes just yet, because they will have more specialised/usable syntax in CSS, I separated them out. As Robert mentioned, though, it is prudent to look at how all of the attributes would be promoted, even if we are avoiding doing so for some of them initially.

The unifications I made in the above table are:

I am uneasy about promoting xlink:href and target on a to properties. Every other property is simply about the visual display of elements, but these ones affect an element's interactive behaviour. (Maybe that's OK.)

More unification

We can consider some more property unification:

Applying the above, we get the following table of attribute to property mappings:

AttributeElementsProperty
filter-specific attributes:
filterResfilterfilter-res
filterUnitsfilterelement-units
primitiveUnitsfiltercontent-units
infeBlend, feColorMatrix, etc.filter-input
in2feBlend, feComposite, feDisplacementMapfilter-input-2
resultfeBlend, feColorMatrix, etc.filter-result
modefeBlendblend-mode
typefeColorMatrixcolor-matrix-type
valuesfeColorMatrixcolor-matrix-values
k1feCompositecomposite-arithmetic-constant-1
k2feCompositecomposite-arithmetic-constant-2
k3feCompositecomposite-arithmetic-constant-3
k4feCompositecomposite-arithmetic-constant-4
operatorfeCompositecomposite-operator
biasfeConvolveMatrixconvolve-bias
divisorfeConvolveMatrixconvolve-divisor
edgeModefeConvolveMatrixconvolve-edge-mode
kernelMatrixfeConvolveMatrixconvolve-kernel-matrix
kernelUnitLengthfeConvolveMatrixconvolve-kernel-unit-length
orderfeConvolveMatrixconvolve-order
preserveAlphafeConvolveMatrixconvolve-preserve-alpha
targetXfeConvolveMatrixconvolve-target-x
targetYfeConvolveMatrixconvolve-target-y
diffuseConstantfeDiffuseLightinglighting-diffuse-constant
kernelUnitLengthfeDiffuseLighting, feSpecularLightinglighting-kernel-unit-length
surfaceScalefeDiffuseLighting, feSpecularLightinglighting-surface-scale
specularConstantfeSpecularLightinglighting-specular-constant
specularExponentfeSpecularLightinglighting-specular-exponent
scalefeDisplacementMapdisplacement-map-scale
xChannelSelectorfeDisplacementMapdisplacement-map-x-channel
yChannelSelectorfeDisplacementMapdisplacement-map-y-channel
stdDeviationfeGaussianBlurgaussian-blur-standard-deviation
operatorfeMorphologymorphology-operator
radiusfeMorphologymorphology-radius
dxfeOffsetoffset-dx
dyfeOffsetoffset-dy
baseFrequencyfeTurbulenceturbulence-frequence
numOctavesfeTurbulenceturbulence-octaves
seedfeTurbulenceturbulence-seed
stitchTilesfeTurbulenceturbulence-stitch-tiles
typefeTurbulenceturbulence-type
typefeFuncA, etc.transfer-function-type
amplitudefeFuncA, etc.transfer-function-slope
exponentfeFuncA, etc.transfer-function-exponent
interceptfeFuncA, etc.transfer-function-intercept
offsetfeFuncA, etc.transfer-function-offset
slopefeFuncA, etc.transfer-function-slope
tableValuesfeFuncA, etc.transfer-function-table
azimuthfeDistantLightlight-azimuth
elevationfeDistantLightlight-elevation
limitingConeAnglefeSpotLightlight-limiting-cone-angle
pointsAtXfeSpotLightlight-points-at-x
pointsAtYfeSpotLightlight-points-at-y
pointsAtZfeSpotLightlight-points-at-z
specularExponentfeSpotLightlight-specular-exponent
xfeSpotLight, fePointLightlight-position-x
yfeSpotLight, fePointLightlight-position-y
zfeSpotLight, fePointLightlight-position-z
gradient-specific attributes:
gradientTransformlinearGradient, radialGradienttransform
gradientUnitslinearGradient, radialGradientelement-units
spreadMethodlinearGradient, radialGradientgradient-spread-method
xlink:hreflinearGradient, radialGradientreference-parent
x1linearGradientstart-point-x
y1linearGradientstart-point-y
x2linearGradientend-point-x
y2linearGradientend-point-y
fxradialGradientstart-point-x
fyradialGradientstart-point-y
cxradialGradientend-point-x
cyradialGradientend-point-y
rradialGradientradius
remaining attributes:
clipPathUnitsclipPathelement-units
cxcircle, ellipsepoint-x
cycircle, ellipsepoint-y
refXmarkerpoint-x
refYmarkerpoint-y
xcursorpoint-x
ycursorpoint-y
dpathshape
dxaltGlyph, text, tref, tspanglyph-offset-x
dyaltGlyph, text, tref, tspanglyph-offset-y
widthfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)width
markerWidthmarkerwidth
heightfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)height
markerHeightmarkerheight
lengthAdjusttext, textPath, tref, tspantext-length-adjust
markerUnitsmarkerelement-units
maskContentUnitsmaskcontent-units
maskUnitsmaskelement-units
methodtextPathtext-path-method
offsetstopstop-offset
orientmarkermarker-orient
pathLengthpathpath-length
patternContentUnitspatterncontent-units
patternTransformpatterntransform
patternUnitspatternelement-units
pointspolygon, polylineshape
preserveAspectRatiofeImage, image, marker, etc.preserve-aspect-ratio
rcircleradius
rotatealtGlyph, text, tref, tspanglyph-rotate
rxellipseradius-x
ryellipseradius-y
rxrectradius-x
ryrectradius-y
spacingtextPathtext-path-spacing
startOffsettextPathtext-path-start-offset
targetalink-target
textLengthtext, textPath, tref, tspantext-length
transforma, circle, etc.transform
viewBoxmarker, pattern, etc.viewbox
xaltGlyph, text, tref, tspanglyph-position-x
yaltGlyph, text, tref, tspanglyph-position-y
xfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)left
yfilter, foreignObject, image, mask, pattern, rect, svg, use, feBlend (and other filter primitives)top
x1linestart-point-x
y1linestart-point-y
x2lineend-point-x
y2lineend-point-y
xlink:hrefalink-href
xlink:hrefcursor, filter, patternreference-parent
xlink:hreffeImage, image, use, trefreferenced-content
xlink:hreftextPathtext-path-reference

That's now new properties, or 33 if we are only looking at the non-filter, non-gradient attributes.

Cameron McCormack, 31 March 2011