Beside SVG's styling properties, SVG also defines geometry properties. Geometry properties describe the position and dimension of the graphics elements ‘circle’, ‘ellipse’, ‘rect’, ‘image’, ‘foreignObject’ and the ‘svg’ element.
| Name: | cx |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | ‘circle’ and ‘ellipse’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The cx property describes the horizontal center coordinate of the position of the element.
| Name: | cy |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | ‘circle’ and ‘ellipse’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The cy property describes the vertical center coordinate of the position of the element.
| Name: | r |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | ‘circle’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The r property describes the radius of the ‘circle’ element.
A negative value for r must be treated as an illegal value.
| Name: | rx |
|---|---|
| Value: | <length> | <percentage> | auto |
| Initial: | auto |
| Applies to: | ‘ellipse’, ‘rect’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The rx property describes the horizontal radius of the ‘ellipse’ element and the curve radius of the ‘rect’ element. When the computed value of ‘rx’ is auto, the used radius is equal to the absolute length used for ry, creating a circular arc. If both ‘rx’ and ‘ry’ have a computed value of auto, the used value is 0.
Regardless of how the value is calculated, the used value of ‘rx’ for a ‘rect’ is never more than 50% of the used value of width for the same shape.
The auto behavior is new in SVG 2 for ‘ellipse’, matching the behavior for ‘rect’ elements when rx was not specified.
A negative value for rx must be treated as an illegal value.
| Name: | ry |
|---|---|
| Value: | <length> | <percentage> | auto |
| Initial: | auto |
| Applies to: | ‘ellipse’, ‘rect’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The ry property describes the vertical radius of the ‘ellipse’ element and the vertical curve radius of the ‘rect’ element. When the computed value of ‘ry’ is auto, the used radius is equal to the absolute length used for rx, creating a circular arc. If both ‘rx’ and ‘ry’ have a computed value of auto, the used value is 0.
Regardless of how the value is calculated, the used value of ‘ry’ for a ‘rect’ is never more than 50% of the used value of height for the same shape.
The auto behavior is new in SVG 2 for ‘ellipse’, matching the behavior for ‘rect’ elements when ry was not specified.
A negative value for ry must be treated as an illegal value.
| Name: | x |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The x property describes the horizontal coordinate of the position of the element.
| Name: | y |
|---|---|
| Value: | <length> | <percentage> |
| Initial: | 0 |
| Applies to: | ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ |
| Inherited: | no |
| Percentages: | refer to the size of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | absolute length or percentage |
| Animatable: | yes |
The y property describes the vertical coordinate of the position of the element.
See the CSS 2.1 specification for the definitions of width and height.
The CSS width and height properties are used for sizing some SVG elements. Specifically, they are used to size ‘rect’, ‘svg’, ‘image’ and ‘foreignObject’. All of these elements have ‘width’ and ‘height’ presentation attributes.
The value auto for width and height on the ‘svg’ element is treated as 100%.
The value auto for width and height on the ‘image’ element is calculated from the referenced image's intrinsic dimensions and aspect ratio, according to the CSS default sizing algorithm.
New in SVG 2. Images embedded in SVG can now be auto-sized to the intrinsic size, or scaled to a fixed height or width according to the intrinsic aspect ratio. This matches the behavior of embedded images in HTML.
The value auto for width and height on other elements is treated as 0.
This means that, for example, a ‘foreignObject’ object element will not shrink-wrap to its contents if auto is used.