Summary -

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

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

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

Example -

Below example describes about how to draw a circle with text in SVG.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SVG Circle with Text</title>
		<style>
			svg {border: 1px solid blue;}
		</style>
	</head>
  	<body>
    	<svg height="260" width="260">
      		<circle cx="130" cy="120" r="40%" fill="red" />
      		<text x="80" y="130" fill="white">HTML5 SVG</text>
    	</svg>
  </body>
</html>

Output -

HTML5 SVG