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:
SVG text is created using the <text> element. This element is used to define text to be rendered on the SVG canvas.
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.
The font family, size, color, and other text properties can be set using the style attribute or the style element within the <text> element.
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.
SVG text can be transformed using the transform attribute, which allows you to scale, rotate, skew, or translate the text.
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.
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

<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