(click anywhere to close)

[SVG] Rectangles

category: Website | course: SVG | difficulty:

This chapter, and the next six, will be about all the basic shapes in SVG. We’ll start with the simplest of them all, the rectangle. The minimal syntax is:

<rect x=”xPos” y=”yPos” width=”width” height=”height” />

Obviously, the first two attributes determine the position to place the rectangle at, while the last two determine its dimensions. I like to call these the basic attributes, as these four attributes are used on nearly every SVG element (sometimes with slight variation). And for a good reason of course: every element needs to be placed somewhere, and if you don’t specify dimensions, it’s invisible.

    <rect x="0" y="0" width="30" height="30" />

Vector Attributes

Now you know how to create a solid black rectangle, but that’s boring. There’s another set of attributes used on everything, which I like to call the vector attributes, because these are what make vector graphics the way they are.

Every vector graphic is essentially a path; a set of points connected with lines. You can fill this path with a certain colour, and/or stroke the path with a certain colour, width and style. This stroking is very similar to borders in CSS. Lines, for example, are stroked paths. You can fill lines, but it wouldn’t show anything, because there’s no area to fill. Rectangles are paths of four points connected with straight lines, forming right angles.

The tables below show all vector attributes.






Fill colour

Any valid CSS colour code, default is black


Opacity of fill colour

Numerical value between 0 and 1, default is 1

    <rect fill="blue" x="10" y="10" width="30" height="30" />
    <rect fill="green" fill-opacity="0.7" x="0" y="0" width="30" height="30" />







Stroke colour

Any valid CSS colour code, default is black


Stroke width or size

Numerical value, default is 0px


Opacity of stroke colour

Numerical value between 0 and 1, default is 1.


Dashed stroke

Two values, dash length and gap length, separated by space or comma.

Default is no dashed stroke at all; none.


How to display stroke caps

Three possible values:

butt: Default, line ends are immediately cut off straight.

round: Round endings – half circles at both ends.

square: Adds squares at the end. Same as default, but makes for a slightly extended line.


How to join two lines at a point

Three possible values:

miter: Default, pointy corner

round: Round corner

bevel: Straight cut off corner

    <rect stroke="blue" x="30" y="30" width="60" height="60" fill="transparent"/>
    <rect stroke="green" stroke-dasharray="10 5" x="0" y="0" width="60" height="60" fill="transparent" />

Round Corners

Rectangles are known for their right angles, but SVG allows you to make those corners round. For this, you must use the rx=”radius and ry=”radius attributes. These supply the x-radius and y-radius, respectively, essentially creating an ellipse of which each corner of the rectangle is one quadrant.

    <rect stroke="red" stroke-width="10" rx="5" ry="15" fill="orange" x="30" y="30" width="60" height="60"/>
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk