Skip to main content

SVG Text

A <text> element are used to draw a text. Note that there are possible to applied css and js to SVG text. 

   <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