SVGRectangle

Parameters

AttributeDescription
xHorizontal position of rectangle from left margin.
yVertical position of rectangle from top margin.
widthWidth of rectangle.
heightHeight of rectangle.
rxHorizontal radius of ellipse used to round corners of rectangle
ryVertical radius of ellipse used to round corners of rectangle
strokeColour of rectangle border.
stroke-widthWidth of rectangle border.
fillColour inside rectangle border.

Remarks

Detailed information on the SVG 'rect' element can be found in the W3C Recommendation for SVG.

Draw a black rectangle without fill

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="50" height="100" stroke="black" stroke-width="5" fill="none" />
</svg>

Result:

enter image description here

Draw a black rectangle with yellow fill and rounded corners

  • The width and height attributes designate the dimensions of the rectangle. These values are in pixels by default
  • The fill value sets the color for the rectangle. If no value for fill is specified, black is used by default
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="50" height="100" rx="10" ry="10" stroke="black" stroke-width="5" fill="yellow" />
</svg>

Result:

enter image description here