Basic Drawing > Text > Text Font, Alignment and Direction

Print this Page             Close Window

Text Font, Alignment & Direction

SVG allows a surprising amount of control over how text appears much like any good text layout program.

The SVG attributes or the style attribute can be used to specify many presentational text characteristics, such as font-family, font-style, and so on. It is also easy to manipulate the text layout in the direction, alignment and orientation by using proper attributes.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Simplest SVG text -->
<text x="10" y="20">Simple SVG text</text>

<!-- SVG with font specification -->
<text x="10" y="70" style="fill:red; font-family:arial; font-size:18; font-weight:bold; font-style:italic; font-stretch:wider">SVG is Cool !</text>

<!-- Text alignment - Left justified -->
<text x="0" y="140" fill="green" text-anchor="start">Left</text>

<!-- Text alignment - Center justified -->
<text x="50" y="160" fill="green" text-anchor="middle">Center</text>

<!-- Text alignment - Right justified -->
<text x="100" y="180" fill="green" text-anchor="end">Right</text>

<!-- Text direction- Top Bottom -->
<text x="20" y="240" style="fill:blue; font-family:Verdana; font-size:16;writing-mode:tb">Top to bottom</text>

<!-- Text direction- Right to Left -->
<text x="100" y="280" style="fill:blue; font-size:10;font-weight:bold; writing-mode:rl">Right-to-left</text>

<!-- Shifting Character -Subscript -->
<text x="15" y="395" fill="purple">Water is H</text>
<text dx="70" dy="404" fill="purple">2</text>
<text dx="80" dy="395" fill="purple">0</text>

</svg>

Code explanation

Notes: In SVG, text is positioned (unlike the <rect> element) with its lower left corner at the coordinates specified in the x and y attributes.

Text rendering: The first text is the simplest example. The x and y attributes control the position of the text-anchor, which is the reference point about which text is laid out. Text is rendered by default with a black fill and no outline.

Font Specification (Font properties): In the second example, the style attribute contains CSS (Cascading Style Sheets) properties that define the style of the text and the way it is positioned. For example, the font-size, font-family, font-style, and font-weight properties define the characteristics of the font used to display the text.

Text Alignment (Text Alignment properties): The text-anchor attribute is used to defines how the text is positioned about its anchor point. The <text> element uses "start" as its text-anchor to make the text left-justified, and use "end" for right justification.

Text Direction (Text Direction properties): The writing-mode attribute controls the primary advance direction of the text. The value of "tb" which is used in the above example, means top-bottom. The value "rl" means right-to-left.

Shifting Character: The dx and dy attributes are useful for shifting characters slightly, as with superscript or subscript characters. The dx attribute places a character horizontally. The dy attribute places a character vertically. By adjusting the value of the dx and dy attributes, we can render the subscript 2 in H2O properly.