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
But, before we go further, let’s see how Text in SVG is formed at its very basic level:
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.
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.
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 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.
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 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.
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.
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.
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;
Further reading: SVG Paths
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.
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;
And here it is, the text with gradient.
Further reading: SVG Gradient and Pattern
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.
联系客服
