Introduction

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.
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
  1. <html>
  2. <body>
  3. <svg height="80" width="500">
  4. <text x="10" y="40" fill="green" font-size="30px">I like</text>
  5. <text x="100" y="40" fill="orange" font-size="40px">C# Corner</text>
  6. <text x="290" y="40" fill="blue" font-size="30px">Community :)</text>
  7. </svg>
  8. </body>
  9. </html>
    Output
    SVG text
    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 they attribute determines the position of the bottom edge of the text instead of the top edge. Here, the position of the text is different from those used in the triangle, circle, rectangle and so on.
    1. <html>
    2. <body>
    3. <svg height="80" width="500">
    4. <text x="10" y="40" fill="tomato" font-size="30px">How are you ?</text>
    5. <line x1="0" y1="40" x2="200" y2="40" stroke="blue" stroke-dasharray="10 3"/>
    6. <text x="220" y="60" fill="cyan" font-size="30px">Fine, Thank you !</text>
    7. <line x1="200" y1="60" x2="450" y2="60" stroke="green"/>
    8. </svg>
    9. </body>
    10. </html>
      Output
      In the output, we can see that the y position of both the text and the line is the same in both examples. That shows that the 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.
      1. <html>
      2. <body>
      3. <svg height="100" width="500">
      4. <text x="110" y="30" fill="lime" font-size="30px" text-anchor="start">Initial</text>
      5. <text x="110" y="50" fill="red" font-size="30px" text-anchor="middle">Moderate</text>
      6. <text x="110" y="70" fill="purple" font-size="30px" text-anchor="end">Finished</text>
      7. <line x1="110" y1="0" x2="110" y2="90" stroke="grey" stroke-dasharray="10 3"/>
      8. <text x="300" y="30" fill="cyan" font-size="30px" text-anchor="end">Finish</text>
      9. <text x="300" y="50" fill="black" font-size="30px" text-anchor="middle">Moderate</text>
      10. <text x="300" y="70" fill="pink" font-size="30px" text-anchor="start">Initial</text>
      11. <line x1="300" y1="0" x2="300" y2="90" stroke="lightgrey""/>
      12. </svg>
      13. </body>
      14. </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 different formatting and position for multiline text.
        1. <html>
        2. <body>
        3. <svg height="200" width="500">
        4. <text x="10" y="23" fill="black" font-size="30px">Multiline Text:
        6. <tspan x="10" y="45" fill="tomato" font-size="20px">1st line of text.</tspan>
        7. <tspan x="10" y="70" fill="grey" font-size="20px">2nd line of text.</tspan>
        8. <tspan x="20" y="95" fill="lightblue" font-size="20px">3rd line of text.</tspan>
        9. <tspan x="40" y="120" fill="orange" font-size="20px">4th line of text.</tspan>
        10. <tspan x="80" y="145" fill="lightgreen" font-size="20px">5th line of text.</tspan>
        11. </text>
        12. </svg>
        13. </body>
        14. </html>
          Output
          Multiline text
          Example 5
          1. <html>
          2. <body>
          3. <svg height="250" width="500">
          4. <text x="10" y="20" fill="lime" font-size="20px" transform="rotate(30 20,40)">North-West</text>
          5. <text x="120" y="20" fill="orange" font-size="30px" transform="rotate(-20 300,40)">North-East</text>
          6. <text x="220" y="20" fill="cyan" font-size="30px" transform="rotate(130 150,30)">South-West</text>
          7. <text x="200" y="20" fill="tomato" font-size="20px" transform="rotate(-120 250,100)">South-East</text>
          8. </svg>
          9. </body>
          10. </html>
            Output
            Text transformation
            Example 6

            Text as link

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

              Vertical Text

              Vertical Text can be done using the “writing-mode” CSS property to be, in other words, top to bottom.
              It can also be done by the transformation of text.
              1. <html>
              2. <body>
              3. <svg height="300" width="550">
              4. <text x="10" y="20" fill="green" font-size="20px"style="writing-mode: tb;">
              5. CSharp
              6. </text>
              7. <text x="40" y="10" fill="cyan" font-size="20px"style="writing-mode: tb; glyph-orientation-vertical: 0;">
              8. Corner
              9. </text>
              10. <text x="80" y="10" fill="lightgreen" font-size="30px"style="writing-mode: tb; glyph-orientation-vertical: 90;">
              11. Csharpcorner
              12. </text>
              13. <text x="120" y="10" fill="blue" font-size="20px"style="writing-mode: tb; glyph-orientation-vertical: 180;">
              14. Csharp corner
              15. </text>
              16. <text x="150" y="10" fill="grey" font-size="30px"style="writing-mode: tb; glyph-orientation-vertical: 270;">
              17. Csharp corner
              18. </text>
              19. <text x="180" y="10" fill="lime" font-size="20px"style="writing-mode: tb; glyph-orientation-vertical: 360;">
              20. Csharp corner
              21. </text>
              22. </svg>
              23. </body>
              24. </html>
                Output
                Vertical Text
                Example 8

                Text with the letter and word spacing

                It can be done using the CSS properties “letter-spacing” and “word-spacing”.
                1. <html>
                2. <body>
                3. <svg height="300" width="500">
                4. <text x="20" y="20" font-size="30px" >Normal Text</text>
                5. <text x="20" y="50" fill="orange" font-size="20px" style="letter-spacing:2;">Text with letter spacing(2)</text>
                6. <text x="20" y="75" fill="lightgreen" font-size="20px" style="letter-spacing:4;">Text with letter spacing(4)</text>
                7. <text x="20" y="100" fill="blue" font-size="20px" style="letter-spacing:6;">Text with letter spacing(6)</text>
                8. <text x="20" y="150" font-size="30px" >Normal Text</text>
                9. <text x="20" y="175" fill="red" font-size="20px" style="word-spacing:2;">Text with word spacing(2)</text>
                10. <text x="20" y="200" fill="cyan" font-size="20px" style="word-spacing:4;">Text with word spacing(4)</text>
                11. <text x="20" y="225" fill="grey" font-size="20px" style="word-spacing:6;">Text with word spacing(6)</text>
                12. </svg>
                13. </body>
                14. </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”.
                  1. <html>
                  2. <body>
                  3. <svg height="300" width="500">
                  4. <text x="10" y="40" fill="blue" font-size="30px" style="direction: ltr; unicode-bidi: bidi-override;">
                  5. Left to right
                  6. </text>
                  7. <text x="160" y="80" fill="red" font-size="30px" style="direction: rtl; unicode-bidi: bidi-override;">
                  8. Right to left
                  9. </text>
                  10. </svg>
                  11. </body>
                  12. </html>
                    Output
                    Text direction
                    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.
                    1. <html>
                    2. <body>
                    3. <svg height="300" width="550">
                    4. <text x="5" y="30" fill="lime" font-size="30px" textLength="150">This is the length of text</text>
                    5. <text x="5" y="60" fill="orange" font-size="30px" textLength="200">This is the length of text</text>
                    6. <text x="5" y="90" fill="blue" font-size="30px" textLength="250">This is the length of text</text>
                    7. <text x="5" y="120" fill="grey" font-size="30px" textLength="200" lengthAdjust="spacingAndGlyphs">This is the length of text</text>
                    8. <text x="5" y="160" fill="red" font-size="40px" textLength="250" lengthAdjust="spacingAndGlyphs">This is the length of text</text>
                    9. </svg>
                    10. </body>
                    11. </html>
                      Output
                      Output
                      I want to read more.

                      Summary

                      In this article, we learned about Scalable Vector Graphics - Text 1.
                      Thank you, keep learning and sharing.