Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

SVG Basics – Text in SVG. The 'text' element

Text in SVG. The ‘text’ element

Text in SVG is rendered like all other graphical elements in SVG. All of the same transformation, clipping and masking features of SVG you can do with a rectangle or circle can be done with text. In addition, SVG provides a way to place the characters in the text to be placed in arbitrary positions and rotations. As you might imagine, placing characters on a curve or line rather than all over the place is the logical extension of this. This will be discussed latter in the path section.

The ‘text’ Element
<text x=”50%” y=”50%,” dx=”0,0,0,0,20″ dy=”0,0,0,0,8″ rotate=”20,30,40,50,0,0,-10″ textLength=”…” lengthAdjust=”…” font-size=”30″ text-anchor=”middle” >Hello World</text>
Code 1. The Text tag

Text Styling

Since the W3C is responsible for the HTML and the CSS standard it is not surprising that they decided to borrow from CSS for SVG. In fact, text styling using CSS is nearly identical in SVG and HTML. The same external style sheet can be used to style text for a SVG page and an HTML page.

Tricky Part: CSS support is optional for SVG viewers. Only styling using presentation attributes is required to be supported. But, that’s no problem! SVG includes a presentation attribute with the same name for every CSS style rule. Put simply, SVG borrows most of the text style rule’s names from CSS and duplicates their function.

To style text using presentation attributes, just use XML’s attribute format (attribute=”value”) where the attribute is the name of the CSS style rule. ‘<text style=”font-size:30;”>…</text>’ and ‘<text font-size=”30″>…</text>’ have the same effect (provided the SVG viewer supports CSS).

Word Wrap

SVG 1.1 has no internal support for word wrap. In order to achieve this effect in native SVG it is necessary to break the lines apart manually. You could use a separate text tag for each line but using a single text tag and a tspan tag for each line is better because users can then select the text across lines. The third (and not recommended) solution works be embedding an XHTML document inside the SVG using a foreignObject tag. Rendering XHTML is not a requirement for SVG viewers so it may not work.

The ‘tspan’ element

The tspan tag is identical to the text tag but can be nested inside text tags and inside itself. Coupled with the ‘dy’ attribute this allows the illusion of word wrap in SVG 1.1. Note that ‘dy’ is relative to the last glyph (character) drawn.

<><!– “SVG” rect –>
<rect x=”120″ y=”10″ width=”70″ height=”60″ fill=”red” />
<tspan x=”120″ y=”45″ font-size=”40″ fill=”yellow”>S</tspan>
<tspan x=”142″ y=”55″ font-size=”40″ stroke=”blue”>V</tspan>
<tspan x=”160″ y=”65″ font-size=”40″ fill=”green”>G</tspan>

<!– Text Example –>
<text x=”10″ y=”0″ fill=”blue” font-size=”12″ >
<tspan x=”10″ dy=”20″>Hello World</tspan>
<tspan x=”10″ dy=”20″>Today we are going</tspan>
<tspan x=”10″ dy=”15″>to pretend that we</tspan>
<tspan x=”10″ dy=”15″>are word wrapping</tspan>
<tspan x=”10″ dy=”15″>around this rectangle. Isn’t SVG’s</tspan>
<tspan x=”10″ dy=”15″>lack of word wrap completely</tspan>
<tspan x=”10″ dy=”15″>annoying?</tspan>

Example 2. Illusionary word wrap… It’s better than nothing. (Download)
The ‘tref’ Element

This element references any text element in the SVG document and reuse it. Only the character data is used and all presentation attributes and child tags (like ‘tspan’) of the referenced text are ignored.

Next we’ll take a break from introducing new graphical tags and discuss coloring objects.