Summary -

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

<svg> with <rect> and <text> elements inside it used to write text inside the rectangle of SVG. To do that, we need to join the<rect> and <text> elements.

Refer the topics Draw Rectangle and Draw Text to get the clear understanding of SVG <rect> and <text> elements.

Example -

Below example describes how to draw a rectangle with text.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SVG Rectangle with Text</title>
		<style>
			svg {border: 1px solid blue;}
		</style>
	</head>	
	<body>
		<svg height="180" width="400">
			<rect x="80" y="40" width="200" 
				height="100"fill="yellow" />
			<text x="140" y="100" fill="brown"
				font-weight="bold">HTML5 SVG</text>
		</svg>
	</body>
</html>

Output -

HTML5 SVG