SVG <text> and <tspan>
SVG Text - <text>
The <text> element is used to define a text.
The <text> element has seven basic attributes to position and
rotate the text:
| Attribute | Description |
|---|---|
| x | The x position of the start of the text. Default is 0 |
| y | The y position of the start of the text. Default is 0 |
| dx | The horizontal shift position for text (from previous text position) |
| dy | The vertical shift position for text (from previous text position) |
| rotate | The rotation (in degrees) applied to each letter of text |
| textLength | The width that the text must fit in |
| lengthAdjust | How the text should be compressed or stretched to fit the width defined by the textLength attribute |
A Simple Text
Write a simple text with SVG:
Here is the SVG code:
Example
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="15" fill="red">I love SVG!</text>
</svg>
Try it Yourself »
A Text With no Fill
A text with no fill and stroke only:
Here is the SVG code:
Example
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="none" stroke="red" font-size="35">I love
SVG!</text>
</svg>
Try it Yourself »
A Text With Fill and Stroke
A text with fill and stroke:
Here is the SVG code:
Example
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="pink" stroke="blue" font-size="35">I love
SVG!</text>
</svg>
Try it Yourself »
Rotate Each Letter of Text
Rotate each letter of the text, by a degree, with the
rotate attribute:
Here is the SVG code:
Example
<svg height="40" width="200">
<text x="5" y="30" fill="red"
font-size="35" rotate="30">I love SVG!</text>
</svg>
Try it Yourself »
Rotate Whole Text
Rotate the whole text with the transform attribute:
Here is the SVG code:
Example
<svg height="100" width="200">
<text x="5" y="30" fill="red"
font-size="25" transform="rotate(30 20,40)">I love SVG!</text>
</svg>
Try it Yourself »
SVG Text - <tspan>
The <tspan> element is used to mark up
parts of a text (just like the HTML <span>
element).
The <tspan> element must be a child of a <text>
element or another <tspan> element.
The <tspan> element has six basic attributes to position and
rotate the
text:
| Attribute | Description |
|---|---|
| x | Sets a new absolute x position for the start of the text in tspan |
| y | Sets a new absolute y position for the start of the text in tspan |
| dx | The horizontal shift position for text in tspan (from previous text position) |
| dy | The vertical shift position for text in tspan (from previous text position) |
| rotate | The rotation (in degrees) applied to each letter of text in tspan |
| textLength | The width that the text in tspan must fit in |
Use of <tspan> Element
Use of the <tspan> element inside the
<text> element:
Here is the SVG code:
Example
<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="red" font-size="35">I Love
<tspan
fill="none" stroke="green">SVG</tspan>!
</text>
</svg>
Try it Yourself »
