For the simplest use cases, SVG text is straightforward. A short label can be added to a diagram with a single markup element and a pair of attributes.
SVG text, like SVG shapes, are positioned within a two-dimensional coordinate system. The coordinate system can be controlled by
viewBox attributes and
transform properties, but by default it starts in the top-left corner of the graphic. All points in the image are defined by their position relative to that origin point, along the horizontal x-axis and vertical y-axis.
The rest of the book will assume you are familiar with the SVG coordinate system. If any of that sounded confusing, you might have some background reading to do.
SVG text is, conveniently enough, drawn using the
<text> element. Attributes on the
<text> element define the position at which to start writing. The child text content of the element provides the words and letters to be written. It looks something like this:
"0 0 400 80"
<title>Basic SVG Text
Which…isn’t particularly exciting. ...