SVG Text Layout: Words as Art

Scalable Vector Graphics (SVG) is an image format, so text isn t the first thing you might think of when considering its uses. But one of SVG s key features is its ability to encode text in a machine-readable form. This book takes a deep dive into the use of text within SVG to explore the creative possibilities as well as the potential pitfalls. You ll start with SVG s text basics, and then learn methods for using SVG to generate complex layouts.

If you re an intermediate SVG developer familiar with CSS-styled HTML text, you re ready to get going. This book covers:

• The SVG text and tspan elements, and basic attributes for positioning simple text labels within a graphic
• SVG s fill and stroke properties for controlling text s visual appearance
• Complex text layouts, using formatted poetry as examples
• Features to set the position and orientation of individual text characters
• Multidirectional text, including right-to-left horizontal text and vertical text
• Curved or complex text layouts with the textPath element
• Font options for your SVG, including web fonts, and their impact on text layout