Text in SVG
The <text> element renders text. Use text-anchor for alignment and <tspan> for multi-part styled text.
HTML
Beginner
3 min read
SVG Text
Example
<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
<text x="150" y="40" text-anchor="middle"
font-family="Arial" font-size="24" fill="steelblue">Hello SVG</text>
<text x="150" y="65" text-anchor="middle" font-size="14">
<tspan fill="coral">Scalable</tspan>
<tspan dx="8" fill="teal">Vector</tspan>
<tspan dx="8" fill="gray">Graphics</tspan>
</text>
</svg> Pro Tip
Use tspan to style different parts of text within one text element.