SVG Text Layout: Words as Art

by Amelia Bellamy-Royds, Kurt Cagle

Overview

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

Product Details

ISBN-13:	9781491933824
Publisher:	O'Reilly Media, Incorporated
Publication date:	11/05/2015
Pages:	231
Product dimensions:	5.90(w) x 8.90(h) x 0.60(d)

About the Author

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.

Table of Contents

Preface v

1 Understanding Text Layout 1

The Language of Text 1

Text Layout on the Web 7

Text Within Scalable Vector Graphics 17

2 SVG Text Basics 21

Letters on a Page 21

Big Words, Little Words 24

Styling Text 31

Labeling a Graphic 37

3 Colorful Language 47

Fill and Stroke 47

Coordinating Colors 52

Painted Effects 58

Switching Styles 63

4 Multiline SVG Text 67

Stepping Up 67

Waxing Poetic 72

5 Off-Kilter Characters 81

Multiple Positions 81

Conflicting Positions 84

Twisted Letters 87

6 Casting Anchor 93

Start, Middle, or End 93

Text Chunks 95

Working with Whitespace 98

7 Anchoring in International Waters 103

Starting from the Other End 104

Head to Toe Layout 109

8 Lining Up 121

Baseline Basics 122

Super (and Sub) Baselines 128

Mimicking Baseline Control 132

9 Beyond Straight Lines 135

Creating Curved Text 135

Positioning on a Path 139

Integrating Other Text Effects 143

10 Fonts, Families, Faces 151

Generic Styles 151

Making the Most of System Fonts 154

The Perfect Face 158

Finding Fonts 166

Faking Fonts 168

11 The Perfect Fit 171

Fixing Font Size 171

Measuring SVG Text 177

Fun with Font Adjustments 179

12 Extending Your Toolbox 185

A Foreigner in an SVG File 185

A Text Elements and Attributes 195

B Text and Font Style Properties 201

Index 211