Composition in Color A, 1917, by Piet Mondrian, rendered in SVG
Part of the SVG Elements Reading List

Cet article est également disponible en français

After circles, rectangles are probably the easiest element to draw in , requiring just one more attribute to complete them. The basic syntax for rectangles requires an x position, y position, width and height:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
	<rect x="20" y="20" width="40" height="40"/>
</svg>

There’s a few things to note immediately:

  • unlike circles, rectangles are drawn from their top left corner (the supplied x and y coordinates).
  • like most other elements, rectangles lacking a fill are black by default.
  • the rectangle element is “closed inside itself” with a slash (/)
  • like all other elements, rectangles that appear later in the code will appear on top of previous elements if they overlap.
  • despite the impression this article’s title may have provided, there is no distinct “square” element in SVG: squares are just rectangles with equal values for their width and height.

Borders & Corners

Like all other shapes in SVG, <rect> elements can be provided with a border (referred to as stroke in SVG): 

<rect x="20" y="20" width="40" height="40" 
stroke="tomato" stroke-width="5" >

Producing:

In CSS you can use border-radius to round the visible corners of elements. For SVG rectangles, it’s the attributes rx and ry: 

<rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width="5" rx="5" ry="5" />

Which creates:

However, unlike border-radius, rx and ry always affects all corners of the element simultaneously and equally: there’s no way to put a curve on one corner of an SVG rectangle and not on the rest. You can give the attributes different values for more extreme appearances, to create barrel shapes for example:

…but in most cases both attributes will have the same value, producing perfect quarter-circle corners. To shortcut this, you can provide just the value of rx: 

<rect x="20" y="20" width="40" height="40" rx="5"  />

The Biggest Rectangle of Them All: Styling The Viewport

In most editors, the background of an SVG drawing appears to be white. That’s not actually true: it’s transparent, and naturally alpha-masked, meaning that it will look perfect when placed as an image or inline SVG against any on an HTML page.

The natural response to needing a “canvas” of a different color in SVG is to draw an enormous rectangle that covers the entire SVG viewport. But that’s usually a bad idea: not only does it add another element to the page, it also complicates rendering. Instead, simply style the SVG element itself. 

svg { background: #fcedd6; }

It’s even possible to place a border-radius on the SVG element, as I did with the Captain America shield example I created for the circle article. This can come in handy if you’re trying to give the impression of the entire SVG having a circular drop shadow, for instance.

The recreation of Piet Mondrian's work was partly inspired by Jenn Schiffer, who has written an excellent series on recreating artworks using web technologies.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/MwbYaL