Summary -

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

<svg> with <text> element used to draw text on webpages and can apply all graphics transformations to the text. Default position for text is x="0" and y="0".

Syntax -

<text x="x-value" y="y-value" dx="dx-value" dy="dy-value" 
		rotate="list-of-numbers" 
		textlength="length" lengthAdjust="Spacing"
		font-family="font-name" font-size="size-of-font">

Attribute Use
x Specifies text position on x-axis.
y Specifies text position on y-axis.
dx Specifies value that shifts along with x-axis.
dy Specifies value that shifts along with y-axis.
fill Specifies to fill the font color.
rotate Rotation applied to all glyphs.
textlength Rendering text length.
lengthAdjust Adjustment type with rendering length of text.
font-family Specifies the font family.
font-size Specifies the font size.

Example -

Below example describes how to create text with SVG.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Render Text with HTML5 SVG</title>
		<style>
			svg {border: 1px solid blue; }
		</style>
	</head>
	<body>
	
		<!-- Simple SVG text -->
		<svg width="350" height="100">
			<text x="30" y="40" fill="red" font-size="20px" 
				font-family="Cavolini Condensed">
				Welcome to TutorialsCampus..!
			</text>
			<text x="30" y="40" dx="0" dy="20" fill="orange" 
				font-size="15px">
				Here you can learn whatever required.
			</text>
		</svg> 
		
		<!-- Simple SVG rotate text -->
		<svg height="150" width="500">
			<text  x="30" y="15" fill="green" 
				transform="rotate(40 20,30)">HTML5 SVG Text</text>
		</svg>
		
		<!-- Simple SVG with several lines -->
		<svg height="100" width="500">
			<text x="30" y="22" fill="pink" font-size="25px" 
				font-family="Cavloni Condensed">Heading -
				<tspan x="35" y="50" font-size="15px">
					First line.</tspan>
				<tspan x="35" y="70" font-size="15px">
					Second line.</tspan>
			</text>
		</svg> 
	</body>
</html>

Output-

Welcome to TutorialsCampus..! Here you can learn whatever required. HTML5 SVG Text Heading - First line. Second line.