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.
The cx, cy, x and y properties accept negative values. The r, rx and ry properties do not: their value definitions limit lengths and percentages to the range [0,∞]. Neither do width and height, whose value definitions in CSS Sizing do the same.
A negative value for these properties is handled by the general rules, as for any CSS property:
- In a CSS declaration, a negative length or percentage, such as
-5px, is out of range: the declaration is invalid and ignored, and the property gets its value from the rest of the cascade (another declaration, the presentation attribute, or the initial value). - In a presentation attribute, it fails to parse, so the attribute is treated as if the property’s initial value had been specified (see Attribute syntax): auto for rx, ry, width and height, and 0 for r.
- A negative result of a math function, such as
calc(-5px), is not invalid, in a presentation attribute or in a CSS declaration: like any numeric function, it is clamped to the range, so it is used as 0. For rx and ry that is 0, not auto.
The following table summarizes the result for a negative length or percentage in a presentation attribute.
| Property | Value | Initial | Negative allowed? | A negative value is treated as | Result |
|---|---|---|---|---|---|
| cx, cy, x, y | <length-percentage> | 0 | yes | the negative value | the element is moved |
| r | <length-percentage [0,∞]> | 0 | no | 0 | the ‘circle’ is not rendered
|
| rx, ry | <length-percentage [0,∞]> | auto | auto | no | auto | the radius is the used value of the other radius, or 0 if the other radius is also
auto. An ‘ellipse’
with a radius of 0 is not rendered.
|
| width, height | <length-percentage> | auto | auto | no | auto | as in the sizing table: 100% for the
outermost ‘svg’, the intrinsic size for
‘image’, and 0
for all other elements.
|
7.1. Horizontal center coordinate: The ‘cx’ property
| Name: | cx |
|---|---|
| Value: | <length-percentage> |
| Initial: | 0 |
| Applies to: | ‘circle’ and ‘ellipse’ elements
|
| Inherited: | no |
| Percentages: | refer to the width of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animation type: | by computed value |
The cx property describes the horizontal center coordinate of the position of the element.
Negative values are permitted for cx; a negative value translates the center of the shape and does not disable rendering, unlike r, rx and ry (see the handling of negative values).
7.2. Vertical center coordinate: The ‘cy’ property
| Name: | cy |
|---|---|
| Value: | <length-percentage> |
| Initial: | 0 |
| Applies to: | ‘circle’ and ‘ellipse’ elements
|
| Inherited: | no |
| Percentages: | refer to the height of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animation type: | by computed value |
The cy property describes the vertical center coordinate of the position of the element.
Negative values are permitted for cy; a negative value translates the center of the shape and does not disable rendering (see the handling of negative values).
7.3. Radius: The ‘r’ property
| Name: | r |
|---|---|
| Value: | <length-percentage [0,∞]> |
| Initial: | 0 |
| Applies to: | ‘circle’ element
|
| Inherited: | no |
| Percentages: | refer to the normalized diagonal of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animation type: | by computed value |
The r property describes the radius of the ‘circle’
element.
A negative length or percentage for r is invalid (see the
handling of negative values). In a presentation
attribute it is treated as 0, so the
‘circle’ is not rendered.
7.4. Horizontal radius: The ‘rx’ property
| Name: | rx |
|---|---|
| Value: | <length-percentage [0,∞]> | auto |
| Initial: | auto |
| Applies to: | ‘ellipse’, ‘rect’ elements
|
| Inherited: | no |
| Percentages: | refer to the width of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animation type: | by computed value |
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 length or percentage for rx is invalid (see the handling of negative values). In a presentation attribute it is treated as auto, so the radius is the used value of ry, or 0 if ry is also auto.
7.5. Vertical radius: The ‘ry’ property
| Name: | ry |
|---|---|
| Value: | <length-percentage [0,∞]> | auto |
| Initial: | auto |
| Applies to: | ‘ellipse’, ‘rect’
|
| Inherited: | no |
| Percentages: | refer to the height of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animatable type: | by computed value |
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 length or percentage for ry is invalid (see the handling of negative values). In a presentation attribute it is treated as auto, so the radius is the used value of rx, or 0 if rx is also auto.
7.6. Horizontal coordinate: The ‘x’ property
| Name: | x |
|---|---|
| Value: | <length-percentage> |
| Initial: | 0 |
| Applies to: | ‘svg’, ‘rect’,
‘image’, ‘foreignObject’ elements
|
| Inherited: | no |
| Percentages: | refer to the width of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animation type: | by computed value |
The x property describes the horizontal coordinate of the position of the element.
7.7. Vertical coordinate: The ‘y’ property
| Name: | y |
|---|---|
| Value: | <length-percentage> |
| Initial: | 0 |
| Applies to: | ‘svg’, ‘rect’,
‘image’, ‘foreignObject’ elements
|
| Inherited: | no |
| Percentages: | refer to the height of the current SVG viewport (see Units) |
| Media: | visual |
| Computed value: | an absolute length or percentage |
| Animation type: | by computed value |
The y property describes the vertical coordinate of the position of the element.
7.8. Sizing properties: the effect of the ‘width’ and ‘height’ properties
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’, ‘image’, ‘foreignObject’, and
the outermost ‘svg’ element. All of these elements have ‘width’
and ‘height’ presentation attributes.
The properties are also used for laying out embedded elements from the HTML namespace.
Other SVG elements, such as nested ‘svg’ elements, the ‘use’ element, and
the ‘symbol’ element, also have ‘width’ and
‘height’ attributes, but do not accept them as CSS properties.
On these elements, the width and height must be specified as XML attributes; CSS properties
with the same names are ignored.
The used value of width may be constrained by the value of the max-width and min-width properties. The used value of height may be constrained by the value of the max-height and min-height properties.
The following table summarizes how the value auto for width and height is treated on different elements:
| Element | Value | Treated as |
|---|---|---|
‘svg’
| auto | 100% |
‘image’
| auto | Calculated from the referenced image’s intrinsic dimensions and aspect ratio, according to the CSS Default Sizing Algorithm |
| All other elements | auto | 0 |
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.
This means that, for example, a ‘foreignObject’
object element will not shrink-wrap to its contents if
auto is used.