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.
Attribute |
Explanation |
x |
A list of x-axis positions. The nth x-axis position is given to the nth character in the text. If there are additional characters after the positions run out they are placed after the last character. (0 default) |
y |
A list of y-axis positions. See 'x' description. (0 default) |
dx |
A list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) |
dy |
A list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) |
rotate |
A list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value. |
textLength |
A target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length) |
lengthAdjust |
Tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'. |
Presentation Attributes |
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.
The presentation attributes in SVG which effect text styling are listed under FontSpecification in the appendix.
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). <Jump to: Styling>
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 SVG 1.2 working draft indicates that it will have full support for wrapping text around objects as well as other layout tools... Merci W3C.
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" /> <text> <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> <!-- 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> </text> |
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.
Attribute |
Explanation |
... |
All attributes except the below are identical to the 'text' element. |
xlink:href |
Reference to a 'text' element. |
Next we'll take a break from introducing new graphical tags and discuss coloring objects.