Scalable Vector Graphics - Text 1

Gopi Chand
9y
5.3k
0
0

Article

Before reading further, read the following articles.

Now let's proceed to learn about SVG text.

SVG Text

The tag <text> is used to draw various types of text. The attributes used here are as in the following.

x & y are the x-axis & y-axis coordinates of glyphs.
dx & dy are the shifts along x-axis & y-axis.
rotate is applied to all glyphs for transformation of text.
textLength used for rendering length of text.
lengthAdjust is used for type of adjustment with the rendered length of text.

Glyphs are the visual representations of letters or symbols. For example, the letter “a” can be drawn using various glyphs since for the letter “a”, there are various types of visual representations available.

Let's see a few examples to understand SVG text.

Example 1

<html>
<body>
<svg height="80" width="500">
<text x="10" y="40" fill="green" font-size="30px">I like</text>
<text x="100" y="40" fill="orange" font-size="40px">C# Corner</text>
<text x="290" y="40" fill="blue" font-size="30px">Community :)</text>
</svg>
</body>
</html>

Output

Example 2

Text Positioning

In the context of SVG text, the position of the text is determined by x & y attributes in the <text> tag. The x attribute determines the position of the left edge (starting point) of the text whereas the y attribute determines the position of the bottom edge of the text instead of the top edge. Here, the y position of text is different from those used in triangle, circle, rectangle and so on.

<html>
<body>
<svg height="80" width="500">
<text x="10" y="40" fill="tomato" font-size="30px">How are you ?</text>
<line x1="0" y1="40" x2="200" y2="40" stroke="blue" stroke-dasharray="10 3"/>
<text x="220" y="60" fill="cyan" font-size="30px">Fine, Thank you !</text>
<line x1="200" y1="60" x2="450" y2="60" stroke="green"/>
</svg>
</body>
</html>

Output

In the output, we can see that the y position of both the text and the line are the same in both examples. That shows that the y position of the text determines the bottom part of the text.

Example 3

Text anchoring

The Text anchor determines what part of the text is positioned at the x-axis. The default value is the left edge of the text, but we can modify it using the three values “start” , “middle” and “end” of the “text-anchor” CSS property.

<html>
<body>
<svg height="100" width="500">
<text x="110" y="30" fill="lime" font-size="30px" text-anchor="start">Initial</text>
<text x="110" y="50" fill="red" font-size="30px" text-anchor="middle">Moderate</text>
<text x="110" y="70" fill="purple" font-size="30px" text-anchor="end">Finished</text>
<line x1="110" y1="0" x2="110" y2="90" stroke="grey" stroke-dasharray="10 3"/>
<text x="300" y="30" fill="cyan" font-size="30px" text-anchor="end">Finish</text>
<text x="300" y="50" fill="black" font-size="30px" text-anchor="middle">Moderate</text>
<text x="300" y="70" fill="pink" font-size="30px" text-anchor="start">Initial</text>
<line x1="300" y1="0" x2="300" y2="90" stroke="lightgrey""/>
</svg>
</body>
</html>

Output

Text anchoring

In the output, we can see that the vertical Grey division shows the x positions of three texts. The first text starts from x=110, the second text has its middle part at x=110 and the third text ends at x=110. The next one shows the first text ends at x=300 and the second text has its middle part at x=300 and the third text starts at x=300.

Example 4

Multiline text

The tag <text> can be arranged in any number of subgroups with <tspan> tags that can contain a different formatting and position for multiline text.

<html>
<body>
<svg height="200" width="500">
<text x="10" y="23" fill="black" font-size="30px">Multiline Text:
<tspan x="10" y="45" fill="tomato" font-size="20px">1st line of text.</tspan>
<tspan x="10" y="70" fill="grey" font-size="20px">2nd line of text.</tspan>
<tspan x="20" y="95" fill="lightblue" font-size="20px">3rd line of text.</tspan>
<tspan x="40" y="120" fill="orange" font-size="20px">4th line of text.</tspan>
<tspan x="80" y="145" fill="lightgreen" font-size="20px">5th line of text.</tspan>
</text>
</svg>
</body>
</html>

Output

Multiline text

Example 5

Text transformation

<html>
<body>
<svg height="250" width="500">
<text x="10" y="20" fill="lime" font-size="20px" transform="rotate(30 20,40)">North-West</text>
<text x="120" y="20" fill="orange" font-size="30px" transform="rotate(-20 300,40)">North-East</text>
<text x="220" y="20" fill="cyan" font-size="30px" transform="rotate(130 150,30)">South-West</text>
<text x="200" y="20" fill="tomato" font-size="20px" transform="rotate(-120 250,100)">South-East</text>
</svg>
</body>
</html>

Output

Text transformation

Example 6

Text as link

<html>
<body>
<svg height="250" width="500">
<a xlink:href="http://www.c-sharpcorner.com/UploadFile/9a9e6f/overview-of-scalable-vector-graphics-svg/" target="_blank">
<text x="10" y="20" fill="blue" font-size="20px">SVG Overview</text>
</a>
</svg>
</body>
</html>

Output

SVG Overview

Example 7

Vertical Text

Vertical Text can be done using the “writing-mode” CSS property to tb, in other words top to bottom.

It can also be done by transformation of text.

<html>
<body>
<svg height="300" width="550">
<text x="10" y="20" fill="green" font-size="20px"style="writing-mode: tb;">
CSharp
</text>
<text x="40" y="10" fill="cyan" font-size="20px"style="writing-mode: tb; glyph-orientation-vertical: 0;">
Corner
</text>
<text x="80" y="10" fill="lightgreen" font-size="30px"style="writing-mode: tb; glyph-orientation-vertical: 90;">
Csharpcorner
</text>
<text x="120" y="10" fill="blue" font-size="20px"style="writing-mode: tb; glyph-orientation-vertical: 180;">
Csharp corner
</text>
<text x="150" y="10" fill="grey" font-size="30px"style="writing-mode: tb; glyph-orientation-vertical: 270;">
Csharp corner
</text>
<text x="180" y="10" fill="lime" font-size="20px"style="writing-mode: tb; glyph-orientation-vertical: 360;">
Csharp corner
</text>
</svg>
</body>
</html>

Output

Vertical Text

Example 8

Text with letter and word spacing

It can be done using the CSS properties “letter-spacing” and “word-spacing”.

<html>
<body>
<svg height="300" width="500">
<text x="20" y="20" font-size="30px" >Normal Text</text>
<text x="20" y="50" fill="orange" font-size="20px" style="letter-spacing:2;">Text with letter spacing(2)</text>
<text x="20" y="75" fill="lightgreen" font-size="20px" style="letter-spacing:4;">Text with letter spacing(4)</text>
<text x="20" y="100" fill="blue" font-size="20px" style="letter-spacing:6;">Text with letter spacing(6)</text>
<text x="20" y="150" font-size="30px" >Normal Text</text>
<text x="20" y="175" fill="red" font-size="20px" style="word-spacing:2;">Text with word spacing(2)</text>
<text x="20" y="200" fill="cyan" font-size="20px" style="word-spacing:4;">Text with word spacing(4)</text>
<text x="20" y="225" fill="grey" font-size="20px" style="word-spacing:6;">Text with word spacing(6)</text>
</svg>
</body>
</html>

Output

word spacing

Example 10

Text direction

The direction of the text can be set using the “direction” CSS property that includes the two values “ltr” (left to right) and “rtl” (right to left). There is also the need to set the Unicode-bidi CSS property to bidi-override in case of “rtl”.

<html>
<body>
<svg height="300" width="500">
<text x="10" y="40" fill="blue" font-size="30px" style="direction: ltr; unicode-bidi: bidi-override;">
Left to right
</text>
<text x="160" y="80" fill="red" font-size="30px" style="direction: rtl; unicode-bidi: bidi-override;">
Right to left
</text>
</svg>
</body>
</html>

Output

Example 9

Text length and length adjust

The “textLength” something sets the length of the text and then fits it to the specified length by adjusting the space between the characters and the size of the glyphs. The “lengthAdjust” something specifies when both letter spacing and glyphs size need to be adjusted.

<html>
<body>
<svg height="300" width="550">
<text x="5" y="30" fill="lime" font-size="30px" textLength="150">This is the length of text</text>
<text x="5" y="60" fill="orange" font-size="30px" textLength="200">This is the length of text</text>
<text x="5" y="90" fill="blue" font-size="30px" textLength="250">This is the length of text</text>
<text x="5" y="120" fill="grey" font-size="30px" textLength="200" lengthAdjust="spacingAndGlyphs">This is the length of text</text>
<text x="5" y="160" fill="red" font-size="40px" textLength="250" lengthAdjust="spacingAndGlyphs">This is the length of text</text>
</svg>
</body>
</html>

Output

Output

Want to read more.

Thank you, keep learning and sharing.

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all