Svg Text Layout ― Words As Art

Although SVG is mostly known as a graphics format, one of its key benefits is that it encodes decorative text in a way that is editable, accessible, and search engine-discoverable. The SVG specifications give designers extensive control over the positioning and appearance of text—but at the cost of many of the automatic text layout settings used for paragraphs on a web page.

SVG Text Layout takes an in-depth look at the many ways designers can manipulate text within SVG, from adding simple text labels to letter-by-letter positioning of artistic text. You’ll learn how both artistic fonts and SVG painting effects can be used to decorate text, and discusses various approaches for increasing consistency between different web browsers and other software.

Amelia Bellamy-Royds is a freelance writer specializing in scientific and technical communication. She helps promote web standards and design through participation in online communities such as Web Platform Docs, Stack Exchange and Codepen. Her interest in SVG stems from work in data visualization, and builds upon the programming fundamentals she learned while earning a B.Sc. in bioinformatics. A policy research job for the Canadian Library of Parliament convinced her that she was more interested in discussing the big-picture applications of scientific research than doing the laboratory work herself, leading to graduate studies in journalism. She currently lives in Edmonton, Alberta. If she isn't at a computer, she's probably digging in her vegetable garden or out enjoying live music.

Kurt Cagle worked as a member of the SVG Working Group, and wrote one of the first SVG books on the market in 2004. Currently an Invited Expert with the W3C Xforms working group, Kurt Cagle is also XML Data Architect for the Library of Congress, after having worked in that role for the US National Archives. He was a regular contributor to O'Reilly Media since 2003, and an online editor in 2008-2009.