How To Work With SVG Text

Posted: 20 Oct 2015 05:30 AM PDT

SVG text offers the best of both worlds. It's rendered like other graphic elements so you can do things like add strokes and fills that you can add to shapes, lines, and arrowheads. It's also packaged as XML character data, which means it's real text.

SVG text is accessible. You can select it, copy it, and paste it elsewhere. It can be read by screen readers and you can search for it in search engines. You can set it on a straight line, whether horizontal or vertical and you can even have the text follow a path of your own creation.

It's been awhile since I last talked about SVG and I hope I haven't kept you waiting too long for more. For the next few weeks I'll be talking again about scalable vector graphics and specifically how to work with SVG text.

If you're new to SVG, I recommend having a look at this article about how to work with SVG from the start of the year. If you want to check out some of the other articles in the series to this point, you can find them all here.

Characters, Glyphs, and Fonts

Before we get to the how let's define a few things.

Characters are the digital representation of the letters you want to display. SVG text is defined by a sequence of XML characters, which is why it can be searched for and selected. Each character is defined by specific unicode.

Glyphs are the visual representations of the characters. For example, the letter "f" can visually display with or without serifs or it can display in script. They would all be the same character, but each would be a different glyph.

Fonts are collections of glyphs. Glyphs drawn with a particular style will be collected together in a font, such as the Georgia or Helvetica. A font typically includes glyphs for the entire alphabet along with glyphs for numbers and it probably includes glyphs to represent ligatures. For example there might be a single glyph for the 'fi" pair.

In addition to a collection of glyphs, a font includes a font table which contains information necessary to display the different glyphs in the collection such as the size to display a glyph and where the glyph should be positioned. Font tables will also include information about things like the font weight.

Together the glyphs and font table are called font data.

The EM Box

Earlier in the year I talked about the SVG coordinate system and I talked about there being different coordinate systems for the canvas on which your SVG is drawn and the viewport through which you see the canvas.

There's another coordinate system specific to fonts. The geometric characteristics of different fonts are expressed within a coordinate system based on the EM box. The box around each glyph is 1em high and 1em wide. The box is called the design space and the coordinate system is called the design space coordinate system.

The space is given specific coordinates by dividing the EM box into a number of units per em. This number is a characteristic of the font and it's included in the information in the font table.

The (0,0) point is typically located along the left edge of the box, though usually not at the bottom left corner. You can see an example of this in the image at the start of this post.

The bottom of a roman capital letter is usually at the y=0 coordinate. Some letters, such as a lower case g or y, will have descenders that are still contained within the design space, but will have a negative value for their y-coordinate. That leads to y=0 being a point somewhere above the bottom of the design space.

SVG assumes that the font table will provide at least three font characteristics.

Ascent—the distance to the top of the EM box from the (0,0) point of the font
Descent—the distance to the bottom of the EM box from the (0,0) point of the font
Baseline table —the position of one of more baselines in the design space coordinate system

At the very least the font table is telling SVG how to locate glyphs inside the design space, though again it likely includes information about things like the weight of the font.

I don't want to get any more technical than what I've said so far. It's probably more than you wanted to know anyway. EM boxes and font tables will come up again later in the series when I talk about alignment and again when I talk about rendering SVG text along a path.

Before we can get to either though, I should probably show you how to create some SVG text.

The text Element

You create SVG text using the <text> element, which defines a graphic element consisting of text. Because the text is rendered the same way other SVG elements are rendered, you can do the same things to SVG text as you could to an SVG rectangle or circle or line.

You can transform SVG text in the coordinate space. You can fill it, add a stroke, and even reuse text across several elements. Before we get to those things let's start with a simple example.

1  2  3

<svg>    <text x="100" y="50">Some SVG Text</text>    </svg>

I defined a <text> element inside <svg> tags and I added x and y attributes that set a position to display the text within the viewport. Inside the <text> element's opening and closing tags I added the actual text that will display.

It's not the most exciting example, but I wanted to show you how easy it is to create text that's rendered as SVG. Let's build on the example.

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">      <text x="0" y="0">Some SVG Text</text>    </svg>

In the next example I added a width and height to the the SVG element to set the size of the viewport. I added some inline styles to show the outline of the viewport and so we can see our text should it overflow the viewport. I also changed both x and y to 0 so the text will render at the origin of the viewport.

Notice where the text is displayed. You could probably guess it would be appear at the left edge of the viewport, but I bet you weren't expecting it to sit above the top of the viewport. Had I not changed the overflow property, we wouldn't even see it.

The reason is because y represents where the baseline of the text will be located. The baseline is included in the font table.

Here's the same example with some extra text so you can see how characters with descenders display.

A positive value for x will move the text to the right and a positive value for y will move it down. You'll generally want to set a positive value on y if you want people to see your text.

You can do more with x and y then set the starting position of the text. Each can take a list of coordinates (comma or space separated). The first coordinate in the list is the position of the first character of text, the second coordinate is the position of the second character, and so on.

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">     <text x="0,20,40,60,70" y="20">This is some SVG Text</text>    </svg>

Here I've given a list of coordinates for x. The first coordinate (0) is the x-position of the "T," the second coordinate (20) is the x-position of the "h," and so on. Once the list of lengths ends, any remaining character will display where it naturally follows the character before it.

It works in both directions as you can see in the next example where I've given both x and y a list of coordinates

1  2  3

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">      <text x="0,20,40,60,70" y="0,20,40,60,70">This is some SVG</text>    </svg>

Let's leave things here and continue building on this example next week when I'll talk more about some additional attributes you can add to the <text> element.

Closing Thoughts

We're just getting started with SVG text and hopefully you can see how easy it is to create and position text as a scalable vector graphic.

The <text> element allows you to position all of your text and it allows you to position each character if you choose. There are more things you can do to manipulate how SVG text displays, which we'll get to.

I apologize for starting off with some dry information about glyphs and fonts and design coordinate space, but sometimes it's good to get that foundation in to help us understand later. I promise the majority of this series will offer a lot of examples showing what you can do with SVG text.

There's more to cover with the <text> element than what I've shown here and that's where we'll pick things up next week. I want to continue building on the examples and show you some of the other attributes you can add to the <text> element, including how you can stretch and squash the text so it fits into a space of your choosing.

Download a free sample from my book Design Fundamentals.

The post How To Work With SVG Text appeared first on Vanseo Design.