Skip to main content

SVG Text

SVG (Scalable Vector Graphics) is an XML-based vector image format for 2D graphics. SVG allows for the creation of static or dynamic images, including text. Here are some key points to keep in mind when working with SVG text:

  1. SVG text is created using the <text> element. This element is used to define text to be rendered on the SVG canvas.

  2. The <text> element can be used in combination with other SVG elements to create more complex text layouts. For example, you can use <tspan> elements to create multiline text, or <textPath> elements to create text that follows a curved path.

  3. The font family, size, color, and other text properties can be set using the style attribute or the style element within the <text> element.

  4. You can use CSS to style SVG text. This is done by embedding CSS within the SVG document or by referencing an external CSS file.

  5. SVG text can be transformed using the transform attribute, which allows you to scale, rotate, skew, or translate the text.

  6. SVG text can be animated using SMIL (Synchronized Multimedia Integration Language) or JavaScript. Animations can be used to create effects such as text that fades in or out, or text that moves across the screen.

  7. SVG text can be made accessible to screen readers and other assistive technologies by providing alternative text descriptions using the aria-label attribute.

Overall, SVG text is a powerful tool for creating dynamic, scalable text graphics on the web.

   <text  
    x="x-coordinate"
    y="y-coordinate">
    user-text
  </text>
Name Default value Description
x 0 x-coordinate of Text
y 0 y-coordinate of Text
user-text none Display text
fill black Text color

SVG Text Example

SVG text SVG Text Example 
<text  
   x="x-coordinate"
   y="y-coordinate">
    user-text
</text>

SVG Multiline Text

There are two way to define multi line text. first method, display every line by line of a separate text element. Or used to tspan element within text element. tspan can used to separator text. For example

SVG multiline text Normal 1'st Line Second Line Third Line 
<svg width="260" height="60" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="blue">
    Normal
    <tspan >1'st Line</tspan>
    <tspan x="0" y="35" fill="green" >Second Line</tspan>
    <tspan x="0" y="55" fill="red" >Third Line</tspan>
  </text>
</svg>

In this example separate line by span and its coordinates. So coordinates are very important to define a location of tspan text. When we are not define tspan coordinate then text are display in single line. See this example.


Normal 1'st Line Second Line Third Line 
<svg width="320" height="30" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="blue">
    Normal
    <tspan >1'st Line</tspan>
    <tspan fill="green" >Second Line</tspan>
    <tspan fill="red" >Third Line</tspan>
  </text>
</svg>

This are useful to write colorful text for a single line.

Svg text stroke example

SVG Text stroke MY SVG 
<svg height="50" width="270"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
   <text x="10" font-size="40px" y="30" stroke="salmon" fill="#03a9f491" >
MY SVG
  </text>
</svg>

Rotate SVG text

Example 1

SVG rotate Text SVG Rotation Example 
<?xml version="1.0"?>
<svg width="300" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="0" transform="rotate(315,250,50)" font-size="21px" y="15" fill="cadetblue">SVG Rotation Example</text>
</svg>

Example 2

SVG Rounded Text A B C D E F G H I H K L M N O P Q R S T S V G T E X 
<svg height="300" width="270"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<defs>
    <path d="M20 150 a100 100,0 , 0 1, 200 0 a100 100,0,0 1,-200 0"  id="txtView" />
  </defs> 
   <text fill="#03a9f491" font-size="25.5" font-weight="600">
    <textPath  startOffset="5" xlink:href="#txtView">A B C D E F G H I H K L M N O P Q R S T  S V G T E X </textPath>
  </text>
</svg>

SVG Text Animation

SVG text rotate animation SVG TEXT 
 <?xml version="1.0"?>
<svg width="260" height="140" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <text x="80"  font-size="21px" y="45" fill="#9c27b0">SVG
   <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 67 67"
            to="0 67 67"
            dur="7s"
            repeatCount="indefinite"/>
  </text>
  <text x="80"  font-size="21px" y="85" fill="darkblue">TEXT
   <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 67 67"
            to="360 67 67"
            dur="7s"
            repeatCount="indefinite"/>
  </text>
</svg>

Demo 2

text font animationn 1 
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
  <svg width="100px" height="105px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <text  x="20%" y="50%" fill="gray" font-weight="600" font-size="70"><tspan id="textChange">1</tspan><animate attributeName="font-size" values="70;1;70" begin="0s" dur="2s"repeatCount="50"/>
    <animate attributeName="fill" values="gray;#5f5a82;firebrick;#6538b2;cornflowerblue;#ad549f" begin="0s" dur="5s"repeatCount="10"/>
    </text>
 <!-- JQuery-->
    <script type="text/JavaScript">
     
        $(function(){
        var value=1;
       
        
       var stop= setInterval(function(){
         value++;
         if(value>=50){
          clearInterval(stop)
         }
         $("#textChange").text(value)
          //$("#textChange").text(String.fromCharCode(value));
        },2000)
      
       });
 
  </script>
  </svg>
  </body>
  
</html>

Demo 3

SVG path animation 
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path fill="none" stroke="blue" d="M4.59 62.79L12.99 62.79L12.99 62.79Q13.57 77.59 25.78 77.59L25.78 77.59L25.78 77.59Q30.18 77.59 33.11 75.39L33.11 75.39L33.11 75.39Q37.21 72.22 37.21 66.50L37.21 66.50L37.21 66.50Q37.21 60.35 32.08 55.66L32.08 55.66L32.08 55.66Q28.56 52.54 20.02 47.61L20.02 47.61L20.02 47.61Q6.49 39.65 6.49 28.61L6.49 28.61L6.49 28.61Q6.49 21.63 10.89 16.80L10.89 16.80L10.89 16.80Q16.21 10.89 25.10 10.89L25.10 10.89L25.10 10.89Q41.65 10.89 43.90 30.81L43.90 30.81L35.69 30.81L35.69 30.81Q35.35 26.22 33.79 23.49L33.79 23.49L33.79 23.49Q30.66 17.97 25.10 17.97L25.10 17.97L25.10 17.97Q19.34 17.97 16.50 21.88L16.50 21.88L16.50 21.88Q14.50 24.66 14.50 27.98L14.50 27.98L14.50 27.98Q14.50 35.89 27.39 43.41L27.39 43.41L27.39 43.41Q35.35 48.05 39.60 52.29L39.60 52.29L39.60 52.29Q45.31 57.86 45.31 66.41L45.31 66.41L45.31 66.41Q45.31 74.46 40.19 79.39L40.19 79.39L40.19 79.39Q34.72 84.91 26.03 84.91L26.03 84.91L26.03 84.91Q15.14 84.91 9.08 76.90L9.08 76.90L9.08 76.90Q4.88 71.34 4.59 62.79L4.59 62.79ZM69.73 82.91L53.42 12.89L62.30 12.89L75 73.14L87.70 12.89L96.63 12.89L80.32 82.91L69.73 82.91ZM145.31 82.91L138.92 82.91L138.92 73.49L138.92 73.49Q133.35 84.91 124.07 84.91L124.07 84.91L124.07 84.91Q115.04 84.91 109.77 75.59L109.77 75.59L109.77 75.59Q104.59 66.26 104.59 48.00L104.59 48.00L104.59 48.00Q104.59 30.86 110.01 20.80L110.01 20.80L110.01 20.80Q115.38 10.89 125.39 10.89L125.39 10.89L125.39 10.89Q141.46 10.89 144.63 32.91L144.63 32.91L136.43 32.91L136.43 32.91Q134.18 18.41 125.39 18.41L125.39 18.41L125.39 18.41Q113.18 18.41 113.18 47.80L113.18 47.80L113.18 47.80Q113.18 77.39 125 77.39L125 77.39L125 77.39Q135.74 77.39 138.04 56.79L138.04 56.79L127.49 56.79L127.49 49.61L145.31 49.61L145.31 82.91Z"></path>
<circle fill="none" stroke="green" stroke-width="3"   r=5>
  <animateMotion
              path="M4.59 62.79L12.99 62.79L12.99 62.79Q13.57 77.59 25.78 77.59L25.78 77.59L25.78 77.59Q30.18 77.59 33.11 75.39L33.11 75.39L33.11 75.39Q37.21 72.22 37.21 66.50L37.21 66.50L37.21 66.50Q37.21 60.35 32.08 55.66L32.08 55.66L32.08 55.66Q28.56 52.54 20.02 47.61L20.02 47.61L20.02 47.61Q6.49 39.65 6.49 28.61L6.49 28.61L6.49 28.61Q6.49 21.63 10.89 16.80L10.89 16.80L10.89 16.80Q16.21 10.89 25.10 10.89L25.10 10.89L25.10 10.89Q41.65 10.89 43.90 30.81L43.90 30.81L35.69 30.81L35.69 30.81Q35.35 26.22 33.79 23.49L33.79 23.49L33.79 23.49Q30.66 17.97 25.10 17.97L25.10 17.97L25.10 17.97Q19.34 17.97 16.50 21.88L16.50 21.88L16.50 21.88Q14.50 24.66 14.50 27.98L14.50 27.98L14.50 27.98Q14.50 35.89 27.39 43.41L27.39 43.41L27.39 43.41Q35.35 48.05 39.60 52.29L39.60 52.29L39.60 52.29Q45.31 57.86 45.31 66.41L45.31 66.41L45.31 66.41Q45.31 74.46 40.19 79.39L40.19 79.39L40.19 79.39Q34.72 84.91 26.03 84.91L26.03 84.91L26.03 84.91Q15.14 84.91 9.08 76.90L9.08 76.90L9.08 76.90Q4.88 71.34 4.59 62.79L4.59 62.79ZM69.73 82.91L53.42 12.89L62.30 12.89L75 73.14L87.70 12.89L96.63 12.89L80.32 82.91L69.73 82.91ZM145.31 82.91L138.92 82.91L138.92 73.49L138.92 73.49Q133.35 84.91 124.07 84.91L124.07 84.91L124.07 84.91Q115.04 84.91 109.77 75.59L109.77 75.59L109.77 75.59Q104.59 66.26 104.59 48.00L104.59 48.00L104.59 48.00Q104.59 30.86 110.01 20.80L110.01 20.80L110.01 20.80Q115.38 10.89 125.39 10.89L125.39 10.89L125.39 10.89Q141.46 10.89 144.63 32.91L144.63 32.91L136.43 32.91L136.43 32.91Q134.18 18.41 125.39 18.41L125.39 18.41L125.39 18.41Q113.18 18.41 113.18 47.80L113.18 47.80L113.18 47.80Q113.18 77.39 125 77.39L125 77.39L125 77.39Q135.74 77.39 138.04 56.79L138.04 56.79L127.49 56.79L127.49 49.61L145.31 49.61L145.31 82.91Z" begin="0s" dur="15s" repeatCount="indefinite" rotate="auto"/>
   </circle>
</svg>
Last updated on by Kalkicode




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment