The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
xThe x coordinate of the rect. Value type: <length>|<percentage> ; Default value: 0; Animatable: yesyThe y coordinate of the rect. Value type: <length>|<percentage> ; Default value: 0; Animatable: yeswidthThe width of the rect. Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yesheightThe height of the rect. Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yesrxThe horizontal corner radius of the rect. Defaults to ry if it is specified. Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yesryThe vertical corner radius of the rect. Defaults to rx if it is specified. Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yespathLengthThe total length of the rectangle's perimeter, in user units. Value type: <number> ; Default value: none; Animatable: yes
Note: Starting with SVG2, x, y, width, height, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
CategoriesBasic shape element, Graphics element, Shape elementPermitted contentAny number of the following elements, in any order: Animation elements Descriptive elements