Chapter 4. Using Text in SVG

CONTENTS

In this chapter:

•  Text Basics
•  Text in SVG
•  The <text> Element
•  The <tspan> Element
•  The <tref> Element
•  Displaying Text on a Path

Text Basics

SVG, clearly, has to be able to display and lay out text. Many Web graphics for example, company logos make significant use of text. Similarly, various types of artistic text can add design benefits to a range of graphics contained in Web pages. SVG text can have many SVG effects applied to it, such as gradients, animations, and patterns. All SVG graphics designers should understand how to manipulate text in SVG.

In addition to the use of individual characters or short sequences of characters in logos, for example, SVG offers the potential to lay out significant amounts of text, even to the extent of creating complete SVG Web pages (see Chapter 12, "Creating a Simple SVG Web Site"). In that setting, understanding the functionality for controlling the display and layout of text that SVG provides is particularly important. The ability of SVG to lay out significant amounts of text is not surprising because SVG draws heavily on the Adobe Precision Graphics Markup Language, which draws significantly on PostScript the page-layout language par excellence.

SVG holds text as character data within <text> elements in an XML-compliant source file. The rendering of that character data onscreen is, at the point of display, a bitmap (as is the case for HTML text and all other text). The human eye reads back into that bitmap the characters and words and reads the meaning into those. It is quite a complex process.

The SVG source code for the rendered text always remains as character data and is therefore accessible to suitable XML-capable search engines, for example. Also, if the SVG image or document is being created dynamically, the characters to be displayed can similarly be dynamically updated. For example, you may want to update the current stock price of your company, hold it in a database that is updated on an ongoing basis, and then access that data at the time the SVG graphic (or Web page) is being constructed.

First, let's examine in more detail how text behaves and is controlled in SVG.

Text in SVG

Text to be displayed in SVG is held as character data. All text is contained within <text> elements, but can be further nested within <tspan> elements.

When text is displayed, the font defined in the style attribute of the <text> or <tspan> element or in an external CSS style sheet is associated with font tables that define how individual characters are to be displayed in that font. The font tables associate a character with its visual representation a glyph.

Listing 4.1 illustrates the difference between a glyph and a character. Each of the five glyphs shown in Figure 04.01 represents the uppercase version of a character in this case, the first letter in the English alphabet, the letter A. Yet each glyph has a different appearance. In each of the font tables for a font family specified in a style attribute on a <tspan> element is a glyph for an uppercase A, and it is displayed onscreen. Depending on which fonts you have installed, the appearance on your own machine may differ from that shown in Figure 04.01.

Figure 04.01. Five different glyphs from five distinct font families, each of which represents the uppercase character A (zoomed to enlarge the glyphs to aid comparison).

Listing 4.1 (Glyphs01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg>  <text>  <tspan x="20" y="20" style="font-family:Arial;  font-size:18; fill:red; stroke:red;">A </tspan>  <tspan x="40" y="20" style="font-family:'Times New  Roman'; font-size:18; fill:red; stroke:red;">A </tspan>  <tspan x="60" y="20" style="font-family:'Courier New';  font-size:18; fill:red; stroke:red;">A </tspan>  <tspan x="80" y="20" style="font-family:'Brush Script';  font-size:18; fill:red; stroke:red;">A </tspan>  <tspan x="100" y="20" style="font-family:fantasy;  font-size:18; fill:red; stroke:red;">A </tspan>  </text>  </svg> 

The visual appearance of the glyph depends on the font you have chosen. If you choose a serif font, like Times New Roman, you expect all relevant characters to be displayed with serifs. If you choose a sans serif font, like Arial, you expect no visible serifs on any glyphs in that font. Similarly, if you choose a fancy font, the visual appearance may be markedly different although the characters being represented remain the same.

The position at which text is rendered onscreen depends on the value of the x and y attributes of the <text> element. If you want to place text further to the right and then increase the value of the x attribute. If you want it further down the page, increase the value of the y attribute. However, placement of text is not quite the same as the onscreen placement of a rectangle, for example, as the following example shows:

Listing 4.2 (TextRectCoords.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="300" height="200">  <rect x="50" y="50" width="200" height="50"  style="fill:none; stroke:red;"/>  <text x="50" y="50" style="font-family:Arial,  sans-serif; font-size:14;">  This text is also placed at (50,50)  </text>  <text x="50" y="65" style="font-family:Arial,  sans-serif; font-size:14;">  This text is placed at (50,65)  </text>  </svg> 

The x and y attributes of text refer to the lower-left corner of the invisible box that contains the text, whereas the x and y attributes of a rectangle refer to the position of its upper-left corner. As you can see in Figure 04.02, the x and y attributes of the <text> element must be adjusted in order to place text "within" a rectangle you can't simply assume that if the rectangle is at (50,50) you can use the same coordinates for text you want to display within the rectangle.

Figure 04.02. The placement of x and y attributes of <text> and <rect> elements differs.

SVG gives you the ability to lay out text not only in space onscreen but also in time. You can therefore create a different, more dynamic exposure of text, whether it is part of some preset SVG animation or you create some interactive SVG applications (see the text animations in Chapter 8, "Animation: SVG and SMIL Animation").

Internationalization

SVG is an application language of XML and therefore uses the Unicode standard, which effectively provides a potentially universal character set. Thus, for most practical purposes, the character set of any language can be expressed in SVG.

The direction in which text is displayed varies from one language to another. Text can be displayed from left to right, as in English; from right to left, as in Arabic; or vertically, as in a number of Asian languages. SVG supports each of these languages.

In addition, SVG provides features that support the selective display of text in a multilingual Web environment, using the systemLanguage attribute (discussed in more detail in Chapter 17, "The Future of SVG").

Comparing text in SVG to bitmap graphics

If you create text in a bitmap graphics package, the text is likely, depending on the package and version, to remain editable while it is within the editing package. However, after you export the graphic as a GIF or JPEG image, the text (and indeed, all the graphic) is no longer editable what you perceive as text is now simply a bitmap pattern of pixels with no intrin-sic meaning. Of course, when the human eye sees the bitmap pattern, it can make that complex interpretive leap that attaches meaning to the bitmap pattern. To a computer, however a search engine, for example all connection between that bitmap pattern and the character data it represents has been lost.

In SVG, however, the text remains searchable or editable at all times. The source code for an SVG image is all text, including the string that is to be rendered as text in the SVG image.

Suppose that you want to locate important slogans about Web graphics formats and your bitmap graphic includes the slogan "Join us in a rut with bitmap graphics." Then, perhaps to your relief, a search engine wouldn't be able to find it. On the other hand, if you include in your SVG logo the slogan "Graphics come alive with SVG," an XML-capable search engine could search for it and find all occurrences.

Comparing SVG text to HTML/XHTML

Two important differences between HTML text and SVG text are discussed here.

First, HTML has a major advantage in that paragraph text can simply be inserted within an HTML <p> element with no thought or planning about line length or word wrap, for example. The HTML browser takes care of all that. If the browser window is resized, the word wrapping is adjusted to create appropriate new line lengths.

In contrast, SVG perhaps because of its roots in the page description language PostScript, which is designed for static media does not, at least in version 1.0, allow automatic word wrapping. A fixed line length must be decided upon, which means making some explicit decisions about the likely screen resolution to be used by visitors to your site.

The SVG <foreignObject> element may allow HTML, perhaps with automatic word wrapping, to be embedded within SVG images or Web pages.

Second, SVG has no elements equivalent to elements such as the <b> and <i> elements in HTML. All styling of text in SVG takes place in style attributes or individual attributes equivalent to CSS2 properties or in internal style sheets in a <style> element or in an external CSS style sheet.

Consider in detail the three text-related elements in SVG: the <text>, <tspan>, and <tref> elements. All text in SVG is contained, directly or indirectly, within <text> elements, so look first at that topic.

The <text> Element

Looked at as SVG, text is simply another part of the source code to be rendered by an SVG viewer. Therefore, all the manipulations that are possible with other graphics can also be carried out with text. You can transform text or alter its opacity or animate it. In one sense, text in SVG is just another type of graphic to be displayed.

A <text> element contains information about the screen position of the text in x and y attributes, and the styling information may be contained in a style attribute or in individual attributes corresponding to CSS2 style properties.

Styling SVG text

To apply style to SVG text, you can use either of two syntaxes. Either use a style attribute and then add the desired range of CSS properties as a list of values separated by semicolons within the style attribute, or specify each CSS property as a separate SVG attribute.

My preference is to use the style attribute and except for this section that is the only syntax you see in this book. Why do I prefer that method? Perhaps the reason is that I see style as a visual component so that if I cut and paste the "style visual component," I can do so knowing that I can reproduce a visual appearance I created previously and liked. Using the other technique, I may miss copying the font attribute or another non-style attribute may be inserted within the various attributes on a particular element.

Another advantage of using the style attribute is that when you break out the styling into a separate CSS style sheet (see Chapter 13, "Designing SVG for Use with CSS"), the syntax is almost correct for an external style sheet. Simply remove style=' and the closing quotes and you have syntax that is already correct for use in a free-standing style sheet. Simply add the selector and the opening and closing curly brackets in the correct place, and that part of your work is done. If you use separate font and stroke attributes, for example, when you begin to want to create an external CSS style sheet, you have much more deleting, cutting, and pasting to do. Because I believe that using external CSS style sheets is a powerful tool to reduce the burden of maintenance on a Web site, the choice of using the style attribute is, at least for me, an obvious one.

The first <text> element in Listing 4.3 contains all the styling information within a single style attribute. The second <text> element contains the styling information in a range of individual attributes, such as font-family and font-size. The two approaches are visually equivalent, as you can see in Figure 04.03.

Figure 04.03. Two strings of SVG text, the first styled using a single style attribute and the second styled by individual attributes.

Listing 4.3 (TextStyle01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg>  <text x="50" y="50"    style="font-family:Arial, sans-serif; font-size:24;  fill:#000066; stroke:#000066;    font-style:italics; font-stretch:normal;">  Some SVG text  </text>  <text x="50" y="80"    font-family="Arial, sans-serif"    font-size="24"    fill="#000066"    stroke="#000066"    font-style="italics"    font-stretch="normal">  Some SVG text  </text>  </svg> 

Laying out SVG text

The essentials of the display and layout of text in SVG are straightforward: They have to be contained in <text> elements. You can optionally use <tspan> or <tref> elements within <text> elements.

The simplest approach, although not necessarily the most flexible or useful for larger bodies of text, is to simply enclose the required text within SVG <text> elements within whose attributes the style information for the text is contained.

Let me first highlight the potential problem and then later discuss techniques to accommodate the way SVG lays out text. To display a simple greeting in SVG, you write code like the following:

Listing 4.4 (HelloSVGWorld2.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="800" height="600">  <text x="0" y="40" style="stroke:#000099; fill:#CCCCFF;  font-family:Arial; font-size:36;">  Hello World! Welcome to the future of Internet  Graphics - SVG!  </text>  </svg> 

You can see that the attributes of the <text> element are not much different from those of the <rect> element you have read about in Chapter 3, "Creating Static Graphics Elements." You position the <text> element relative to the upper-left corner of the containing <svg> element within the SVG graphic by using the x and y attributes. The style of the displayed text is controlled by the style attribute and its attendant CSS properties. You chose a deep blue outline for the text and pale blue fill. The font family is Arial, and the font size is 36.

Let's see what this looks like onscreen (see Figure 04.04).

Figure 04.04. SVG text illustrating the absence of automatic word wrapping of text.

Right away, you can see the problem. Unlike an <h1> header element in HTML or XHTML, an SVG <text> element does not automatically word-wrap within the size of the browser window. Worse, if you maximize the browser window, you find that the SVG text doesn't even word-wrap at the end of the dimensions of the <svg> element. The SVG viewer, unlike an HTML browser, doesn't lay out text for you. You need to provide the planning necessary to achieve the appearance you want.

You have to decide the positioning of SVG text onscreen by writing the code to start each new line and positioning that new line onscreen. To get the greeting fitted in the available width, you need to split it on two lines. Even then, the second line only just squeezes into the <svg> element, see Figure 04.05.

Figure 04.05. Splitting SVG text on two lines to fit it into the available screen space.

Listing 4.5 (HelloSVGWorld3.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="800" height="600">  <text x="0" y="40" style="stroke:#000099; fill:#CCCCFF;  font-family:Arial;  font-size:36;">  Hello World!  </text>  <text x="0" y="80" style="stroke:#000099; fill:#CCCCFF;  font-family:Arial; font-size:36;">  Welcome to the future of Internet Graphics - SVG!  </text>  </svg> 

I admit it I designed the previous examples so that the SVG text layout would look bad. I wanted to share with you the sense of horror I felt as I first realized that I would have to do some of the layout work myself in order to use text extensively in SVG. In practice, laying out the text has not been nearly as bad as I first expected. If you take a look at the preceding code, you see that the start tag of each of the <text> elements is identical, with the exception of the value of the y attribute. So, if you want to use repeating <text> elements like this, simply copy a <text> start tag and paste it where you start each new line.

I also recommend keeping the start tag of the <text> element, the actual text to be displayed, and the end tag </text> on separate lines. That way, you can visually scan to see where the text should be broken on each line. It varies according to font size and other factors, but if you lay out text more than occasionally with SVG, the whole process soon becomes second nature.

If you get the line length worked out for your first line of text, all the others are pretty easy after that. Then, just paste in the <text> element after the preceding </text> tag, start a new line for the following text, and continue typing. The process soon becomes second nature. However, you do need to do the planning of content better than you may have done when creating text for HTML adding a few words in SVG can be a bit tedious, so plan ahead.

If you lay out a verse of an ancient (17th century) Scottish melody, you can see the use of multiple <text> elements.

Listing 4.6 (Psalm23.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="500" height="400">  <text x="20" y="30" style="font-size:24;  font-family:Arial, sans-serif; fill:red; stroke:red;">  Psalm 23  </text>  <text x="20" y="60" style="font-size:16;  font-family:'Times Roman', serif; fill:red;  stroke:red;">  The Lord's my Shepherd  </text>  <text x="20" y="80" style="font-size:16; font-family:   'Times Roman', serif; fill:red; stroke:red;">  I'll not want  </text>  <text x="20" y="100" style="font-size:16; font-family:   'Times Roman', serif; fill:red; stroke:red;">  He makes me down to lie  </text>  <text x="20" y="120" style="font-size:16; font-family:   'Times Roman', serif; fill:red; stroke:red;">  In pastures green He leadeth me  </text>  <text x="20" y="140" style="font-size:16; font-family:   'Times Roman', serif; fill:red; stroke:red;">  The quiet waters by  </text>  </svg> 

Figure 04.06 shows the output from Listing 4.6.

Figure 04.06. Text laid out using multiple <text> elements.

One of the benefits of SVG text, compared to bitmap graphics, is that it can be copied and pasted from an SVG image of a Web page.

However, if you display the output of Listing 4.6 and try to copy the verse, a problem arises. You can copy only a line at a time. A similar problem arises if you want to make the text available to certain accessibility applications for the visually impaired you obscure the fact that the unit of information here is the verse rather than the line. The SVG <tspan> element, described later in this chapter, helps you get around this problem.

Fine-tuning the appearance of text

SVG gives you independent control of the stroke and fill properties of any font you choose to use. This situation has both potential advantages and disadvantages, which, at least in some settings, you need to think about carefully.

When you are using SVG <text> elements (alone or with nested <tspan> elements) to lay out substantial amounts of text for example, on an SVG Web page the impact of the width of the stroke can significantly impair text legibility. The adverse impact of the stroke varies considerably depending on, for example, the font size, whether the stroke and fill are the same color, the text colors (stroke and fill), and the background against which they are displayed. The following example, displayed in Figure 04.07, demonstrates how increasing the stroke width can adversely affect readability.

Figure 04.07. The effect of no stroke and increasing stroke width on the readability of SVG text.

Listing 4.7 (StrokeWidth01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="300" height="200">  <text x="50" y="50" style="font-family:Arial,  sans-serif; font-size:14; stroke:none;">  This has no stroke  </text>  <text x="50" y="75" style="font-family:Arial,  sans-serif; font-size:14; stroke:black;  stroke-width:1;">  Stroke width is 1.  </text>  <text x="50" y="100" style="font-family:Arial,  sans-serif; font-size:14; stroke:black;  stroke-width:2;">  Stroke width is 2.  </text>  <text x="50" y="125" style="font-family:Arial,  sans-serif; font-size:14; stroke:black;  stroke-width:3;">  Stroke width is 3.  </text>  </svg> 

For this font size with the chosen background and text colors, either a stroke property of none or a stroke-width of 1 gives the best readability, in my view.

When you begin to use substantially larger text sizes, the problem of readability is not prominent, although the overall effect of the visual appearance is. Take a look at Figure 04.08.

Figure 04.08. Stroke width and the double use of text to remove overlap of the stroke into the fill of large font text.

The first line shows what the fill looks like at 72 pixels. However, when you apply stroke attributes to such big fonts, you run into the practical issue that half the stroke is painted outside the outline and half inside. So if, as shown in the third line in Figure 04.08, you want a stroke width of 2 outside the fill, you also get the likely unwanted effect of a similar stroke width overlapping the fill.

However, remember from Chapter 2 that SVG has a painter's model. An element that appears later in the document, as long as it has 100 percent opacity, covers up any element that occurs earlier in the document at the same coordinates. This situation gives you the solution to the problem of half the stroke's being painted over the fill. To create text with a stroke width of 2 without the fill, you need two copies of the text. The first copy is created using a stroke-width property with the value 4. At this stage, you have a stroke-width of 2 inside the outline and covering part of the fill. If you add another text element with all identical attributes but with a stroke property of none, it covers over the fill that has the intrusion of the stroke and gives you a string of text that has the fill displayed as you intended for that font size and with the stroke wholly outside the fill. That is how the final line of text in Figure 04.08 was created.

Of course, by doing so, you slightly increase the file size because you have essentially two descriptions of the same text. Adding a few dozen bytes to the file size seems to me to be a good trade-off for this type of situation. Notice too that I have used a grouping <g> element in the code because these two <text> elements need to be kept together to maintain the desired effect.

Listing 4.8 (StrokeWidth02.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="750" height="400">  <text x="50" y="60" style="font-family:Arial,  sans-serif; font-size:72;  stroke:none; fill:red;">  No stroke  </text>  <text x="50" y="160" style="font-family:Arial,  sans-serif; font-size:72;  fill:red; stroke:black; stroke-width:1;">  Stroke width is 1.  </text>  <text x="50" y="260" style="font-family:Arial,  sans-serif; font-size:72;  fill:red; stroke:black; stroke-width:4;">  Stroke width is 4.  </text>  <g>  <text x="50" y="360" style="font-family:Arial,  sans-serif; font-size:72;  fill:red; stroke:black; stroke-width:4;">  Stroke width is still 4.  </text>  <text x="50" y="360" style="font-family:Arial,  sans-serif; font-size:72;  fill:red; stroke:none; stroke-width:4;">  Stroke width is still 4.  </text>  </g>  </svg> 

Kerning

Kerning refers to the spacing between individual character glyphs. If letters are spaced too far apart, readers wonder whether a stray space character has been left behind; if the glyphs are too close together, the visual appearance simply looks cluttered.

Kerning tables are provided with many fonts. These tables indicate (most likely in the opinion of the creator of the font) what amount of space should exist between given pairs of glyphs when that particular font is in use. If you do not specify any information about kerning when defining the style attribute of a <text> element, an SVG processor "assumes" that the value for the kerning property has been set to auto.

SVG also gives you the opportunity to turn kerning off, by specifying a number that describes the space between individual glyphs. If you want to disable the use of the kerning tables but do not want to add additional space between glyphs, you set the value of the kerning property to 0. Here is an example using auto kerning and three manual settings:

Listing 4.9 (Kerning01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="300" height="200">  <text x="50" y="50" style="font-family:Arial,  sans-serif; font-size:14;  stroke:black; stroke-width:1; kerning:auto;">  Auto kerning  </text>  <text x="50" y="75" style="font-family:Arial,  sans-serif; font-size:14;  stroke:black; stroke-width:1; kerning:0;">  Manual kerning, value 0.  </text>  <text x="50" y="100" style="font-family:Arial,  sans-serif; font-size:14;  stroke:black; stroke-width:1; kerning:1;">  Manual kerning, value 1.  </text>  <text x="50" y="125" style="font-family:Arial,  sans-serif; font-size:14;  stroke:black; stroke-width:1; kerning:3;">  Manual kerning, value 3.  </text>  </svg> 

In Figure 04.09, you can see the effect of auto kerning and those manually set kerning values. The effect on the legibility of kerning is evident.

Figure 04.09. Auto kerning and three manual settings of kerning on SVG text.

The use or avoidance of stroke attributes on glyphs also has a distinct impact on desirable kerning values. If you remove the stroke from glyphs and leave the kerning unchanged, the visual effect is distinctly different.

Listing 4.10 (Kerning02.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="300" height="200">  <text x="50" y="50" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:auto;">  Auto kerning  </text>  <text x="50" y="75" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:0;">  Manual kerning, value 0.  </text>  <text x="50" y="100" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:1;">  Manual kerning, value 1.  </text>  <text x="50" y="125" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:3;">  Manual kerning, value 3.  </text>  </svg> 

In the text shown in Figure 04.10, I have removed the stroke attributes from all glyphs and left the four kerning settings as shown in Figure 04.09. As I hope you can appreciate, the visual impression of individual kerning settings varies depending on the presence or absence of a stroke on an individual glyph.

Figure 04.10. The visual effect of the kerning settings shown in Figure 04.09 on text with no stroke.

Letter spacing

Whether or not you use auto kerning or set it manually, you also can add space between glyphs by making use of the letter-spacing property. You can use this property with or without explicitly expressed units. If you want to relate the spacing between glyphs to the em size, for example, you can specify that the value of the letter-spacing property is 0.5em. In the following example, I have not used units.

Listing 4.11 (LetterSpacing01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="400" height="200">  <text x="20" y="50" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:auto;">  Auto kerning, no letter spacing  </text>  <text x="20" y="75" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:auto; letter-spacing:1;">  Auto kerning, letter spacing of 1.  </text>  <text x="20" y="100" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:auto; letter-spacing:2;">  Auto kerning, letter spacing of 2.  </text>  <text x="20" y="125" style="font-family:Arial,  sans-serif; font-size:14;  stroke:none; kerning:auto; letter-spacing:3;">  Auto kerning, letter spacing of 3.  </text>  </svg> 

As you can see in Figure 04.11, letter spacing can have a significant impact on the visual impression your text creates.

Figure 04.11. The effect of letter spacing on text.

The <tspan> Element

The <tspan> element doesn't help you get around the need to calculate where line breaks should be, but it does help you with the copying of text by the user and the accessibility issues I mentioned earlier. This element also allows you to place text on the page by using a relative positioning mechanism rather than an absolute position, as is used with <text> elements. To see how this is done, take another look at Psalm 23, this time using both <text> and <tspan> elements.

Listing 4.12 (Psalm23tspan.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="500" height="400">  <text x="20" y="30" style="font-size:24;  font-family:Arial, sans-serif; fill:red; stroke:red;">  Psalm 23  </text>  <text>  <tspan x="20" y="60" style="font-size:16;  font-family:'Times Roman', serif; fill:red;  stroke:red;">  The Lord's my Shepherd  </tspan>  <tspan x="20" dy="1em" style="font-size:16;  font-family: 'Times Roman', serif; fill:red;  stroke:red;">  I'll not want  </tspan>  <tspan x="20" dy="1em" style="font-size:16;  font-family: 'Times Roman', serif; fill:red;  stroke:red;">  He makes me down to lie  </tspan>  <tspan x="20" dy="1em" style="font-size:16;  font-family: 'Times Roman', serif; fill:red;  stroke:red;">  In pastures green He leadeth me  </tspan>  <tspan x="20" dy="1em" style="font-size:16;  font-family: 'Times Roman', serif; fill:red;  stroke:red;">  The quiet waters by  </tspan>  </text>  </svg> 

I left the header, Psalm 23, within its separate <text> element. However, the verse is contained in one <text> element now, rather than in five, as in the preceding version. Each line is now contained in a <tspan> element rather than in a <text> element. If you attempt to select the whole verse, displayed in a browser for copying, you find that you can now do so. Similarly accessibility tools for the visually impaired can treat the verse as a unit.

Notice too that I have used two different ways of describing where a <tspan> element will be placed. For the first line, I used absolute positioning, like this:

<tspan x="20" y="60" style="font-size:16;  font-family:'Times Roman', serif; fill:red;  stroke:red;">  The Lord's my Shepherd  </tspan> 

whereas for each of the other <tspan> elements, I used relative positioning for the vertical position using the dy attribute. The dy attribute basically specifies how far down from the preceding line the line contained in the <tspan> element should be positioned.

The use of relative positioning with <tspan> elements can make the task of adding text or repositioning a block of text significantly simpler than when you use absolute positioning. Suppose that you want to reposition all the text 20 pixels farther down the page. You simply need to change the y attribute in the first <tspan> element to

<tspan x="20" y="80" style="font-size:16;  font-family:'Times Roman', serif; fill:red;  stroke:red;">  The Lord's my Shepherd  </tspan> 

The relatively positioned remaining <tspan> elements would maintain their position relative to that first one. Of course, you need to keep in mind whether the space into which the <tspan> elements may be moving is already occupied and, if so, whether or how you need to reposition the existing occupants of that space.

You can use this technique of relative positioning in a number of Web graphics situations. Let me show you how to create the framework for a simple scrolling window, which is displayed like some Java applets, to express a little bit of pro-SVG propaganda. You create the text here so that you have a simple rectangular window. In Chapter 8, you add the animation to create the scrolling window.

Here is the code to create the window. As you read through it, you will hopefully notice a couple of things that are not strictly necessary to create a static window like this one but that help you with the animation and later, when you place the animated window on an HTML or SVG Web page.

Listing 4.13 (TextWindow.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="200" height="200">  <svg x="0" y="0" width="200" height="200">  <rect x="0" y="0" width="200" height="200"  style="stroke:#990066; fill:none;"/>  <text>  <tspan x="5" y="25" style="font-size:14;  font-family:Arial, sans-serif; stroke:#990066;  fill:#990066">  Scalable Vector Graphics  </tspan>  <tspan x="5" dy="2em" style="font-size:10;  font-family:Arial, sans-serif;">  The World Wide Web Consortium has  </tspan>  <tspan x="5" dy="1em" style="font-size:10;  font-family:Arial, sans-serif;">  announced the availability of its  </tspan>  <tspan x="5" dy="1em" style="font-size:10;  font-family:Arial, sans-serif;">  exciting new XML-based graphics  </tspan>  <tspan x="5" dy="1em" style="font-size:10;  font-family:Arial, sans-serif;">  format, SVG, for the display  </tspan>  <tspan x="5" dy="1em" style="font-size:10;  font-family:Arial, sans-serif;">  of 2D graphics, text and bitmap  </tspan>  <tspan x="5" dy="1em" style="font-size:10;  font-family:Arial, sans-serif;">  graphics.  </tspan>  <tspan x="5" dy="2em" style="font-size:10;  font-family:Arial, sans-serif;">  Further information is available  </tspan>  <tspan x="5" dy="1em" style="font-size:10;  font-family:Arial, sans-serif;">  at the W3C web site,  </tspan>  <tspan x="5" dy="2em" style="font-size:10;  font-family:Arial, sans-serif; fill:blue; stroke:blue">  http://www.w3.org/  </tspan>  </text>  </svg>  </svg> 

First, notice that I have created a separate <svg> element to contain the scrolling window.

<svg width="200" height="200">  <svg x="0" y="0" width="200" height="200">  <rect x="0" y="0" width="200" height="200"  style="stroke:#990066; fill:none;"/> 

The existence of the inner <svg> element means that you can use the whole thing as a visual component and drop it into a page wherever you want. The only things you need to change are the x and y attributes of the inner <svg> element. Everything else is positioned relative to the upper-left corner of that nested <svg> element so that relative positioning is maintained.

Second, notice how I have used absolute positioning for the first <tspan> element (as shown in Figure 04.12). All other <tspan> elements are positioned relative to that one. Has the possibility crossed your mind that if I can animate the first <tspan> element, all the others will follow?

Figure 04.12. A text window to which you add scrolling functionality in Chapter 8.

NOTE

If you use a <tspan> element without specifying x , y , dx , or dy attributes, the tagged text is positioned immediately after the text preceding the <tspan> tag.

Okay, I admit it. It doesn't scroll. Not yet, anyway. You add the scrolling functionality in Chapter 8, where you learn about SVG animation. For the moment, think of your code as a static visual component to which you can add a range of animations, including your declared ambition of creating an applet-like scrolling window.

The <tref> Element

The use of the <tref> element has many similarities to the way the <use> element works. The text to be inserted is created in a <text> element nested within the <defs> element toward the beginning of an SVG document. The referenced <text> element has an ID attribute that the referencing <tref> element makes use of by means of the xlink:href attribute.

In this simple example, copyright information is defined in a <text> element whose ID is CopyrightInfo. That element is then referenced by the <tref> element later in the SVG document.

Listing 4.14 (tref01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="600" height="300">  <defs>  <text id="CopyrightInfo">  Copyright   Andrew Watt 2001  </text>  </defs>  <text x="50" y="30" style="font-size:14;  fill:blue; stroke:none">  This is ordinary inline text.  </text>  <text x="50" y="50" style="font-size:14;  fill:blue; stroke:none">  The following text was created using the  <tref> element.  </text>  <text x="50" y="80" style="font-size:14;  fill:red; stroke:none;">  <tref xlink:href="#CopyrightInfo"/>  </text>  </svg> 

The output is shown in Figure 04.13.

Figure 04.13. Text displayed onscreen by means of the <tref> element.

Displaying Text on a Path

I described in Chapter 3, "Creating Static Graphics Elements," how the SVG <path> element is created. The <path> element can be used in combination with the <text> element and the <textPath> element to display text on a path.

Listing 4.15 (TextonPath01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="1000" height="300">  <defs>  <path id="MyCurve"  d="M 100 250  C 200 100 300 0 400 80  C 500 150 600 300 700 200  C 800 100 900 0 1000 100" />  </defs>  <use xlink:href="#MyCurve" style="fill:none;  stroke:white" />  <text style="font-family:Arial, sans-serif;  font-size:18; fill:blue">  <textPath xlink:href="#MyCurve">  Scalable Vector Graphics allows you to place  text on a path. You can use the <path>,  <text> and <textPath>  elements.  </textPath>  </text>  </svg> 

The <use> element references the <path> element contained in the <defs> element. The <text> element defines the style of the text to be displayed, and the nested <textPath> element references the same <path> element over which the text is fitted.

Figure 04.14 shows the text of Listing 4.15 displayed on a path.

Figure 04.14. SVG text displayed on a path.

Now that you have looked in this and the previous two chapters at the structure of an SVG document, static SVG graphic shapes, and text handling in SVG, you are ready to go on to Chapter 5, "Creating Navigation Bars," to create some useful SVG images navigation bars.

CONTENTS