Introduction
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.
Description
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
The code below demonstrates the basic representation of the text as shown below.
[html]
<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>
[/html]
Result
The above code run in a preferred browser the output get displayed as shown in below image.
<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. |
Description
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.
[html]
<!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>
[/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]
<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>
[/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]
<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>
[/html]
Result
Run the above code in a preferred browser the output get displayed as shown in below image.
Key Points
- Text supported by all modern browsers.
- User can insert the text with Hyper links.
- User can give height and width to the text.