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

<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 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.
<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 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

<?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 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

<?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

<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 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>
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