SVG Text On A Path — Part 1

Posted: 15 Dec 2015 05:30 AM PST

In addition to laying out text in a straight line SVG includes the ability to have text laid out along any path you create. This opens up many possibilities for displaying text. It's easy to set up. And the results are fun.

We've covered a lot so far in this series on SVG text. One thing we haven't changed so far is the path on which the text is laid out. Until now the text has always been located along a default straight line.

Today I'll show you how to work with SVG text along straight line paths that change direction and next week I'll show you how to create SVG text along any curved path you can imagine.

The textPath Element

To create SVG text that follows a path you use a <textPath> element in combination with a path you define inside <defs> tags. To refer to the path you'll use an xlink:href attribute on the <textPath>.

Note: SVG 2.0 is dropping the xlink: and will simply use href to refer to the path.

If you need a reminder for how to work with paths, I'll refer you to a couple of posts from one of my previous SVG series.

As we've done throughout this series, let's work our way through an example and then build on it. In this first example I created an SVG element, defined the width and height of the viewport and then styled it.

Next I created a linear path and gave the path an id of text-path. I'll explain the values in the path momentarily. The path id is referenced inside the textPath element through the xlink:href attribute.

1  2  3  4  5  6  7  8  9  10  11

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <defs>        <path id="text-path" d="M225,150 v-80 h240 v80 Z" />      </defs>      <text>        <textPath xlink:href="#text-path" >SVG text on a linear path</textPath>      </text>    </svg>

The path is created inside <defs> elements and is defined by the values set on the path definition (d).

M225,150 — move to point 225,150
v–80 — move up vertically (–80)
h240 — move to the right horizontally (240)
v80 — move down vertically (80)
Z — closes the path

Here's the result.

As you can see, the text followed the path. It moved up, to the right, and then down again. The most complicated part was the path itself. Again if you need a path reminder I'll point you to the two posts I mentioned previously.

The textPath Attributes

There are three attributes specific to the <textPath> element in SVG 1.1. The fourth, xlink:href, isn't specific to textPaths Of the three attributes, startOffset is the one you'll use most often.

The startOffset attribute does just what it sounds like it does. It allows you to offset the start of the path for the initial text position. It takes a length as a value, either a percent or a number. If the latter is used, the number represents a distance along the path measured in the current coordinate system.

Let's revisit the previous example adding the startOffset attribute so you can see how it works. I've also added another path. It's the exact same path the text sits on. I outlined it in blue and I added it so we could see the path itself.

1  2  3  4  5  6  7  8  9  10  11  12  13

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <defs>        <path id="text-path" d="M225,150 v-80 h200 v80 Z" />      </defs>      <path id="text-path" d="M225,150 v-80 h240 v80 Z" stroke="#00f" stroke-width="1px" fill="none" />      <text style="stroke: #000;">        <textPath xlink:href="#text-path" startOffset="20%">SVG Text on a linear path </textPath>      </text>    </svg>

I set startOffset to 20% and you can see that the text now starts some distance from the initial point (225,150). I won't claim to have measured the distance, but it looks about 20% of the whole path.

You can actually do the same thing and offset the path without using startOffset. Here's another version of this example. I removed the startOffset on the text path and instead added a x-coordinate of 20% to the text element around the textPath.

Note: While I used x here, you could set the dx attribute instead and achieve the same result.

1  2  3  4  5  6  7  8  9  10  11  12  13

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <defs>        <path id="text-path" d="M225,150 v-80 h200 v80 Z" />      </defs>      <path id="text-path" d="M225,150 v-80 h240 v80 Z" stroke="#00f" stroke-width="1px" fill="none" />      <text x="20%" style="stroke: #000;">        <textPath xlink:href="#text-path">SVG Text on a linear path </textPath>      </text>    </svg>

If you compare the result of this example with the previous one, you can see they look the same and the text starts in the same place. Notice that I set a value for x, but the text moved along the path in both the x and y directions.

A value of x moves the text parallel to the path. Don't think of it in terms of horizontal and vertical, but rather parallel and perpendicular to the path.

That's the very basics of working with SVG text along a path. There's still more to cover with creating text along a path, but let's pick things up again next week.

Closing Thoughts

Being able to display SVG text along any path you want opens up a lot of creative possibilities and it's also a lot of fun. Hopefully you'll agree it's not too difficult. The most difficult part is creating the path itself. Adding the text is the easy part.

If SVG paths are new to you or if you need a review for what all those letters and numbers mean, I'll refer you again to a couple of posts from my first round of this SVG series. You might want to look over both, particularly the curve commands before next week's post.

If you feel comfortable working with SVG paths, have some fun.

Next week I'll continue with the remaining attributes and then I'll show you text along a curved path complete with tspans and different styles.

Download a free sample from my book Design Fundamentals.

The post SVG Text On A Path — Part 1 appeared first on Vanseo Design.