When talking about text in SVG we have to differentiate two almost completely separate topics. The one is the inclusion and display of text in an image, and the other are SVG fonts. The later may be described in a later section of the tutorial, while we will focus completely on the first part: Bringing text into an SVG image.
We have seen in the introducing example, that the
text element can be used to put arbitrary text in SVG documents:
<text x="10" y="10">Hello World!</text>
y attributes determine, where in the viewport the text will appear. The attribute
text-anchor, which can have the values start, middle, end or inherit, allows to decide, in which direction the text flows from this point.
Like with the shape elements text can be colorized with the
fill attribute and given a stroke with the
stroke attribute. Both may also refer to gradients or patterns, which makes simple coloring text in SVG very powerful compared to CSS 2.1.