SVG Text Reference

The SVG specification includes the ability to render text as part of the image. Unlike regular bitmap images, text inside a vector graphics image can be selected by the user and will be processed by search engines. SVG provides more flexibility than regular text on a web page, by allowing it to be transformed or to follow a path.

Text

Sample text in default font
text

The text tag renders text beginning at some point. Vertically, text is anchored on the y co-ordinate as its baseline. In the provided example, the baseline is represented by a blue line.

  • x - Horizontal starting position of the text.
  • y - Vertical baseline of the text.
  • dx - Distance to shift the text horizontally. If multiple numbers are provided, the distances will be applied to each consecutive character. Additional characters adopt the distance specified by the last number.
  • dy - Distance to shift the text vertically.

Text Spans

Characters on a step Apply bold to tspan Shift me way over
tspan with shifted text

The tspan tag is similar to the standard span tag, but can only be placed inside an SVG text tag. It can be used to change font style properties for its contained text, or push text some distance away.

  • dx - Distance to shift the text horizontally. If multiple numbers are provided, the distances will be applied to each consecutive character. Additional characters adopt the distance specified by the last number.
  • dy - Distance to shift the text vertically.

Text on a Path

Squishy Text! Elliptical Text! Expanded Text!
textPath

The textPath tag allows text to be rendered with its baseline along an arbitrarily complex path. Individual characters will be rotated accordingly. In the provided example, the path used as the baseline is represented by a blue line.

The path to reference is typically defined as a re-useable shape inside a defs tag. More information will be provided later in this guide related to grouping and re-using shapes.

The x and y co-ordinates of the parent text tag are ignored, instead using the position specified by the path.

If a dx and/or dx attribute are specified on the parent text tag, they will be used to shift the text. When doing so, the baseline is used as a distorted x-axis.

The "Squishy Text!" in the example uses a dy value of -20, causing the text to be raised up 20 pixels, but also squished due to distortion. The "Expanded Text" uses a dy value of 20, causing the text to be lowered by 20 pixels, but also expanded due to distortion.

  • startOffset - Specifies the distance along the path that the text will begin rendering.
  • xlink:href - Reference to the path to use as the baseline.

The difficult thing about drawing text on a path is estimating the length of the path for the desired text. The SVG specification provides a textLength attribute on the text tag for this purpose. Unfortunately, this attribute is not supported by Internet Explorer. Currently, to reliably draw text along a path in all browsers, you will need to specify the font size or kerning, and test the results yourself.

Text CSS Properties

Text drawn using SVG behaves differently than regular text in an HTML page. All the CSS properties related to the pen stroke and fill are also applied to text. All the CSS properties related to fonts also apply to SVG text.

There are a number of additional CSS properties in the SVG specification dealing with text. However, browser support appears to be very poor for all of these with the exception of text-anchor.

  • text-anchor - Specifies the horizontal alignment. The default is start, meaning the text begins at the horizontal x position. A value of middle means the text will be centered at the x position. A value of end means the text ends at the x position.
Sample SVG Text with Stroke and Fill

The next article will explain how to group shapes together, and provide insight into how this is helpful when applying CSS and dealing with user interaction.

SVG Tutorial and Reference

Introduction to SVG

SVG Co-ordinate System

Shape Reference

Path Reference

Text Reference

External SVG Resources

W3C SVG Specification Homepage

Mozilla Developer Network SVG Homepage

SVG Tutorial on jenkov.com