Summary -

In this topic, we described about the SVG Drawing Rectangle with detailed example.

<svg> with <rect> element used to create simple rectangle and square shapes. The <rect> element can have following attributes-

Syntax -

<svg>
     <rect x="x-top-left" y="y-top-left" width="w-val" height="h-val"
			fill="color-name" stroke="stroke-color-name" 
			stroke-width="stroke-width-in-pixels"/>
</svg>

Attribute Value
x Specifies the distance from x-axis.
y Specifies the distance from y-axis.
width Specifies the width of rectangle.
height Specifies the height of rectangle.
fill Specifies the fill environment of rectangle.
stroke Specifies the outline color. 
stroke-width Specifies the width of stroke. 

Example -

Below example describes how to create rectangular shape with SVG.
<!DOCTYPE html>
<html>
	<body>
		<!-- Simple SVG rectangle -->
		<svg width="200" height="150">
			<rect  x="50" y="20" width="150" height="100" 
			style="fill:red; stroke-width:3;stroke:blue" />
		</svg>
		
		<!-- Simple SVG rectangle example that contains some
                                             new attributes -->
		<svg width="200" height="150">
			<rect x="50" y="20" width="150" height="100"
				style="fill:red; stroke:blue; stroke-width:3; 
				fill-opacity:0.2; stroke-opacity:0.8" />
		</svg>
		
		<!-- Simple SVG rectangle example that contains some 
                                     new attributes -->
		<svg width="200" height="150">
			<rect x="50" y="20" width="150" height="100" 
			style="fill:red; stroke:blue; stroke-width:3; opacity:0.6"/>
		</svg>
	</body>
</html>

Output -