This is a pair of SVG elements (rectangle and diagonal text) implemented in the body of an unstyled web page.
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.Remember to use the closing </svg> tag for each experiment.
Updated: (with more explanation). Revisiting and revising helps me understand better.