SVG - SPLessons

Chapter 3

SVG Text

SVG Text

This chapter demonstrates about the SVG Text i.e presentation of the Text in a different formats and different styles in XML documents. Following are the concepts are covered in this chapter.

  • SVG Text element
  • Types of Text.

SVG Text element

SVG Text is used to represent the text in a several ways and multiple styles, users can also give the own requirements to represent the text. In order to define a text user need to use the <text> element.
Following are some of the attributes which are used to define the text.

Attribute Description
x Used to represent x axis coordinates of glyphs.
y Used to represent y axis coordinates of glyphs.
textlength Used to define the length of the text.
rotate Used to apply the rotation to all glyphs.
lengthAdjust Used to adjust the size of the text.
dx Used to represent the x axis along with x axis.
dy Used to represent the y axis along with y axis.

The code below demonstrates the basic representation of the text as shown below.

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>SVG Text Example</h1>
      
      <svg width="600" height="600">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.SPLessons.COM</text>
         </g> 
      </svg>
   
   </body>
</html>
</html>

Result
The above code run in a preferred browser the output get displayed as shown in below image.

Types of Text.

By using SVG user can insert the text in multiple ways in a documents by using the different attributes some types are briefly explained here as shown below.
Text Rotation
In SVG user can rotate the text by using the rotate key word, the process of rotation text is shown in below code.

<!DOCTYPE html>
<html>
	<body>
		<svg height="100" width="500">
			<text x="0" y="15" fill="blue" transform="rotate(30 20,40)">SPLessons Tutorials</text>
			Sorry, your browser does not support inline SVG.
		</svg>
		</svg>
	</body>
</html>

Result
Run the above code in a preferred browser the output get displayed as shown in below image.

Hyper link Text
In SVG, user can give the text as a hyper link, by using xlink:href. While inserting the link user need to give the x, y axis sizes of the text. The code below demonstrates inserting the text as a hyperlink into the documents as shown below.

<html>
   <title>SVG Text</title>
   <body>   
      <h1>SVG Text Example</h1>      
		<svg width="800" height="800">
			<g>
				<text x="20" y="10" >Text as Link: </text>         
				<a xlink:href="http://www.splessons.com/" target="_blank">
					<text font-family="Verdana" font-size="20"  x="30" y="30" 
					fill="rgb(121,0,121)">WWW.SPLESSONS.COM</text>
				</a>
			</g>
		</svg>     
	</body>
</html>

Result
Run the above code in a preferred browser the output get displayed as shown in below image.

Multi line Text
User can insert the text in any number of sub groups by using the <tspan> element, which contains the several formatting positions to insert the text. The code below demonstrates the different groups of text as shown below.

<html>
	<title>SVG Text</title>
	<body>   
		<h1>SVG Text Example</h1>      
		<svg width="570" height="100">
			<g>
				<text x="30" y="12" >Multiline Text: </text>
					<text x="30" y="30" fill="rgb(121,0,121)">WWW.splessons.COM
					<tspan x="30" y="50" font-weight="bold">Simple Programming Lessons.</tspan>
					<tspan x="30" y="70">We teach with simple techiniques.</tspan>
				</text>
			</g>
		</svg>      
	</body>
</html>

Result
Run the above code in a preferred browser the output get displayed as shown in below image.

Summary

  • Text supported by all modern browsers.
  • User can insert the text with Hyper links.
  • User can give height and width to the text.