Here is an example of simple text drawing.
1: <svg version="1.1" baseProfile="full" 2: xmlns="http://www.w3.org/2000/svg" 3: width="300px" height="30px" viewBox="0 0 300 30" 4: font-family="Times, serif" font-size="14px"> 5: 6: <text x="5" y="14">This is some text.</text> 7: <text x="5" y="28">This is some more text.</text> 8: 9: </svg> 10:
Line 4 sets the default font and font size for everything enclosed in the <svg> tag. It would be possible to set these attributes in the <svg> tag too.
The x and y attributes determine the position on the baseline (the line on which the letters sit) where the text starts. Increasing the y-coordinate by an amount equal to the font size moves to the next line
The text can move to the right or left from the point (x,y) specified by the attributes. This is controlled by the text-anchor attribute as demonstrated below:
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="300px" height="65px" viewBox="0 0 300 65" 04: font-family="Times, serif" font-size="20px"> 05: 06: <line x1="150" y1="0" x2="150" y2="65" stroke-width="1px" stroke="red"/> 07: <text x="150" y="20" text-anchor="start">Left justified.</text> 08: <text x="150" y="40" text-anchor="middle">Centered.</text> 09: <text x="150" y="60" text-anchor="end">Right justified.</text> 10: </svg> 11:
The following examples use dx and dy attributes to tweak the position of the text. Including these attributes is equivalent to adding something to x and y. It is useful for tweaking the position.
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="200px" height="200px" viewBox="0 0 200 200" 04: font-family="Times, serif" font-size="14px"> 05: 06: <circle cx="50" cy="50" r="5" stroke-width="1px" stroke="black" fill="red"/> 07: <text x="50" y="50" dx="-6" dy="-6" text-anchor="end">A</text> 08: 09: <circle cx="100" cy="50" r="5" stroke-width="1px" stroke="black" fill="red"/> 10: <text x="100" y="50" dx="0" dy="-9" text-anchor="middle">B</text> 11: 12: <circle cx="150" cy="50" r="5" stroke-width="1px" stroke="black" fill="red"/> 13: <text x="150" y="50" dx="6" dy="-6" text-anchor="start">C</text> 14: 15: <circle cx="50" cy="100" r="5" stroke-width="1px" stroke="black" fill="red"/> 16: <text x="50" y="100" dx="-9" dy="5" text-anchor="end">D</text> 17: 18: <circle cx="150" cy="100" r="5" stroke-width="1px" stroke="black" fill="red"/> 19: <text x="150" y="100" dx="9" dy="5" text-anchor="start">E</text> 20: 21: <circle cx="50" cy="150" r="5" stroke-width="1px" stroke="black" fill="red"/> 22: <text x="50" y="150" dx="-6" dy="16" text-anchor="end">F</text> 23: 24: <circle cx="100" cy="150" r="5" stroke-width="1px" stroke="black" fill="red"/> 25: <text x="100" y="150" dx="0" dy="19" text-anchor="middle">G</text> 26: 27: <circle cx="150" cy="150" r="5" stroke-width="1px" stroke="black" fill="red"/> 28: <text x="150" y="150" dx="6" dy="16" text-anchor="start">H</text> 29: 30: </svg> 31:
SVG has powerful tools for manipulating text. These are far beyond the scope of this document. Please consult the references below.
W3Schools has a List of Web Safe Font Choices.
