Dublin Library

The Publishing Project

Text on a path

  • 4 min. read

 

One of my favorite things to see on the web are curved paths with text on them... how to create irregular text paths and laying out text on them.

This post will discuss how to create text on a path using SVG, the advantages and disadvantages of using SVG for this purpose, and how to animate the text along the path.

Creating Text on a Path #

Creating text on a path in SVG is straightforward. You define a path using the <path> element and then use the <text> and <textPath> elements to place the text along that path.

In the <path> element we use a cubic Bezier curve to create a curved path. The d attribute defines the shape of the path using the Q command. The fill attribute is set to transparent to prevent color in the space generated by the curve and the stroke attribute is used to define the color of the path.

In the text element we define font-size, fill, and font-family attributes to style the text. The textPath element is used to bind the text to the path defined earlier. The href attribute points to the path's ID, and the startOffset attribute is used to control where the text starts along the path; we can move the text around the path as needed.

<svg
	width="400"
	height="200"
	viewBox="0 0 400 200"
	xmlns="http://www.w3.org/2000/svg">
  <!-- Define the curved path -->
  <path
    id="curve"
    d="M 20,100 Q 200,0 380,100"
    fill="transparent"
    stroke="#ccc"
    stroke-width="2"
  />

  <!-- Text element on the path -->
  <text
		font-size="20"
		fill="#333"
		font-family="Arial, sans-serif">
    <!--
			Reference the path defined earlier

			Indicate the offset where to start placing the text
		-->
		<textPath href="#curve" startOffset="10%">
      Animated text along a curved path
    </textPath>
  </text>
</svg>

Adding Animation #

Adding animation is pretty straightforward. We add the animate element as a child of textPath and set the attributeName to startOffset (we want to animate the location of the text along the path).

The from and to attributes define the range of the animation, and the dur attribute specifies the duration of the animation.

The repeatCount attribute is set to indefinite to make the animation loop continuously.

<svg
	width="400"
	height="200"
	viewBox="0 0 400 200"
	xmlns="http://www.w3.org/2000/svg">
  <!-- Define the curved path -->
  <path
    id="curve"
    d="M 20,100 Q 200,0 380,100"
    fill="transparent"
    stroke="#ccc"
    stroke-width="2"
  />

  <!-- Text element on the path -->
  <text
		font-size="20"
		fill="#333"
		font-family="Arial, sans-serif">
    <textPath
			href="#curve"
			startOffset="10%">
      <animate
        attributeName="startOffset"
        from="0%"
        to="100%"
        dur="5s"
        repeatCount="indefinite"
      />
      Animated text along a curved path
    </textPath>
  </text>
</svg>

Advantages and Disadvantages #

While I love these solutions, there are advantages and disadvantages to using SVG for text on a path.

Advantages #

  • Scalability: SVG is vector-based, so it scales well without losing quality. This is particularly useful for responsive designs
  • Accessibility: SVG text can be made accessible to screen readers, which is important for web accessibility

Disadvantages #

  • Complexity: SVG can be more complex to work with than traditional HTML/CSS text. In particular, creating complex paths can be challenging
  • Lack of authoring tools: While there are some tools for creating SVG paths, they are not as widely used or supported as traditional HTML/CSS authoring tools

A full static example #

This is a more complex example that includes a complex path and long text elements.

Edit on Github