SVG Text Layout

Preface

Scalable Vector Graphics (SVG) consist of a markup language and associated style rules for defining images and diagrams. SVG is an image format, and for most people, text isn’t the first thing they think of when considering the uses of SVG. From the beginning, however, a key feature of SVG has been its ability to encode text in a machine-readable form. Because SVG itself is a text-based markup language, the text characters in an SVG file can be viewed and edited in any text editor.

This book takes a deep dive into the use of text within SVG. It explores the creative possibilities, but also the potential pitfalls. It describes the basics, but also shows how you can use SVG to generate complex layouts. And, unfortunately, it also outlines the many inconsistencies and limitations of web browser implementations of SVG text (as of mid-2015, when this book was written).

This book was born from another project, an introduction to using SVG on the Web. In order to keep that book a manageable length—and keep it suitable for introductory audiences—many details and complexities had to be skimmed over. But those details and complexities add up to the full, wonderful potential of SVG as a graphics format. Once you understand the basics of SVG, you can start thinking about creating more intricate designs and more creative effects.

What We’ll Cover

If you’re reading this, hopefully you are already familiar with the basics of SVG: how to define a graphic as a set of shapes, and how to ...