SVG's layout properties

Beside SVG's styling properties, SVG also defines layout properties. Layout properties describe graphics elements position and dimension.

Horizontal center coordinate: The 'cx' property

Name: cx
Value: <length> | <percentage>
Initial: 0
Applies to: 'circle', 'ellipse', 'radialGradient'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'cx' property describes the horizontal center coordinate of the position of the element. For 'radialGradient' it defines the horizontal center coordinate of the radial gradient.

Vertical center coordinate: The 'cy' property

Name: cy
Value: <length> | <percentage>
Initial: 0
Applies to: 'circle', 'ellipse', 'radialGradient'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'cy' property describes the vertical center coordinate of the position of the element. For 'radialGradient' it defines the vertical center coordinate of the radial gradient.

Radius: The 'r' property

Name: r
Value: <length> | <percentage>
Initial: 0
Applies to: 'circle', 'radialGradient'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'r' property describes the radius of the 'circle' element and the radius of the radial gradient of the 'radialGradient' element. The radius must be bigger or equal to zero.

Horizontal radius: The 'rx' property

Name: rx
Value: <length> | <percentage>
Initial: 0
Applies to: 'ellipse', 'rect'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'rx' property describes the horizontal radius of the 'ellipse' element and the curve radius of the 'rect' element. The horizontal radius must be bigger or equal to zero.

Vertical radius: The 'ry' property

Name: ry
Value: <length> | <percentage>
Initial: 0
Applies to: 'ellipse', 'rect'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'ry' property describes the vertical radius of the 'ellipse' element and the curve radius of the 'rect' element. The vertical radius must be bigger or equal to zero.

Horizontal coordinate: The 'x' property

Name: x
Value: <length> | <percentage>
Initial: 0
Applies to: 'pattern element', 'mask element', 'filter element', 'svg', 'rect', 'image', 'foreignObject'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'x' property describes the horizontal coordinate of the position of the element.

In opposite to all other usage, the 'text' element and the 'tspan' element do have x and y attributes with length lists. So far, there are four proposals:

  1. Make 'x' accept a list of length|percentage values rather than a single length|percentage value. For the elements 'pattern', 'mask element', 'filter element', 'svg', 'rect', 'image', 'foreignObject' we would specify that all but the first list item must be ignored.
  2. Don't make 'x' a presentation attribute for the 'text' element and the 'tspan' element. We had experience with that on the width and height attribute for HTMLCanvas. The position of the two elements could not be set by the CSS properties that apply every where else otherwise.
  3. Introduce a value of 'auto' to 'x'. For the 'text' element and the 'tspan': If the computed value of the 'x' property is 'auto', take the value of the 'x' attribute. Otherwise, let the 'x' property override the value of the 'x' attribute. For all other elements, 'x' behaves like a normal presentation attribute.
  4. For the 'text' element and the 'tspan': Map the x and y attributes to different CSS properties like 'text-x' and 'text-y'.

Vertical coordinate: The 'y' property

Name: y
Value: <length> | <percentage>
Initial: 0
Applies to: 'pattern element', 'mask element', 'filter element', 'svg', 'rect', 'image', 'foreignObject'
Inherited: no
Percentages: refer to the size of the current viewport (see Units)
Media: visual
Computed value: as specified
Animatable: yes

The 'y' property describes the vertical coordinate of the position of the element.

See issue for the 'x' property.

Consider turning more attributes to presentation attributes like 'fx', 'fy', 'dx' and 'dy'.