Web Design Tutorials and Tips

In our previous posts, we’ve used SVG to create shapes. In this post, as the title said, we will look into creating Text with SVG. There are a lot of things we can do with text beyond what plain HTML text is capable of doing.

So, let’s check them out.

Recommended Reading: A Look into Scalable Vector Graphic

Basic Implementation

But, before we go further, let’s see how Text in SVG is formed at its very basic level:

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

The text in SVG, as you can see from the above code snippet, is defined with a sufficiently logical tag, <text>. This element basically only requires x and y attributes to specify the baseline coordinates.

Image source: Wikipedia.org

And here is how the text will look like. For now it seems it has no difference with regular text in HTML.

Basic Text Styles

Text can also be styled with CSS properties such as font-weight, font-style, and text-decoration which can be implemented either through inline-style, internal-style or external-style like we have discussed in the previous post about Styling SVG with CSS. Here are some of the examples.

Bold

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

Italic

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

Underline

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

<tspan> Element

In some cases, when we only want to apply styles or attributes to particular portion of the Text, we can use <tspan>. This example below shows how we add bold, italic and underline to a single line of 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>  

Writing Mode

Text is not only written from left-to-right. In other parts of the world, Japan for example, the text is written from top-to-bottom. In SVG, this can be done by using the writing-mode attribute.

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

In the example above, we have put several random Japanese characters (don’t ask me their meaning, I really have no idea) and change the orientation with this style declaration, writing-mode: tb, where tb is stand for top-to-bottom.

Text Outline

Text in SVG is basically a graphic, so we can also apply the stroke attribute to add a border line to the Text just like we did with the other shapes.

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

In the above code snippet, we have added the stroke attribute to the <text> element and remove the text color by specifying the fill attribute to none which will result in the following text presentation.

Text Path

In SVG, the Text is not only able to be displayed horizontally and vertically, but it can also follow a Path pattern. Here is how to do it.

First, we need to define the Path. However, creating a Path directly in HTML is not that intuitive, we need to understand coordinates and some commands which I’m sure most of us will try to avoid. So, to make this step simpler, I personally suggest to just open up a vector editor (Inkscape or Illustrator), create a path, and generate the SVG code.

Then, put the <path> element inside a <defs> element. defs here means definition.

  <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>  

Notice that we have also added an id attribute to the <path>. Now, we only need to link the Path id to our text with <textPath> element, like so;

  <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

Text Gradient

Adding a background to fill the Text is also possibile in SVG, and if you have succeeded in the Text Path section above, this would be much easier.

First, we need to define 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>  

When all the necessary definitions are set up, now we only need to add the text and refer the fill attribute to the gradient’s id attribute, as follows;

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

And here it is, the text with gradient.

Further reading: SVG Gradient and Pattern

Further References

Text in SVG is undoubtedly powerful, there are actually many things we are able to do beyond what we can accomodate in this post. So, below we have put together a few more references to serve your interest in this subject.

• About Fonts in SVG – Divya Manian
• SVG Text Official Documentation – W3.org
• SVG Dovumentation at Mozilla Dev. Network with Examples and Tools – MDN
• SVG Writing Mode Attribute – MDN
• Write Japanase HTML Characters – Peer Wandel Hansen

• View Demo
• Download Source