Tutorial SVG 5: text

svg elementen

Check this example in your browser

Adding text to SVG is relatively easy compared to for example adding shapes. The main difference between the two is that text is positioned at the lower-left corner of the first text character: the font’s baseline. Text in SVG can be styled (using CSS rules), shaped (using paths), and transformed in many ways, as we will see in this tutorial. Let's start with the <text> element.

The <text> element

Example 1: a simple text fragment

The text fragment in Image 1 has the following syntax:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="250px">
<text x="20px" y="55px" font-family="VTCLettererProRegular" font-size="2em">Hello World! I salute you!</text>
</svg>

x="20px" y="55px" is the position of the baseline of the text.

A text fragment in SVG
Image 1. A text fragment in SVG

Check this example in your browser

Example 2: the <tspan> element

The <tspan> element in SVG is similar to the HTML <span> element in that it allows you to style and reposition parts of a sentence or paragraph. The attributes of the <tspan> element are the same as the <text> element and relate to the formatting ans positioning of text. Two important attributes are dx and dy, which can be used to reposition one or more characters along the x-axis and y-axis. In the example 2 below we see an anthology of commonly used text properties and their effects:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="1250px">
<text x="15" y="100" font-size="2em" fill="red" writing-mode="tb-rl" >Text with writing-mode set to "tb-rl".</text>
<text x="50" y="80" font-size="17" fill="red" font-family="courier">
    <tspan x="50" dy="30" font-family="courier">Hello courier World</tspan>
    <tspan x="50" dy="30" font-style="oblique">Hello Oblique World</tspan>
    <tspan x="50" dy="30" font-style="italic">Hello Italic World</tspan>
    <tspan x="50" dy="30" font-weight="bold">Hello bold World</tspan>
    <tspan x="50" dy="30" kerning="13">Text with kerning="3"</tspan>
    <tspan x="50" dy="30" kerning="0">Text with kerning="0"</tspan>
    <tspan x="50" dy="30" word-spacing="10">Text with word-spacing is 10</tspan>
    <tspan x="50" dy="60" fill="black" stroke="red" stroke-width="3px" font-size="3em" font-family="impact" kerning="2">Fill is black; stroke is red</tspan>
    <tspan x="50" dy="30" text-rendering="geometricPrecision">Text with text-rendering="geometricPrecision"</tspan>
    <tspan x="50" dy="30" text-decoration="overline">Text with text-decoration="overline"</tspan>
    <tspan x="50" dy="30" text-decoration="line-through">Text with text-decoration="line-through"</tspan>
    <tspan x="50" dy="30" text-decoration="underline">Text with text-decoration="underline"</tspan>
    <tspan x="50" dy="30" textLength="200">Text with textLength="200"</tspan> 
    <tspan x="50" dy="30" lengthAdjust="spacingAndGlyphs">Text with lengthAdjust="spacingAndGlyphs"</tspan>
</text>
</svg>

 

text atttributes and their effects
Image 2. The <tspan> and an anthology
of commonly used <tspan> text atttributes and their effects
.

Check this example in your browser

Example 3: the <tspan> element and rotation

Rotating letters using <tspan> elements. The letters of the first Hello World! text are rotated one by one. The letters of the second Hello World! text are rotated all at once.

<svg xmlns="http://www.w3.org/1000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="1250px">
    <text font-size="3em" x="50" y="50" kerning="0">
      <tspan rotate="10">H </tspan>
      <tspan rotate="-10" >e </tspan>
      <tspan rotate="10">l </tspan>
      <tspan rotate="-10">l </tspan>
      <tspan rotate="10">o </tspan>
      <tspan rotate="40">&nbsp;</tspan>
      <tspan rotate="-10">W </tspan>
      <tspan rotate="10">o </tspan>
      <tspan rotate="-10">r </tspan>
      <tspan rotate="10">l </tspan>
      <tspan rotate="-10">d </tspan>
      <tspan rotate="0">! </tspan>
    </text> 
    <text x="50" y="150" font-size="3em" kerning="-8	">
      <tspan dx="15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15" rotate="30 30 30 30 30 30 30 30 30 30 30 30 30">Hello World!</tspan>. 
    </text>
</svg>
The <tspan> element and rotation.
Image 3. The <tspan> element and rotation.

Check this example in your browser

Example 4: vertical text

Vertical text comes in handy when you want to label a vertical axis of a graph or write text in an Asian language. There are three ways in which we can write vertical text:

  1. by rotating it with 90 degrees;
  2. by using the writing-mode attribute and assign it the value "tb";
  3. if we want not only a vertical line, but also an upright position of the letters we can use the attribute-value pair glyph-orientation-vertical="0";

Keep in mind that text is positioned at the lower-left corner of the first text character: the font’s baseline. In example 4 we can see an example of every of the three methods:

<svg xmlns="http://www.w3.org/1000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px">
<defs>
    <style type="text/css">
    <![CDATA[
    text {
    fill:red;
    stroke:none;
    font-family:'VTCLettererProRegular',Arial, sans-serif;
    font-size:2em;
    }
    ]]>
    </style>
</defs>
<rect x="0" y="0" width="100%" height="100%"
style="fill:none; stroke:#666;"/>
    <text x="50px" y="50px" transform="rotate(90, 50, 50)">
    Rotated horizontal text
    </text>
    <text x="150px" y="50px" writing-mode="tb">
    Writing-mode is tb
    </text>
    <text x="225px" y="50px" writing-mode="tb"
    glyph-orientation-vertical="0">
    Using glyph-orientation-vertical = 0
    </text>
</svg>

The triangle consists of two lines. By default it is filled with black and has no stroke.

Vertical text
Image 4. Vertical text.

Check this example in your browser

Example 4a: bi-directional text

In SVG we can render text not only from left-to-right (for e.g. English) but also from right-to-left (for e.g. Arabic). In order to do that we must both use the direction="rtl" as the unicode-bidi="bidi-override" attribute-value pairs, as shown in example 4a.

<svg xmlns="http://www.w3.org/1000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px">
<defs>
    <style type="text/css">
    <![CDATA[
    text {
    fill:red;
    stroke:none;
    font-family:'VTCLettererProRegular',Arial, sans-serif;
    font-size:2em;
    }
    ]]>
    </style>
</defs>
<text x="50" y="30">
	Text from left to right.
    <tspan x="300" y="70" direction="rtl" unicode-bidi="bidi-override">
    Text from right to left.
    </tspan>
</text>
</svg>

The triangle consists of two lines. By default it is filled with black and has no stroke.

Bi-directonal text
Image 4a. Bi-directonal text.

Check this example in your browser

Example 5: text along a path

The path definition in this example is made with Adobe Illustrator. The path is defined inside a <defs> element, which serves to define the path, but without rendering it. You can use various flags, such as the startOffset attribute, which lets you specify the distance in pixels from where the text will actually begin.

<svg  width="1000px" height="1250px" viewBox = "0 50 300 200">
  <defs>
  <path id="curve" d="M85.723,44.735c13.19-9.593,35.973-15.988,57.156-15.988
  c45.964,0,66.747,28.378,66.747,58.755c0,27.179-15.187,46.764-34.373,69.546c-17.586,20.784-23.981,38.371-22.783,58.755
  l0.095,45.025" />
  </defs>
  <text font-family="arial" font-size="1.4em" fill="black">
  <textPath xlink:href="#curve">To be or not to be, that's the question    &nbsp;&nbsp;    ??    </textPath>
  </text>
</svg>
Text along a  bézier curve
Image 5. Text along a bézier curve .

Check this example in your browser

Example 6: the <tref> element

Another useful element is <tref>, which allows you to reuse letters and entire paragraphs of text. You can specify the referencing to the character data of another <text> element with a <tref> element like this:

<defs>
    <text id="ReusableText">
    More frequently occurring text
    </text>
</defs>
<text font-family="'VTCLettererProRegular',Arial, sans-serif;" font-size="2em" fill="black">
	<tref xlink:href="#ReusableText"/>
</text>

Check this example in your browser

Next tutorial

Leave a comment