Tutorial by Examples

<svg xmlns="http://www.w3.org/2000/svg"> <text x="40" y="60" font-size="28">Hello World!</text> </svg> The x and y coordinate specifies the position of the bottom-left corner of the text (unless text-anchor has been modified). ...

Using the baseline-shift parameter, you can specify super- or subscript. But this is not supported by all major browsers. <svg xmlns="http://www.w3.org/2000/svg"> <text x="10" y="20">x<tspan baseline-shift="super">2</tspan></te...

The rotate property rotates each character by the specified angle. <svg xmlns="http://www.w3.org/2000/svg"> <text x="10" y="20" rotate="30">Each character is rotated</text> </svg> To rotate the whole text element, you have to ...

<svg width="400px" height="200px"> <text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em"> Individually Spaced Text </text> </svg> The Text element supports individual placement of letters by accepting an array of values for...