Basic Drawing > Text > About Text

Print this Page             Close Window

About Text

SVG allows text to be inserted into the drawing. Text is held as character data.

SVG treats a text element like a graphical object. You position text with x and y coordinates and use fill and stroke options to color text. You can control over how text appears (such as fonts, letter spacing, alignment).

However, text in SVG isn't positioned exactly the same way as a basic shape would be. Text is positioned from the bottom left on an canvas, whereas shapes are positioned from the top left.

All text is contained with the <text> element. This allows the SVG processor to know unambiguously how to render the text.

Text can be further nested by using the <tspan> element for rich text formatting.

Text in SVG remains character data even after it is rendered, so it is searchable and can be edited, even if it is a graphical element.

SVG allows you to internationalize your text message. SVG has full support for Unicode character encoding and multiple languages (such as Spanish and Japanese etc.)

The <text> element has the following attributes:

Attributes

Description

x

x coordinate for lower left corner of text string

y

y coordinate for lower left corner of text string

dx

Shifts along the x axis for characters in the <text> element that includes this attribute

dy

Shifts along the y axis for characters in the <text> element that includes this attribute. (Note: can be used for super- or subscript characters)

rotate

Rotation about the current text position. Can be used instead of the transform=rotate() attribute to rotate text

textLength

Author's computation of the length of the text string. Used to calculate adjustments when exact positioning is necessary

lengthAdjust

This attribute has two options—"spacing" and "spacingAndGlyphs" The former (spacing) will adjust the spacing between glyphs but will not stretch or squeeze the glyphs themselves. spacingAndGlyphs (as the name states) will adjust both spacing between glyphs and glyph size.

Presentation Attributes

Colour, FillStroke, Graphics, FontSpecification, TextContentElements, TextElements