How To Work With Text in SVG

It is possible to render text as part of an SVG document with using the <text> element. SVG's <text> element defines a graphics element consisting of text, which are rendered like other graphics elements. So all the features used in SVG like coordinate system transformations, gradients, patterns, painting, clipping path and masking can apply to <text> elements in similar to the shapes such as circle, ellipse and rectangles.

The attributes and properties on the <text> element indicates the writing direction, font specification and painting attributes which describe how exactly to render the characters. In this post I am going to describe the relevant text-specific attributes and properties and particular text layout.

Creating text with <text> element


The simplest form of the <text> element requires only two attributes, x and y, which define the point where the baseline of the first character of the element's content is placed.

The default style for text is to have a fill color of black and no outline. If you set the outline as well as the fill, the text looks thick. If you set only the outline, you can get a fairly pleasant set of outlined glyphs (A glyph is the visible representation of a character or characters where a single character can have many different glyphs to represent it).

The following example uses the placement, stroke and fill characteristics for <text> element.
<svg width="300" height="200" viewBox="0 0 200 100">
<rect width="200" height="100" stroke="blue" stroke-width="1"  fill="none"></rect>
<text x="30" y="20">Normal Text</text>
<text x="30" y="55" style="stroke: green;">Outlined filled Text</text>
<text x="30" y="90" style="stroke: green; stroke-width: 0.8;
fill: none;">Outlined only Text</text>
</svg>
Normal Text Outlined filled Text Outlined only Text

Uses of <tspan> element


Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by using a <tspan> element.

Within <tspan> element,  x  and y are single coordinates, whose value represents the new absolute X and Y coordinate for the current text position for rendering the glyphs that correspond to the first character and dx and dy are single lengths, whose value represents the new relative X and Y coordinate for the current text position. The rotate property is the supplemental rotation about the current text position.

The x, y, dx, dy and rotate are useful for minor positioning adjustments between characters or for major positioning adjustments, such as moving the current text position to a new location to achieve the visual effect of a new line of text.

Following example shows the uses of <tspan> element to indicate that the word "tspan" is to use a bold font and have red fill.
<svg width="300" height="200" viewBox="0 0 200 100">
<rect width="200" height="100" stroke="blue" stroke-width="1"  fill="none"></rect>
<g font-family="Verdana" font-size="15" >   
<text x="10" y="50" fill="blue" >     
It is a <tspan font-weight="bold" fill="red" >tspan</tspan>     
element.</text> </g> 
</svg> 
It is a tspan element.

Aligning text with text-anchor property


The <text-anchor> property is used to align a string of text relative to a given point. This property is applied to each individual text chunk within a given <text> element. The <text-anchor> property has the following values.

start

Here the rendered characters are aligned such that the start of the text string is at the initial current text position.

middle

With this value, the rendered characters are aligned such that the middle of the text string is at the current text position.

end

Here the rendered characters are aligned such that the end of the text string is at the initial current text position.

Following example shows the uses of text-anchor property with values start, middle and end.
<svg width="300" height="200" viewBox="0 0 200 100">
<rect width="200" height="100" stroke="blue" stroke-width="1"  fill="none"></rect>
<g style="font-size: 14pt; stroke: red;">
<path d="M 110 10 110 110" style="stroke: green; fill: none;"/>
<text x="110" y="30" style="text-anchor: start">Start of Text </text>
<text x="110" y="60" style="text-anchor: middle">Middle of Text</text>
<text x="110" y="90" style="text-anchor: end">End of Text</text>
</g>
</svg>
Start of Text Middle of Text End of Text

Selecting font with font selection properties


SVG uses the font specification properties to select specific font while creating text, which are described below.

font-family

This property indicates which font family is to be used to render the text, specified as a prioritized list of font family names or generic family names.

font-style

This property specifies whether the text is to be rendered using a normal, italic or oblique face.

font-variant

This property indicates whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters.

font-weight

This property refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

font-stretch

This property indicates the desired amount of condensing or expansion in the glyphs used to render the text.

font-size

This property refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multi-line layout environment.

font-size-adjust

This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font.

font

It is the Shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size' and 'font-family'.


Following example uses the different font selection properties, font-style, font-variant, font-weigh', font-size and font-family to select and style the font.
<svg width="300" height="200" viewBox="0 0 250 160">
<rect width="250" height="160" stroke="blue" stroke-width="1"  fill="none"></rect>
<g style="font-size: 16pt" stroke="brown">
<text x="40" y="20" style="font-weight:bold;">bold text</text>
<text x="40" y="55" style="font-style:italic;">italic text</text>
<text x="40" y="85" style="font-family:verdana;">verdana font</text>
<text x="40" y="110" style="font-variant:small-caps;">small-caps</text>
<text x="40" y="145" style="font-size: 20pt">Font Size 20pt</text>
</g>
</svg>
bold text italic text verdana font small-caps Font Size 20pt

Setting Length of text using textLength property


You can specify the length of text as the value of the textLength attribute. SVG will then fit the text into the given space. It does so by adjusting the space between glyphs and leaving the glyphs themselves untouched, or it can fit the words by adjusting both the spacing and glyph size.

Following example uses the "textLength" and "lengthAdjust" attributes to set the length and adjust it's space.
<svg width="350" height="250" viewBox="0 0 250 150">
<rect width="250" height="150" stroke="blue" stroke-width="1"  fill="none"></rect>
<g style="font-size: 14pt;stroke: blue;">
<text x="20" y="20"
textLength="220" lengthAdjust="spacing">TextLength</text>
<text x="20" y="50"
textLength="220" lengthAdjust="spacingAndGlyphs">TextLength</text>
<text x="20" y="80">TextLength</text>
<text x="20" y="110"
textLength="60" lengthAdjust="spacing">TextLength</text>
<text x="20" y="140"
textLength="60" lengthAdjust="spacingAndGlyphs">TextLength</text>
</g>
</svg>
TextLength TextLength TextLength TextLength TextLength

Writing text on a path using textPath element


In addition to text drawn in a straight line, SVG also allows you to place text along the shape of a <path> element. You can include the given text within a <textPath> element to specify that a block of text is to be rendered along the shape of a <path>, which includes an xlink:href attribute with a URI reference to a <path> element.

Here is a simple example to write text on a path using textPath element,
<svg width="350" height="250" viewBox="0 0 1000 300">
<rect width="1000" height="300" stroke="blue" stroke-width="2"  fill="none"></rect> 
<defs>   
<path id="Path" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> 
</defs>  
<use xlink:href="#Path" fill="none" stroke="red"  /> 
<text font-family="Verdana" font-size="42.5" fill="blue" >   
<textPath xlink:href="#Path">writing text on a path using textPath element</textPath> 
</text>
</svg>
writing text on a path using textPath element