SVG Text Element And Attributes

SVG text element starts with a text tag and ends with a matching ending text tag. Anything written between the starting and ending text tags is considered as text i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text>
This is text!
</text>
</svg>

If you try to run the above svg code, the output will be a blank svg document with no text display. To display the text written in svg, we need to specify the x and y co-ordinates of text i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20">
This is text!
</text>
</svg>

Running the above code display nice black text with default font-size and default font-family. To change the default display of text let us play with the text attributes a bit. The first thing we want to change about the default display is the colour of the text. To change the colour we need to change the fill attribute of text. i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="red">
This is text!
</text>
</svg>

The next thing we want to change is the font family of the text i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="red" font-family="Verdana">
This is text!
</text>
</svg>

We can change the font size of the above text by changing the font-size attribute i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="red" font-family="Verdana" font-size="21">
This is text!
</text>
</svg>

The default font size of text is 16px. We can also apply stroke to text. Stroke is basically the outline border around the text. We can specify the stroke colour and stroke width of text like this:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="red" font-family="Verdana" font-size="18" 
stroke="orange" stroke-width="1">
This is text!
</text>
</svg>

If we keep the fill attribute in the above code equal to none, we will get a nice hollow looking text i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="none" font-family="Verdana" font-size="18" 
stroke="orange" stroke-width="1">
This is text!
</text>
</svg>

We can also make the text bolder by applying font-weight = "bold" attribute to the text i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="none" font-family="Verdana" font-size="18" 
stroke="orange" stroke-width="1" font-weight="bold">
This is text!
</text>
</svg>

Another text attribute worth mentioning here is text-decoration attribute. We can underline the svg text using text-decoration attribute like this:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="none" font-family="Verdana" font-size="18" 
stroke="orange" stroke-width="1" font-weight="bold" 
text-decoration="underline">
This is text!
</text>
</svg>

Word spacing attribute can be used to change the white spaces between the words of a text string i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" fill="black" font-family="Verdana" 
font-size="14" word-spacing="10">
This is word spacing!
</text>
</svg>

Applying Gradient To SVG Text

We can apply gradient colour to svg text by defining a gradient inside def tags and then applying it to the text. An example of radial gradient applied to svg text is given below:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <radialGradient id="gradient">
      <stop offset="0%" style="stop-color:green;
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>
</defs>
<text x="20" y="20" fill="url(#gradient)" font-family="Verdana" 
font-size="18" stroke-width="1" font-weight="bold">
This is text!
</text>
</svg>

In the above code we have defined a radial gradient inside def tags with id=gradient and then applied gradient to the text by accessing the gradient inside fill attribute of the text i.e fill="url(#gradient)"

An example of linear gradient applied to svg text is given below:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <linearGradient id="gradient2">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>
<text x="20" y="20" fill="url(#gradient2)" font-family="Verdana" 
font-size="18" stroke-width="1" font-weight="bold">
This is text!
</text>
</svg>

SVG Text On Path

To write some text on an svg path, the first thing we need to do is draw a path inside def tags and then use the path to draw text on. An example code is given below:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <path id="path1" d="M 10 10 L 60 60 L 180 60 L 230 10 Z" />
</defs>
<use xlink:href="#path1" fill="none" stroke="red"  />
<text x="20" y="20" font-family="Verdana" font-size="10" stroke-width="1">
<textPath xlink:href="#path1">
This is long text to show the path correctly!
</textPath>
</text>
</svg>

In the above code we have drawn a path with id="path1" and then linked our text to the path element using <textPath xlink:href="#path1">. If you want to remove the path stroke, just set the stroke defined in <use xlink:href="#path1" fill="none" stroke="red" /> equal to none.

Use of <tspan> in svg text

Tspan is very helpful in handling each word of a text string individually. For example, if we want to change the color of a specific word of an svg string, we can use tspan in this case i.e

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" font-family="Verdana" font-size="14" stroke-width="1">
This is <tspan fill="red">long</tspan> text but not very long. 
</text>
</svg>

Similarly we can break some text to a new line using tspan by specifying the dy value of the tspan. Example code is given below:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" font-family="Verdana" font-size="14" stroke-width="1">
<tspan>This is long text but not very long.</tspan>
<tspan x="20" dy="20">It is just fine length!</tspan>
</text>
</svg>

Stay tuned for more lessons...

Related Posts
Basics of SVG Graphics
Draw a glowing lamp using SVG
SVG Filter Effects
Drawing Paths in SVG
Drawing a cup using SVG Path Element