SVG Text Elements

Creating Text

Defining and positioning text can be done all at once. Unless otherwise specified (see below) the text will be positioned so that the lower left corner of the text element is at the given x and y position. The code below defines three text objects on an SVG canvas:

<svg width="300" height="100">
	<text x="0" y="8">This text is too high, and is cropped</text>
	<text x="30" y="50">This fits pretty nicely</text> 
	<text x="240" y="80">Too far right!</text>
</svg>

which results in this:

Text alignment

It is often more convenient to position text without having to figure out where the lower left corner should be. We can also say that we want text to start, end, or be centered at a particular x value. The following three text elements are all positioned at x=150, but appear to be staggered because of the change in the 'text-anchor' property. Note that 'start' is default; you do not need to include it. The dashed line is included to show where x=150 is on the canvas.

<svg width="300" height="100">
	<line x1="150" y1="0" x2="150" y2="100" style="stroke:gray" stroke-dasharray="2,2"/>
	<text x="150" y="20" text-anchor="start">Start at x="150"</text>
	<text x="150" y="50" text-anchor="middle">Centered at x="150"</text> 
	<text x="150" y="80" text-anchor="end">End at x="150"</text>
</svg>

which results in this:

We can also align text vertically using the 'alignment-baseline' property, which has more options than I'll display here.

<svg width="300" height="100">
	<line x1="0" y1="50" x2="300" y2="50" style="stroke:gray" stroke-dasharray="2,2"/>
	<text x="20" y="50" alignment-baseline="alphabetic">Alphabetic</text>
	<text x="120" y="50" alignment-baseline="middle">Middle</text>
	<text x="220" y="50" alignment-baseline="hanging">Hanging</text>
</svg>

which results in:

Text rotation

We can easily rotate text, which is useful for labelling graphs and charts. The simplest way (though you may need to make some adjustments) is to first set your alignment preferences. Then, use the 'transform' property to specify where you want the text anchored, and provide an angle to rotate. Note that the angle is measured clockwise (unlike in math classes) and should be given in degrees, not radians.

<svg width="300" height="300">
	<circle cx="150" cy="150" r="2" fill="black" />
		
		<text text-anchor"start" alignment-baseline="middle" transform="translate(150, 140) rotate(270)">Bottom up</text>
		<text text-anchor"start" alignment-baseline="middle" x="160" y="150">Right to Left</text>
		<text text-anchor"start" alignment-baseline="middle" transform="translate(150, 160) rotate(90)">Top down</text>	
		<text text-anchor"start" alignment-baseline="middle" transform="translate(140, 150) rotate(180)">Hard to Read!</text>
		<text text-anchor"start" alignment-baseline="middle" transform="translate(130, 130) rotate(215)">Slanty...</text>
		<text text-anchor"start" alignment-baseline="middle" transform="translate(170, 170) rotate(45)">Other way...</text>	
</svg>

which results in this:

Text style

If you're tired of small, roman, black text, no problem. We can set the font, color, size, and other attributes with SVG. Some of the more useful properties include:

font-family: Because some fonts are not available in all browsers, it's safer to provide a family of fonts you'd like to use, instead of a particular font. The browser will then choose the closest available match. Popular choices include "Arial, Helvetica, sans-serif", "Tahoma, Geneva, sans-serif", and "Times New Roman', serif"
font-size: The larger the value, the larger the text. You can use pt, px, em, and % as units; not providing units means the number refers to pt. So, font-size="20" means 20pt font.
font-style: Choose from "normal" (default), "italic", or "oblique"
font-weight: Choose from "normal" (default) or "bold"
font-variant: Choose from "normal" (default) or "small-caps"
fill: Choose any color for the text. Use common CSS names like 'red' or 'blue', HEX values like "#AF99A1", or rgb values like "rgb(100,200,150)"
Most other CSS properties, such as 'letter-spacing'

A few examples:

<svg width="300" height="300">
	<text x="20" y="50" font-family="Arial, Helvetica, sans-serif" font-size="30" >Big Sans Font</text>
	<text x="20" y="100" font-size="30" font-variant="small-caps" font-weight="bold">Bold Small Caps</text>
	<text x="20" y="150" font-size="30" font-style="oblique" font-weight="bold" fill="#FFC0C9" stroke="black" stroke-width="1">Outlined italics</text>
	<text x="20" y="200" font-size="10" font-style="italic" fill="#AF99A1">Tiny (maybe too tiny)</text>
	<text x="20" y="250" font-size="15" letter-spacing="30px" fill="rgb(0,100,120)">KERNING</text>
</svg>

which results in this: