Drawing a Rectangle

There are several ways to draw a shape in SVG, where simple shapes have their own tags.

For example, you can draw a rectangle using the rect tag. The code for a simple rectangle looks like this:

<rect width="150" height="100"/>

Please note: All of the tags in the SVG must be closed. That is, they should look like this: <rect .../> or like this: <rect ...></rect>. We will use the first method.

Result:

The width and height attributes control the shape’s width and height, respectively. Values can be specified either using pixels or percentages.

For pixel values, you do not need to write px after the value, because pixels are the default unit of measurement in SVG. Percentages are calculated relative to the dimensions of the entire SVG image, where horizontal values are relative to width and vertical values are relative to height.

In modern browsers, the size and position of shapes cannot be controlled via CSS, but this will be possible in the future.