Tutorial from jenkov.com which I used to explore SVG to this point.

SVG Experiment

This is a pair of SVG elements (rectangle and diagonal text) implemented in the body of an unstyled web page.

Hello World

The first step is declaring the SVG version. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

The rectangle is done with the SVG command: <rect x="35" y="10" height="110" width="110" style="stroke:#ff0000; fill:#ccccff">

The diagonal text is the result of this SVG command: <text x="20" y="60" transform="translate(30) rotate(45 50 50)" >Hello World</text>

"Transform" is the overall change command and "translate(30) moves the position of the text 30px to the right. Also part of the the transform command is the rotate(45 50 50) which makes a diagonal of the text with the center of rotation shifted to point 50,50 within the SVG frame of reference. Go ahead. Try changing the rotation to its simpler form of just rotate(45) so you can see where the text goes. What I got was not so satisfying in appearance.

Pay attention to how the rotation positioning values (50 50) work. The first is the y axis and the second is the x axis, counter to what I expected.
Hello World Remember to use the closing </svg> tag for each experiment.

Updated: (with more explanation). Revisiting and revising helps me understand better.