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.
<rect>
Example
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
Attributes
-
x -
The x coordinate of the rect. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes -
y -
The y coordinate of the rect. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes -
width -
The width of the rect. Value type:
auto|<length>|<percentage> ; Default value:auto; Animatable: yes -
height -
The height of the rect. Value type:
auto|<length>|<percentage> ; Default value:auto; Animatable: yes -
rx -
The horizontal corner radius of the rect. Defaults to
ryif it is specified. Value type:auto|<length>|<percentage> ; Default value:auto; Animatable: yes -
ry -
The vertical corner radius of the rect. Defaults to
rxif it is specified. Value type:auto|<length>|<percentage> ; Default value:auto; Animatable: yes -
pathLength -
The 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.
Global attributes
- Core Attributes
- Styling Attributes
class,style- Conditional Processing Attributes
-
Most notably:
requiredExtensions,systemLanguage - Event Attributes
- Presentation Attributes
-
Most notably:
clip-path,clip-rule,color,color-interpolation,color-rendering,cursor,display,fill,fill-opacity,fill-rule,filter,mask,opacity,pointer-events,shape-rendering,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,transform,vector-effect,visibility - Aria Attributes
-
aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,aria-disabled,aria-dropeffect,aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,aria-keyshortcuts,aria-label,aria-labelledby,aria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-orientation,aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,aria-relevant,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext,role
Usage notes
| Categories | Basic shape element, Graphics element, Shape element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RectElement |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
rect |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | Yes | 2 | Yes |
height |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
rx |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
ry |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
width |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
x |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
y |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | No | 2 | Yes |
See also
- Other basic SVG shapes:
<circle>,<ellipse>,<line>,<polygon>,<polyline>
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect