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
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.
The animal on the cover of SVG Text Layout is a Cabot's tragopan (Tragopan caboti). This small, plump, ground-dwelling, and resourceful pheasant is endemic to a small, subtropical forested area of southeast China that includes the provinces of Fujian, Guangdong, Guangzi, Hunan, Jianxi, and Zhejiang.
The males are highly colorful, having heavily buff-spotted, rich reddish-brown upperparts, straw-buff underparts, and a blackish head with bare orange facial skin (including brilliant blue and red inflatable "lappet" and "horn" wattles), golden crown-sides, and orange-red neck-sides. The females, smaller than the males by a pound, are sober in their appearance, having a reddish-brown head spotted with black, and brown and gray feathers spotted with white chevrons.
Foraging by day on the ground, they roost at night in the boughs of the Daphniphyllum macropodum, a small tree that conveniently provides the leaves and fruit that are a dietary staple. Breeding takes place in spring, with the female clutching and incubating two to six eggs, which hatch in about 28 days. After two to three days of brooding, the chicks are able to fly. The family then leaves their nest, remaining together throughout the winter—sometimes joining another family, dwelling above the tree line in large trees near the ridge tops.
Although officially designated by the International Union for Conservation of Nature as being a “vulnerable species” due to its small population and rapid habitat conversion and fragmentation, Tragopan caboti has found ways to incorporate the trappings of modern infrastructure to their native habitat into their daily lives. The soft, quiet, clay roads running through a large nature reserve in Jiangxi province provides opportunities for feeding and grit collection, as well as an additional venue for their elaborate courtship rituals.