<text /> basics

Objective: Learn to draw, position and style text

SVG text is a very powerful element with a lot of exciting possibilities. This is going to take more than just one lesson so we start here with the text basics. Be warned. Text has a lot of basics!

Take your time to learn all of the ways text can be manipulated in SVG.

Text is very different to shapes and has a lot of attributes with highly variable support between browsers. We are only handling the attributes that work with all browsers here.

The text lessons have multiple SVG Editor windows for the different text attributes so you can practice manipulating the different properties separately. There are no exercises for this lesson.

10.1 Text definitions

Before we move on it is important to understand text vocabulary. There are three terms you need to be clear about to understand "text talk".

Fonts Fonts an ordered set of characters, each one of which is visualized by a glyph (picture) for that font. You can see this very clearly on this font tutorial page that shows the glyphs for  the Megalopolis font  and Linux Libertine font. Here you can clearly see the glyph (drawing) for each letter in each font is radically different.

Glyphs Glyphs are the image representation of letters or symbols in a font. A letter can be drawn with a lot of different glyphs. Think of a glyph as the outline of a character in a particular font.

Characters Characters are the technical numerical representation used to define a specific letter, script, ideograph or symbol in a font. Fortunately we now have Unicode and that standardizes Characters for every language around the world. For example A is represented by 41 in every font. A character is rendered to a glyph in any particular font.

10.2 The Text element

<text>Your text here</text>

<text x="200" y="200" text-anchor="middle">Your text here</text>

Text is one of the few SVG elements that contains actual content between the opening and closing elements.

Text has the following default attributes and values:

font-size="16px" fill="black" stroke-width="0" stroke="none"

One big thing to know about SVG text. It doesn't automatically line-wrap. You have to handle all presentation aspects of any text. Now let's get started.

10.3 Positioning attributes

Text has three primary layout positioning attributes

x="200" Set the x position of the text. This is then modified by the text-anchor attribute.

Y="200" Set the y position of the text. Note text is aligned to the baseline (bottom of the text) for latin languages.

text-anchor="middle"   Options are start, middle and end. This is a very important attribute and defines where the text rendering starts. Practice this one. You will need it.  It uses the terms "start" and "end" because it applies to Right-to-Left and Vertical text.

SVG Editor for positioning attributes

Practice you text layout here. Note the blue line shows the text-anchor relationship between the three options with  left-to-right text.

This text has no other attributes and shows the default text attributes are

font-size="16px" fill="black stroke-width="0" stroke="none"

10.4 General text styling attributes

The styling attributes are similar in name and function to CSS styles. Remember if you don't need a styling attribute don't use it. Keep your SVG as small as possible.

font-family="serif" Set the font-family to an available or declared font-family. This is identical to the CSS font-family rules.

font-size="16" Set the size of the font using default number (pixels) or units. Default is 16.

font-style="italic"  Options are normal or italic. Default is normal

font-weight="bold"  Options are normal or bold. Default is normal

text-decoration="underline" Options are none, underline, overline or line-through

stroke="red" The outline colour of the font. By default text has fill colour and no stroke. Adding a stroke will make it appear bold. This should only be used for larger text.  

stroke-width="1" The width of the font outline colour if it is to be applied.  Only use it if you really need a stroke effect. Otherwise DO NOT USE.

fill="yellow" The colour of the font fill. The default is black.   

SVG Editor general styling attributes

Look at the SVG for the properties applied and change them to see the effect. The default CSS font-family is sans-serif. 

10.5 Spacing and positioning glyphs

The individual gyphs in a text string can be positioned and rotated using multiple values.  The number of values must match the number of characters in the string. Eg: ABCD. 

x="20, 40, 60, 80" the x (horizontal position for each character)

y="20 40 60 80" the y (vertical position for each character)

rotate="30, 60, 90, 120" This is rotation of each glyph expressed in degrees. You can use negative values.

SVG Editor for glyph positioning

This feature is not used very much but can be very efficient and useful for applying units to graphs and similar effects. Check out the text and how the positioning can move the characters anywhere.

10.6 Special text language issues

direction="ltr" Allowed values are ltr | rtl | inherit. , This is primarily needed where there is mixed left-to-right and right-to-left text languages. RTL languages include Arabic, Hebrew and Urdu.

unicode-bidi="bidi-override"   Allowed values are  normal | embed | bidi-override | inherit. The default value is inherit.   NOTE: bidi means bi-directional. When it is applied the rendering engine understands whether text should be left to right or right to left by the language the character numbers are defined for.

These examples show English (ltr) and Urdu (rtl) with their standard directions and English with bidi-override applied.

SVG Editor for language text direction

10.7 Text length

Text length is particularly valuable when creating labels on illustrations and should be well understood.

textLength="100" Sets the length of the text if it must fit a specific space. The next property, lengthAdjust, defines how text length application can be modified.

lengthAdjust="spacing" Sets how length adjusted text is spaced out. Allowed values: default | spacing | spacingAndGlyphs.

SVG Editor for Spacing and Glyphs

The top three lines use just spacing. The bottom three lines use spacingAndGlyphs. This can be very useful for illustration labels. Experiment with the SVG to get a good understanding of the power and usefulness of these attributes.

Text is far more detailed than basic shapes and there is a lot more to come with <tspan> and <tpath>. Keep practicing because using <text> efficiently in education illustrations is very valuable.

Use <g> for Common Styling

A great technique to keep file size to a minimum is to apply font and text properties to the text in a group. All the test then inherits the properties from the parent <g> element.

<g font-family="sans-serif" font-size="20" text-anchor="middle">
    <text x="100" y="50">This is plain text One</text>
    <text x="100" y="150">This is plain text Two</text>
    <text x="100" y="250">This is plain text Threee</text>
    <g font-style="italic">
<text x="200" y="50">This is Italic text One</text>
<text x="200" y="50">This is Italic text Two</text>
<text x="200" y="50">This is Italic text Three</text>
<g font-weight="700">
<text x="300" y="50">This is Italic/Bold text One</text>
</g>
</g>
<g font-weight="bold">
<text x="300" y="200">This is Bold text One</text>
<text x="300" y="300">This is Bold text Two</text>
</g>
</g>

 Notice that style grouping can be nexted <g> elements.  This approach can save both time and file size. You only have to think about the coordinates and not all the other styling issues.