Overview

SVG Text Layout takes an in-depth look at how complex text layouts can be created with SVG markup and styles. The many examples demonstrate the concepts with stand-alone SVG graphics or inline SVG code in HTML pages.

The authors have made all the example code and screenshots available as a reference repository. These files are covered by the O’Reilly Media policy on the use of example code. Short version: you are free to use the examples in moderation; credit is appreciated but not required. However, please don't integrate a large portion of the example set within a product or documentation.

The chapter links in the following outline will take you to an index of the examples and figures as SVG files you can view live in your browser. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository.

• Chapter 1, Understanding Text Layout reviews the basics of laying out text in word processors and websites, and introduces much of the technical terminology used to describe text.

• Chapter 2, SVG Text Basics introduces the SVG <text> element and the basic attributes for positioning simple text labels within a graphic, including the particular issues of sizing text within a scalable coordinate system.

• Chapter 3, Colorful Language briefly covers SVG’s fill and stroke properties for controlling the visual appearance of text.

• Chapter 4, Multiline SVG Text gets into more complex text layouts, using formatted poetry as examples.

• Chapter 5, Off-Kilter Characters explores SVG’s ability to control the position and orientation of individual text characters.

• Chapter 6, Casting Anchor introduces the text-anchor property and discusses how it affects the alignment of text.

• Chapter 7, Anchoring in International Waters considers the particular issues of multidirectional text, including right-to-left horizontal text and vertical text.

• Chapter 8, Lining Up introduces the properties that control the vertical alignment of horizontal text and the horizontal alignment of vertical text.

• Chapter 9, Beyond Straight Lines looks at the <textPath> element and how it can be used to create curved or complex text layouts.

• Chapter 10, Fonts, Families, Faces explores fonts and their impact on SVG text, including the use of the @font-face rule to incorporate web fonts in your SVG graphics online.

• Chapter 11, The Perfect Fit looks at the textLength attribute and font-size-adjust property, which can be used to standardize text layout when you don’t have full control over the fonts used; the chapter also describes decorative uses for textLength.

• Chapter 12, Extending Your Toolbox introduces the SVG <foreignObject> element, and shows how it can be used to include CSS-formatted HTML text within an SVG image.