SVG 2 – 15 September 2015 TopContentsPreviousNextElementsAttributesProperties

# Chapter 6: Geometry Properties

## Contents

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, and the elements mask, svg.

## 6.1. Horizontal center coordinate: The ‘cx’ property

Name: cx | 0 ‘circle’ and ‘ellipse’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`cx`’ property describes the horizontal center coordinate of the position of the element.

## 6.2. Vertical center coordinate: The ‘cy’ property

Name: cy | 0 ‘circle’ and ‘ellipse’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`cy`’ property describes the vertical center coordinate of the position of the element.

## 6.3. Radius: The ‘r’ property

Name: r | 0 ‘circle’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`r`’ property describes the radius of the circle element.

Negative values for ‘`r`’ are illegal.

## 6.4. Horizontal radius: The ‘rx’ property

Name: rx | 0 ‘ellipse’, ‘rect’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`rx`’ property describes the horizontal radius of the ellipse element and the curve radius of the rect element.

Negative values for ‘`rx`’ are illegal.

## 6.5. Vertical radius: The ‘ry’ property

Name: ry | 0 ‘ellipse’, ‘rect’ no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`ry`’ property describes the vertical radius of the ellipse element and the curve radius of the rect element.

Negative values for ‘`ry`’ are illegal.

## 6.6. Horizontal coordinate: The ‘x’ property

Name: x | 0 ‘mask’, ‘svg’, ‘rect’, ‘image’, no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`x`’ property describes the horizontal coordinate of the position of the element.

## 6.7. Vertical coordinate: The ‘y’ property

Name: y | 0 ‘mask’, ‘svg’, ‘rect’, ‘image’, no refer to the size of the current viewport (see Units) visual absolute length or percentage yes

The ‘`y`’ property describes the vertical coordinate of the position of the element.

## 6.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, svg, mask, image and . All of these elements have ‘width’ and ‘height’ presentation attributes.

The value auto for ‘`width`’ and ‘`height`’ on these elements must compute to 0.

This means that, for example, a object element will not shrink-wrap to its contents if auto is used.

SVG 2 – 15 September 2015 TopContentsPreviousNextElementsAttributesProperties