Chapter 7 The Art of the Word: Graphical Text Layout
This chapter briefly introduces the three main types of SVG text layout:
short labels positioned around a single anchor point
precise character-by-character positioned graphical text
text arranged on a path
The features described here are relatively well-supported in web browsers, at least for Western languages. If you are using right-to-left languages such as Hebrew or Arabic, or scripted languages that use complex text shaping (changing or re-arranging the appearance of characters based on their context), beware of browsers making a mess of your text when using character positioning or text on a path.
We also include tips on working with web fonts and fallback system fonts.
The font-selection properties in SVG are entirely borrowed from core CSS. If you’re familiar with styling text with CSS (and we’re assuming you are) you are halfway to styling SVG text. You can even use web fonts declared with an
@font-face rule, although external font files—like external stylesheets—are restricted in some SVG contexts.
SVG text layout, in contrast, does not reuse CSS layout. When used to style HTML, CSS lays out text by dividing the page into boxes and then wrapping streams of text within them. If you change the styles of a section of HTML text so that it takes up more space, the rest of the text is pushed out of the way, or wraps to a new line. SVG text doesn’t (yet) work like that.
In SVG, each
<text> element is independent, positioned exactly where you place it, even if it overlaps other content. There are ways to make SVG text flow in continuous streams, but it takes much more work than the equivalent CSS layout. SVG text is therefore best reserved for its intended purposes: figure labels and short snippets of precisely positioned decorative text.
Figures and Examples#
The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.
View all files for this chapter on GitHub.
- Figure 7-1. SVG text, with minimal style and layout
- Example 7-1. Defining basic text in an SVG
- Example 7-2. Using CSS rules to style text in an SVG
- Figure 7-2. SVG text, filled in red and stroked in black
- Figure 7-3. The labeled photograph
- Example 7-3. Using SVG text to label a photograph
- Figure 7-4. The labeled photograph, scaled down, with and without font-size media queries
- Figure 7-X1. The interactive labels, revealed one at a time
- Example 7-X1. Making SVG text labels interactive on mouseover
- Figure 7-5. SVG text in a comic book bubble
- Example 7-4. Positioning graphical SVG text
- Figure 7-6. SVG text in a comic book bubble, displayed in default handwriting fonts
- Figure 7-7. SVG text in a comic book bubble, after text anchors are adjusted, displayed in default handwriting fonts
- Figure 7-8. SVG text in a comic book bubble, after text anchors are adjusted and fallback fonts are specified
- Figure 7-9. SVG comic book text, with fallback fonts in mobile browsers
- Final SVG file, moby-dick-fallbacks.svg
- Desktop screenshots, with default cursive fonts, moby-dick-fallbacks.defaultCursive-compare.png
- Desktop screenshots, in specified fallback fonts, moby-dick-fallbacks.Desktop-compare.png
- Mobile screenshots, in fallback fonts, moby-dick-fallbacks.Mobile-compare.png
- Final, final SVG file, using
<tspan>to posiiton each line, moby-dick-tspan.svg (from the unlabelled code snippet after Figure 7-11)
- Figure 7-10. Styled SVG text in a comic book bubble
- Example 7-5. Using
<tspan>to modify text styles
- Figure 7-11. Styled and vertically staggered SVG text in a comic book bubble
- Figure 7-12. SVG text with staggered letters
- Example 7-6. Using multiple values in text positioning attributes
- Figure 7-X2. Rotated letters in SVG comic book text
- Example 7-X2. Using rotate to alter the angle of individual characters
- Figure 7-13. Curved text positioned using
- Figure 7-14. Curved text positioned using multiple
<textPath>elements (titled “Curved text positioned using
<textPath>” in initial printings of the book)
- Example 7-7. Arranging text using
- Figure 7-15. The paths used to position the curved text
- Figure 7-16. Curved text positioned using multiple lines offset from a single
- Example 7-8. Positioning multiple lines of text above and below the same path
- Figure 7-17.
<textPath>lines adjusted with startOffset
- Figure 7-X3. Circular text using
- Example 7-X3. Controlling text length for text on a closed path
- “Creating Embeddable Fonts as Data URIs”: The old SVG
<font>element to include a font in an SVG file doesn't work on the web. Data URIs do.
- “Interactive Text”: Don't bake-in labels on your photos: add them with SVG text, and you can style them dynamically.
- “Beyond Horizontal: Rotated and Vertical Text”: Horizontal text is so HTML. SVG was designed for more than that. And now, CSS is too.
- “Perfecting Paths for <textPath>”: Tips for mastering geometry when wrapping SVG text around shapes.
- Reference: SVG Elements and Attributes
- Reference: Select SVG DOM Methods and Objects