HTML 5 TutorialsDrawing text in SVG

Drawing text in SVG

SVG, a W3C recommendation, is an image format. Instead of using JPEG, PNG, and GIF images for your website, you can use SVG images. But what are the benefits of doing so?

The main benefit is that it’s lightweight. Such images are extremely small in size, which helps you speed up your website.

There are many other advantages of using this image format. For example, these images are scalable, and the quality remains same even if you resize or zoom in them.

There are several interesting benefits of using SVG images but explaining them is beyond the scope of this article. For this article, let’s talk about how to draw text in SVG.

But before diving into the technical details, I’d like to give you a little more information about SVG. Here are a few things that you should know:

  1. You can create SVG images using any text editor. For instance, you can use the Windows Notepad program to write SVG images.
  2. These images are pure XML files. Now, what is XML? In simple words, XML is the stricter version of HTML. In XML, you need to close every element while you can choose not to end every element in HTML. For example, the line-break element needs to be written in this way in XML: <br />
  3. These images can be indexed and searched.
  4. An SVG image is a vector-based graphic.

With SVG, you can draw text, shapes, etc. While working with SVG, text is also a kind of graphic. This is why we’re using the term ‘draw’ for texts.

Now let’s show you how to draw text in SVG.

The <svg> element

You can draw an SVG image using the <svg> element. So to draw text, you need to use this element. See the example below.

Code example:

<html>
<body>

<svg width="200" height="200">

</svg>

</body>
</html>

 

You can create an SVG graphic using the <svg> element. So your code for drawing the SVG graphic will be between the <svg> and </svg> tags. As you can see, SVG code is pure XML code. So if you know the basics of HTML and XML, you can quickly learn how to draw graphics in SVG.

The above code example will not produce any text or shape as there’s no code inside the <svg> tags.

The ‘width’ and ‘height’ are attributes of the <svg> element that define width and height respectively for your graphic.

There can be elements inside the <svg> element, using which you can draw texts and shapes.

The <text> element

The <text> element lets you draw texts. The ‘x’ and ‘y’ attributes of this element allows you to specify exactly where you want the text to be placed.

Take a look at the following code example. In this example, the content of the <text> element is ‘Good morning’. So this text will be displayed as an output.

Code example:

<html>
<body>

<svg width="200" height="200">
<text x="10" y="30">Good morning!</text>
</svg>

</body>
</html>

 

Screenshot of the output:

You can change the position of the text by setting different values to the ‘x’ and ‘y’ attributes.

Styling the text

So you want to change the style of your text? You can easily change the styles such as font size and color using CSS and attributes. Let’s see how to do it!

The following code example uses the ‘font-size’ attribute of the <text> element to define the font-size of the text and it uses the ‘fill’ attribute of this element to define the color of the text. This code snippet displays the text ‘Good morning’ in green. I’ve set the font-size for this text to 40 pixels.

Code example:

<html>
<body>

<svg width="300" height="200">
<text x="10" y="50" font-size="40px" fill="green">Good morning!</text>
</svg>

</body>
</html>

 

Screenshot of the output:

gm 1

You can achieve the same output using CSS. Let’s see now how to do it using CSS.

The following example uses CSS code to style the text. The CSS code is written as the value of the ‘style’ attribute. In other words, you can change the style of an HTML element using the ‘style’ attribute.

The ‘font-size’ property specifies the font-size of the text while the fill property specifies the color of the text.

Code example:

<html>
<body>

<svg width="300" height="200">
<text x="10" y="50" style="font-size:40px; fill:green;">Good morning!</text>
</svg>

</body>
</html>

 

Screenshot of the output:

gm 2

Rotating the text

You can easily rotate a text in SVG. The code example below rotates a given text.

In the following code snippet, the ‘transform’ attribute of the <text> element has been used to rotate the text. I have used the ‘rotate’ transform’ definition to perform the rotation operation.

Code example:

<html>
<body>

<svg width="300" height="200">
<text x="10" y="50" transform="rotate(50 20, 80)">Good morning!</text>
</svg>

</body>
</html>

 

Screenshot of the output:

Dividing the text into multiple portions

You can divide your text into several parts and then can specify different attribute values for each part of the text. You can do it using the <tspan> element.

So the <tspan> elements are the sub-portions of the <text> element. Consider the following code example to understand how you can set different attribute values for the sub-portions of the text.

In the code below, I have used the ‘font-weight’ attribute to specify whether the text should be bold or normal.

Code example:

<html>
<body>

<svg width="300" height="200">
<text x="10" y="50" font-weight="bold">Languages:
<tspan x="30" y="80" font-weight="normal">English</tspan>
<tspan x="30" y="100" font-weight="normal">Arabic</tspan>
<tspan x="30" y="120" font-weight="normal">Hindi</tspan>
</text>
</svg>

</body>
</html>

 

Screenshot of the output:

So isn’t it extremely easy to draw text in SVG? Besides text, you can also draw simple and complex shapes using SVG. This modern technology gives you a lot of flexibility. So, you can draw a graphic element exactly how you want.

I hope you learned something useful today from this article. So did you enjoy this post?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -