Post
Ask Question

Scalable Vector Graphics - Text 1

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.
  • 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 the transformation of text.
  • textLength used for rendering length of text.
  • lengthAdjust is used for the 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
  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:    
        5.         
        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
               
               
               
              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.


                      Similar Articles