SVG Rectangles in HTML

Here's a quick tutorial that will teach you how to create a rectangle with HTML's svg and rect tags.

<svg xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 1000 200">

	<rect width="400"
		height="150"
		x="300" y="25"
		rx="5" ry="5"
		stroke="#e89a3e"
		stroke-width="4"
		fill="#cf8630"
		opacity="1.0" />
</svg>

The Attributes

Here are the attributes used to define our rectangle:

• width: The width of the rectangle relative to the size of the viewbox.
• height: The height of the rectangle relative to the size of the viewbox.
• x & y: The x and y coordinates of the top-left corner of the rectangle.
• rx & ry: The corner radius sizes on the x- and y-axis.
• stroke: The color of the border line. This value can be defined either by specifying a hexadecimal color code as we did above or by using a valid color name.
• stroke-width: The width of the border line output to the screen, relative to the size of the viewbox.
• fill: The fill color can also be defined as a hexadecimal color code or color name and will fill the rectangle with the color specified. Specifying a value of none will keep the rectangle fill color transparent.
• opacity: Determines if the rectangle will have any transparency. Valid decimal values can be between 0.0 (invisible) and 1.0 (fully visible). A value of 0.5 would give the rectangle 50% transparency.

Other SVG Paths & Shapes

Lines
Polylines
Polygons
Circles
Ellipses