In addition to shapes, SVG can render text. They are rendered like any other graphical element so they are subject to the same features — painting, coordinate system transformation, clipping, etc. — as any other shape.

<text>

A single string of text is rendered by the <text> element but be aware that there is no automatic line breaking or word wrapping. The <text> element has countless attributes, some of which are listed below.

Attribute	Purpose	Value	Default
baseline-shift	Control subscripts and superscripts	baseline | sub | super	baseline
dx,dy	Shift the current text position in the x- and y-directions.	A decimal number.	0
fill	Control the fill colour of the glyph.	none or hash sign # followed by six-digit hexadecimal number representing the RGB colour.	black
fill-opacity	Control the opacity of the fill of the glyph	A decimal number between 0 and 1, with values toward 0 more transparent and values toward 1 more opaque.	1
font-family	Control the font family.	Name of a font family, either generic (e.g. sans-serif) or specific (e.g. Arial).
font-size	Control the font size	An absolute size (e.g. 16 or 16px) or a relative size (e.g. medium).	medium
font-style	Control the style of the font	normal | italic | oblique	normal
font-variant	Control the use of small capitals	normal | small-caps	normal
font-weight	Control the weight of the font	lighter | normal | bold | bolder	normal
id	Provide a unique identifier for a line of text	Unique identification or name
kerning	Control the spacing between glyphs	auto or a number, a number plus unit of measurement, or percentage	auto
lengthAdjust	Control stretching or compression of the text to fit the space.	spacing | spacingAndGlyphs	spacing
rotate	Control the orientation of each individual glyph.	List of numbers
stroke	Control the outline colour of the glyph	none or hash sign # followed by six-digit hexadecimal number representing the RGB colour.	black
stroke-opacity	Control the outline opacity of the glyph	A decimal number between 0 and 1, with values toward 0 more transparent and values toward 1 more opaque.	1
stroke-width	Control the outline width of the glyph	A number or a number plus unit of measurement (such as px or em).	1
text-anchor	Control horizontal alignment.	start | middle | end	start
text-decoration	Control various lines above, through or below the text	none | overline | line-through | underline	none
transform	Control various transformations	Some combination of rotate, scale, skew and translate.
word-spacing	Control the spacing between words	normal or a number, a number plus unit of measurement, or percentage	normal
x,y	Control the starting position of the text

Examples

Here is some cyan-coloured text without an outline.

This text consists of an outline only.

Now combine colour and an outline.

There are a number of ways to decorate the text besides colour and outline. Here we see a serif typeface that is italicised and underlined.

It is easy to achieve a shadow effect. Using two <text> elements, the first (purple) is shifted slightly downward and to the right whilst the second (magenta) is in the correct position. The shadow text must be declared first since it will be overwritten by the actual text.

Use the text-anchor attribute to left-justify, centre, or right-justify the text.

<tspan>

The <tspan> tags encloses text within the <text> element. It is used to modify the <text> attributes for a subset of the text.

Examples

Use the baseline-shift attribute to produce subscripts and superscripts.

The dx and dy attributes can take a series of numbers to produce some interesting effects. Each number is applied to individual glyphs.

The font-weight attribute can be used to make things bold.

Since SVG does not provide automatic line breaks or word-wrap, you must break up lines of text manually.

<textPath>

It is also possible to write text along a pre-defined path using the <textPath> element. <textPath> takes the following attributes:

Attribute	Purpose	Value	Default
href	The URL of the path or shape on which to render the text. If the path attribute is set, this has no effect.	name
lengthAdjust	Control stretching or compression of the text to fit the space.	spacing | spacingAndGlyphs	spacing
method	Control the rendering of each glyph along the path.	align | stretch	align
path	Description of the path along which the text is to be rendered.	path descriptors
side	Control which side of the path the text is to be rendered.	left | right	left
spacing	Control the spacing between glyphs	auto | exact	exact
startOffset	Control how far from the beginning of the path the text should start.	number or percentage	0
textLength	Control the width of the space into which the text will render.	number of percentage	auto

Examples

The actual path is not visible but has been included (light grey) so you can see how the text follows it.

Let’s look at the same example but with the startOffset attribute set to 20%.