Working with Text Elements in SVG for Dynamic Designs

In previous posts, we’ve explored how to use SVG to create shapes. In this article, we will focus on creating and styling text with SVG. SVG text offers a range of possibilities that go beyond what HTML text can achieve.

Let’s dive into these possibilities.

Basic Text Implementation in SVG

Before we explore advanced features, let’s see how text in SVG is formed at a basic level:

<svg>
  <text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text>
</svg>

In SVG, text is defined using the <text> tag. This element primarily requires the x and y attributes to specify the baseline coordinates.

Image source: Wikipedia.org

As you can see, the text initially appears similar to regular HTML text.

Styling SVG Text with CSS

SVG text can be styled using CSS properties such as font-weight, font-style, and text-decoration. These styles can be applied inline, internally, or externally, just as with HTML elements. Here are some examples:

Bold Text

<text style="font-weight: bold;">This is text in Scalable Vector Graphic (SVG)</text>

Italic Text

<text style="font-style: italic;">This is italic text in Scalable Vector Graphic (SVG)</text>

Underlined Text

<text style="text-decoration: underline;">This is underlined text in Scalable Vector Graphic (SVG)</text>

Using the <tspan> Element

If you need to apply different styles to portions of text within the same line, you can use the <tspan> element. Here’s how to add bold, italic, and underline to specific parts of the text:

<text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan></text>

Using Writing Mode in SVG

Text isn’t always written left-to-right. For instance, Japanese text is often written top-to-bottom. SVG accommodates this with the writing-mode attribute.

<text x="70" y="20" style="writing-mode: tb;" class="japanese">ぁぃぅぇぉかき</text>
</svg>

The code above demonstrates how random Japanese characters can be vertically aligned using writing-mode: tb, where tb stands for top-to-bottom.

Creating Text Outlines in SVG

SVG text is essentially a graphic element, which means you can apply the stroke attribute to outline the text, similar to other SVG shapes.

<svg>
  <text x="0" y="50" font-size="50" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">This is SVG Text</text>
</svg>

In the example above, we use the stroke attribute to add an outline and remove the fill color by setting the fill attribute to none, resulting in the outlined text.

Making Text Follow a Path in SVG

In addition to horizontal and vertical text, SVG text can follow a custom path. Here’s how to do it:

First, define the path. While creating a path directly in HTML can be complex, involving coordinates and commands, it’s simpler to use a vector editor like Inkscape or Illustrator to generate the SVG code.

Next, place the <path> element inside a <defs> element, which stands for “definitions.”

<defs>
  <path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>

We’ve added an id attribute to the <path>. Now, link this id to your text using the <textPath> element:

<use xlink:href="#textpath"/>
<text x="10" y="100">
  <textPath xlink:href="#textpath">
    Lorem ipsum dolor sit amet consectetur.
  </textPath>
</text>

Further reading: SVG Paths

Applying Gradient to SVG Text

Adding a gradient fill to text is also possible in SVG, and it’s even easier if you’ve completed the text path section above.

Start by defining the gradient colors:

<defs>
  <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop stop-color="#999" offset="0%"/>
    <stop stop-color="#111" offset="100%"/>
  </linearGradient>
</defs>

With the gradient defined, you can now apply it to text by referencing the gradient’s id in the fill attribute:

<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>

Here’s how the gradient-filled text will appear:

Further reading: SVG Gradient and Pattern

Additional Resources

SVG text is incredibly powerful, and there’s much more to explore beyond this article. Below are additional resources to deepen your understanding:

• About Fonts in SVG – Divya Manian
• SVG Text Official Documentation – W3.org
• SVG Documentation at Mozilla Dev. Network with Examples and Tools – MDN
• SVG Writing Mode Attribute – MDN

• View Demo
• Download Source